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);

}