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