mobappdev (fall 2014): customization of views & arrayadapters
DESCRIPTION
TRANSCRIPT
MobAppDev
Customization of
Views & ArrayAdapters
Vladimir Kulyukin
Outline
● Customized Views● Customized Array Adapters● Working with Resources
Customized Views
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
Customization of Views● We will develop an application that demonstrates how to customize views (in
particular, we will customize ListView)
● The first ListView displays the 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
● Source code is here
● Full link to source is below: ● https://github.com/VKEDCO/AndroidCustomization/blob/master/ListOfMathematicians.zip?raw=true
Application Screenshots
ListView 01 ListView 02 ListView 03
Controlling Display of Views
<?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 /res/values/params.xml; change it to 1, 2, or 3
Controlling Display of Views in 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;
}}
Screenshot of ListView 01
Construction of ListView 01
How 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
Code Snippets for
ListView 01
Specifying Names of Mathematicians in 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>
Construction of ListView 01
private 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));
}
Screenshot of ListView 02
Construction of ListView 02What Do We Need To Do To Construct ListView 02?
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
Code Snippetsfor
ListView 02
Mathematician.javapublic class Mathematician {
private String mFirstName;
private String mLastName;
private String mWikiURL;
public Mathematician(String fn, String ln, String wiki) {
mFirstName = fn; mLastName = ln; mWikiURL = wiki;
}
public String getFirstName() { return mFirstName; }
public String getLastName() { return mLastName; }
public String getWikiURL() { return mWikiURL; }
public String toString() { return mFirstName + " " + mLastName; }
}
ListView 02 Colors (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>
Dimensions of ListView 02 (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>
Custom Item Layout (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"
/>
ListView 02: Populating Custom ListView// 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));
}
Screenshot of ListView 03
Construction of 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
Code Snippetsfor
ListView 03
Custom Item Layout (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>
Construction of ListView 03// 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
Access to 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
private String processAssetsTextFile() {
AssetManager amngr = getAssets();
InputStream instrm =
amngr.open(“hilbert_bio.txt”);
processAssetsStream(instrm);
}