MobAppDev
Custom Views & Custom ArrayAdapters,
Working with Resources, Downloading
Images, Spawning Threads, Saving Files
...
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 custo...
Custom Views Lab: Famous Mathematicians App
●
We will develop an application that displays three
ListViews
●
The first Lis...
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>
</resource...
Displaying Different ListViews Main Activity
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanc...
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.,
f...
ListView 01 Code Fragments
/res/values/famous_mathematicians.xml
<resources>
<string-array name="list_of_famous_mathematicians">
<item>Alonzo Church<...
ListView 01: Steps 2 & 3
private static String[] mListOfMathematicians = null;
private static Resources mRes = null;
priva...
ListView 02
What Do We Need To Do To Construct
ListView 2?
ListView 02
What Do We Need To Do To Construct ListView 2?
1) Specify the mathematicians' names in XML
(famous_mathematici...
ListView 02
What Do We Need To Do To Construct ListView 2?
1) Specify the mathematicians' names in XML
(famous_mathematici...
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...
ListView 02: Step 3 (res/values/dimens.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="left_margin">5...
ListView 02: Step 3 (res/layout/mathematician_view_1.xml)
<?xml version="1.0" encoding="utf-8"?>
<org.vkedco.android.listo...
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 populateListVi...
ListView 03
What Do We Need To Do To Construct ListView 3?
ListView 03
What Do We Need To Do To Construct ListView 3?
1) Specify the mathematicians' names in XML
(famous_mathematici...
ListView 03 Code Fragments
ListView 02: Step 3 (res/layout/mathematician_view_2.xml)
<RelativeLayout>
<ImageView
android:id="@+id/image"
android:layo...
ListView 03: Steps 4 & 5
// this is a method in the main activity ListOfMathematiciansAct.java
private void populateListVi...
Working with Resources
Compiled and Non-compiled Resources
●
Most resources are compiled into binary files before
deployment
●
Two types of resou...
Common Resource Sub-directories
●
anim – compiled animation files
●
drawable - .bmp, .png, jpg, etc.
●
layout – view speci...
Resource Compilation
●
The resource compiler is part of the Android Packaging
Tool (AAPT)
●
The resource compiler compiles...
Colors /res/values/some_file.xml Color codes; exposed in R.java
as R.color.*
Dimensions /res/values/some_file.xml Sizes of...
Raw Assets
●
Project directory /assets/ contains raw files
●
Unlike /res/ directory, /assets/ may contain
arbitrarily many...
Color Resources
●
Android color constants are available in
android.R.color namespace
●
You can also specify your own color...
Color Resources
●
Color resource files are placed in /res/values/
●
Here is how to access color resources in Java and defi...
Raw Resources
●
Place audio, video, text that you need in your
application in /res/raw/
●
These files are not compiled but...
Raw Resources: Example
private String processRawTextFile() {
Resources res = getResources();
InputStream instrm =
res.open...
Assets
●
Directories /assets/ and /res/ are at the same level of the
project tree hierarchy
●
Files placed in /assets/ do ...
Assets Example
// process /assets/church_bio.txt
private String processAssetsTextFile() {
AssetManager amngr = getAssets()...
Downloading
&
Saving Images
Resources Lab: Network File Download
●
We will develop an application that downloads a file
from a given URL
●
Stores it o...
Sample Screenshots
Permissions in AndroidManifest.xml
// process /assets/church_bio.txt
<!-- Permission: Allow Internet Connectivity -->
<use...
GUI Components & Constants in Main Activity
// process /assets/church_bio.txt
Button mBtnStartProgress;
ImageView mImageVi...
Spawning a Thread from a Button Click
// process /assets/church_bio.txt
public void onClick(View v) {
mProgressBar=new Pro...
Downloading & Saving Image Files
// process /assets/church_bio.txt
The file is downloaded from a url and saved on sdcard i...
Upcoming SlideShare
Loading in …5
×

MobAppDev: Custom Views & Custom ArrayAdapters, Working with Resouces, Downloading Images, Saving Files on SDCard, Spawning Threads

359
-1

Published on

Custom Views & Custom ArrayAdapters, Working with Resouces, Downloading Images, Saving Files on SDCard, Spawning Threads

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
359
On Slideshare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MobAppDev: Custom Views & Custom ArrayAdapters, Working with Resouces, Downloading Images, Saving Files on SDCard, Spawning Threads

  1. 1. MobAppDev Custom Views & Custom ArrayAdapters, Working with Resources, Downloading Images, Spawning Threads, Saving Files on SDCARD, Vladimir Kulyukin www.vkedco.blogspot.com
  2. 2. Outline ● Custom Views ● Custom Array Adapters ● Working with Resources ● Downloading and Saving Image Files
  3. 3. Custom Views & Custom ArrayAdapters
  4. 4. 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
  5. 5. 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
  6. 6. Sample Screeshots ListView 01 ListView 02 ListView 03
  7. 7. /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
  8. 8. 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; } }
  9. 9. ListView 01 What Do We Need to Do to Construct this ListView?
  10. 10. 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
  11. 11. ListView 01 Code Fragments
  12. 12. /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>
  13. 13. ListView 01: Steps 2 & 3 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)); }
  14. 14. ListView 02 What Do We Need To Do To Construct ListView 2?
  15. 15. ListView 02 What 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
  16. 16. ListView 02 What 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
  17. 17. ListView 02 Code Fragments
  18. 18. ListView 02: Step 2 Define a Custom Data Type that Needs a Custom View (Mathematician.java )
  19. 19. 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>
  20. 20. 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>
  21. 21. 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
  22. 22. ListView 02: Step 3 Define a Custom View for the Custom Data Type (MathematicianView.java)
  23. 23. 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)); }
  24. 24. ListView 03 What Do We Need To Do To Construct ListView 3?
  25. 25. ListView 03 What 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
  26. 26. ListView 03 Code Fragments
  27. 27. 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
  28. 28. 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); }
  29. 29. Working with Resources
  30. 30. 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/
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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/
  35. 35. 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>
  36. 36. 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” />
  37. 37. 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
  38. 38. Raw Resources: Example private String processRawTextFile() { Resources res = getResources(); InputStream instrm = res.openRawResource(R.raw.david_hilbert_bio); processRawStream(instrm); }
  39. 39. 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
  40. 40. Assets Example // process /assets/church_bio.txt private String processAssetsTextFile() { AssetManager amngr = getAssets(); InputStream instrm = amngr.open(“hilbert_bio.txt”); processAssetsStream(instrm); }
  41. 41. Downloading & Saving Images
  42. 42. 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
  43. 43. Sample Screenshots
  44. 44. 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" />
  45. 45. 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";
  46. 46. 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(); }
  47. 47. Downloading & Saving Image Files // process /assets/church_bio.txt The file is downloaded from a url and saved on sdcard inside update updateProgressBar(). Code details are here

×