Date post: | 11-May-2015 |
Category: |
Technology |
Upload: | vladimir-kulyukin |
View: | 298 times |
Download: | 2 times |
MobAppDev
Custom Views & Custom ArrayAdapters, Working with Resources, Downloading Images, Spawning Threads, Saving Files
on SDCARD,
Vladimir Kulyukin
www.vkedco.blogspot.com
Outline
● Custom Views● Custom Array Adapters● Working with Resources● Downloading and Saving Image Files
Custom Views&
Custom ArrayAdapters
Custom Views
● Views can be customized to change the look and feel of your applications
● Views can be are typically customized by extending either View or SurfaceView classes
● View is a lightweight solution for 2D graphics● SurfaceView can be used for 3D graphics
Custom Views Lab: Famous Mathematicians App
● We will develop an application that displays three ListViews
● The first ListView has just first and last names of several famous mathematicians
● The second ListView customizes the ListView with foreground and background colors and lines
● The third ListView customizes the ListView by adding images and modifying the way the names are displayed
Sample Screeshots
ListView 01 ListView 02 ListView 03
/res/values/params.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<integer name="view_type">1</integer>
</resources>
Which ListView is displayed can be specified as a integer in params.xml
Displaying Different ListViews Main Activity
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mRes = getResources();
switch ( mRes.getInteger(R.integer.view_type) ) {
case 1: populateListViewOne(); break;
case 2: populateListViewTwo(); break;
case 3:
populateListViewThree();
break;
}
}
ListView 01
What Do We Need to Do to Construct
this ListView?
ListView 01
What Do We Need to Do to Construct
this ListView?
1) Specify the mathematicians' names in an XML file (e.g., famous_mathematicians.xml)
2) Create an ArrayAdapter<String>
3) Connect the ArrayAdapter<String>
to the activity's ListView
ListView 01 Code Fragments
/res/values/famous_mathematicians.xml <resources>
<string-array name="list_of_famous_mathematicians">
<item>Alonzo Church</item>
<item>Kurt Gödel</item>
<item>David Hilbert</item>
<item>Giuseppe Peano</item>
<item>Georg Cantor</item>
<item>Muhammad al-Khwarizmi</item>
<item>Blaise Pascal</item>
<item>Isaac Newton</item>
<item>Johannes Kepler</item>
<item>Nikolaus Kopernikus</item>
<item>Omar Khayyam</item>
</string-array>
</resources>
ListView 01: Steps 2 & 3private static String[] mListOfMathematicians = null;
private static Resources mRes = null;
private void populateListViewOne() {
mListOfMathematicians = mRes.getStringArray(R.array.list_of_famous_mathematicians);
getListView().setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_expandable_list_item_1,
mListOfMathematicians));
}
ListView 02
What Do We Need To Do To Construct ListView 2?
ListView 02What Do We Need To Do To Construct ListView 2?
1) Specify the mathematicians' names in XML
(famous_mathematicians.xml) (same as in ListView 01)
2) Design and develop a mathematician class
Mathematician.java
3) Design and develop a mathematician's view in
Java (MathematicianView.java) and in XML
(colors.xml, dimens.xml mathematician_view_1.xml)
4) Create an ArrayAdapter<Mathematician>
5) Connect ArrayAdapter<Mathematician> to the activity's
ListView
ListView 02What Do We Need To Do To Construct ListView 2?
1) Specify the mathematicians' names in XML
(famous_mathematicians.xml)
2) Design and develop a mathematician class
Mathematician.java
3) Design and develop a mathematician's view in
Java (MathematicianView.java) and in XML
(colors.xml, dimens.xml mathematician_view_1.xml)
4) Create an ArrayAdapter<Mathematician>
5) Connect ArrayAdapter<Mathematician> to the activity's ListView
ListView 02 Code Fragments
ListView 02: Step 2
Define a Custom Data Type that Needs a Custom View (Mathematician.java )
ListView 02: Step 3 (res/values/colors.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background_clr">#AAFFFF99</color>
<color name="line_clr">#FF0000FF</color>
<color name="margin_clr">#90FF0000</color>
<color name="text_clr">#AA0000FF</color>
</resources>
ListView 02: Step 3 (res/values/dimens.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="left_margin">50dp</dimen>
<dimen name="right_margin">30dp</dimen>
</resources>
ListView 02: Step 3 (res/layout/mathematician_view_1.xml)<?xml version="1.0" encoding="utf-8"?>
<org.vkedco.android.listofmathematicians.MathematicianView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:scrollbars="vertical"
android:textColor="@color/text_clr"
android:textSize="20dp"
android:fadingEdge="vertical"
/>
res/layout/mathematician_view_1.xml
ListView 02: Step 3
Define a Custom View for the Custom Data Type
(MathematicianView.java)
ListView 02: Steps 4 & 5// this is a method in the main activity ListOfMathematiciansAct.java
private void populateListViewTwo() {
mListOfMathematicians = mRes.getStringArray(R.array.list_of_famous_mathematicians);
ArrayList<Mathematician> mathematicians =
new ArrayList<Mathematician>();
for(String name : mListOfMathematicians) {
String[] fnln = name.trim().split(" ");
mathematicians.add(new Mathematician(fnln[0],fnln[1]));
}
getListView().setAdapter(new ArrayAdapter<Mathematician>(this,
R.layout.mathematician_view_1,
mathematicians));
}
ListView 03
What Do We Need To Do To Construct ListView 3?
ListView 03What Do We Need To Do To Construct ListView 3?
1) Specify the mathematicians' names in XML
(famous_mathematicians.xml)
2) Design and develop a mathematician class
Mathematician.java
3) Design and develop a mathematician's view in
Java (MathematicianView.java) and in XML
(colors.xml, dimens.xml mathematician_view_2.xml)
4) Create an ArrayAdapter<Mathematician>
5) Connect ArrayAdapter<Mathematician> to the activity's ListView
ListView 03 Code Fragments
ListView 02: Step 3 (res/layout/mathematician_view_2.xml)<RelativeLayout>
<ImageView
android:id="@+id/image"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="@+id/last_name"
android:layout_toRightOf="@+id/image"
/>
<TextView
android:id="@+id/first_name"
android:layout_toRightOf="@+id/last_name"
/>
</RelativeLayout>
res/layout/mathematician_view_2.xml
ListView 03: Steps 4 & 5// this is a method in the main activity ListOfMathematiciansAct.java
private void populateListViewThree() {
mListOfMathematicians = mRes.getStringArray(R.array.list_of_famous_mathematicians);
ArrayList<Mathematician> mathematicians =
new ArrayList<Mathematician>();
for(String name : mListOfMathematicians) {
String[] fnln = name.trim().split(" ");
mathematicians.add(new Mathematician(fnln[0], fnln[1]));
}
MathematicianViewArrayAdapter adptr =
new MathematicianViewArrayAdapter(this,
R.layout.mathematician_view_2,
mathematicians);
getListView().setAdapter(adptr);
}
Working with Resources
Compiled and Non-compiled Resources● Most resources are compiled into binary files before
deployment● Two types of resource files: XML and raw (image, video,
audio)● String and layout resources are compiled into binary
format● XML files placed in /res/raw/ are not compiled into
binary format● Audio and video also go into /res/raw/
Common Resource Sub-directories
● anim – compiled animation files● drawable - .bmp, .png, jpg, etc.● layout – view specifications● values – arrays, colors, dimensions, strings,
styles● xml – compiled XML ● raw – non-compiled raw files
Resource Compilation
● The resource compiler is part of the Android Packaging Tool (AAPT)
● The resource compiler compiles all resources except those in /res/raw/ and places them into the .apk file
● The .apk file is similar to the Java .jar file and contains all the application's code and resources
● The .apk file is installed on the device
Colors /res/values/some_file.xml Color codes; exposed in R.java as R.color.*
Dimensions /res/values/some_file.xml Sizes of various elements in pixels, inches, millimeters; exposed in R.java as R.dimen.*
Images /res/drawable/some-subfolder/some_file.xml
Image resources (.jpg, .gif, .png); Exposed through R.java as R.drawable.*
Resource Compilation
Raw Assets
● Project directory /assets/ contains raw files● Unlike /res/ directory, /assets/ may contain
arbitrarily many sub-directories● Unlike files in /res/ directory, /assets/ directory
do not generate resource IDs● Relative path names must be used to access files
in /assets/
Color Resources● Android color constants are available in
android.R.color namespace● You can also specify your own colors in /res/values/
<resources>
<color name=”red_clr”>#f00</color>
<color name=”blue_clr”>#0000ff</color>
</resources>
Color Resources● Color resource files are placed in /res/values/● Here is how to access color resources in Java and define
them in XML:
// Java Access
int color = getResources().getColor(R.color.my_color);// XML Definition
<TextView
android:textColor=”@color/blue_clr”
android:text=”Blue Text” />
Raw Resources● Place audio, video, text that you need in your
application in /res/raw/ ● These files are not compiled but moved to the .apk● These files are referenced through R.java● Example: /res/raw/david_hilbert_bio.txt can be
referenced as R.raw.david_hilbert_bio
Raw Resources: Example
private String processRawTextFile() {
Resources res = getResources();
InputStream instrm =
res.openRawResource(R.raw.david_hilbert_bio);
processRawStream(instrm);
}
Assets
● Directories /assets/ and /res/ are at the same level of the project tree hierarchy
● Files placed in /assets/ do not generate IDs in R.java● Files in /assets/ are accessed through relative paths
starting at /assets/● The AssetManager class is used to access assets
Assets Example
// process /assets/church_bio.txt
private String processAssetsTextFile() {
AssetManager amngr = getAssets();
InputStream instrm =
amngr.open(“hilbert_bio.txt”);
processAssetsStream(instrm);
}
Downloading &
Saving Images
Resources Lab: Network File Download
● We will develop an application that downloads a file from a given URL
● Stores it on the sdcard● Uses a ProgressDialog to display downloading
progress ● Displays the downloaded picture in an ImageView● Source code is here
Sample Screenshots
Permissions in AndroidManifest.xml
// process /assets/church_bio.txt<!-- Permission: Allow Internet Connectivity -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Permission: Writing to SDCard -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
GUI Components & Constants in Main Activity
// process /assets/church_bio.txt
Button mBtnStartProgress;
ImageView mImageView;
ProgressDialog mProgressBar;
int mProgressBarStatus=0;
Handler mProgressBarHandler=new Handler();
long mFileSize=0;
static final String PROGRESS_MESSAGE="File Downloading ...";
static final String COMPLETION_MESSAGE="Download Progress ...";
static final String FILE_URL = "http://www.ibiblio.org/wm/paint/auth/hiroshige/dyers.jpg";
static final String FILE_PATH = Environment.getExternalStorageDirectory().toString() + "/downloadedfile.jpg";
Spawning a Thread from a Button Click
// process /assets/church_bio.txt
public void onClick(View v) {
mProgressBar=new ProgressDialog(v.getContext());
mProgressBar.setCancelable(true);
mProgressBar.setMessage(PROGRESS_MESSAGE);
mProgressBar.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
mProgressBar.setProgress(0);
mProgressBar.setMax(100);
mProgressBar.show();
mProgressBarStatus=0;
mFileSize=0;
Thread thread = new Thread(){
public void run(){ updateProgressBar(); };
thread.start();
}
Downloading & Saving Image Files
// process /assets/church_bio.txtThe file is downloaded from a url and saved on sdcard inside update updateProgressBar().
Code details are here