Lesson 5. List-Based Selectors. List-Based Selector: Lists, Grids, and Scroll Views... 3

Transcription

1 Lesson 5. List-Based Selectors List-Based Selector: Lists, Grids, and Scroll Views... 3

2

3 List-Based Selector: Lesson 5 Lists, Grids, and Scroll Views Goals Discrete and List-Based Selectors

4 ListViews and ArrayAdapters TextView TextView ArrayList tostring() getview( ) Example 5.1 A simple ListView based app (Version 1)

5 <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:background="#ffffff00" android:text="using ListViews..." android:textsize="16sp" /> <ListView android:layout_height="match_parent" > </ListView> <TextView android:background="#ffff0000" android:text="empty list" /> Using predefined See Appendix A for a description of these elements </LinearLayout> package matos.csu.listapp; import android.app.listactivity; import android.graphics.color; import android.os.bundle; import android.view.view; import android.widget.arrayadapter; import android.widget.listview; import android.widget.textview; public class MainActivity extends ListActivity { TextView txtmsg; String[] items = {"Data-0", "Data-1", "Data-2", "Data-3", "Data-4", "Data-5", "Data-6", "Data-7"; // next time try an empty list such as:

6 // String[] items = {; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); setlistadapter(new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, items)); getlistview().setbackgroundcolor(color.white); txtmsg = (TextView) findviewbyid(r.id.txtmsg); protected void onlistitemclick(listview l, View v, int position, long id) { super.onlistitemclick(l, v, position, id); String text = " Position: " + position + " " + items[position]; ListActivity Activity oncreate SetListAdapter ArrayAdapter<String>.

7 'this' android.r.layout.simple_list_item_1 'items' items tostring() <String> android.r.layout.simple_list_item_1 items getlistview().setbackgroundcolor(color.white) onlistitemclick onlistitemclick Note oncreate Code > Override Methods > onlistitemclick Example 5.2 A simple ListView based app (Version 2) ListActivity Adapter ListView Activity <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/txtmsg"

8 android:text="using ListViews..." /> <ListView android:layout_height="match_parent" </ListView> </LinearLayout> MainActivity ListActivity mylistview mylistview setonitemclicklistener mylistview.setadapter(myarrayadapter) public class MainActivity extends Activity { String[] items = { "Data-0", "Data-1", "Data-2", "Data-3", "Data-4", "Data-5", "Data-6", "Data-7" ; ListView mylistview; TextView txtmsg; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); txtmsg = (TextView) findviewbyid(r.id.txtmsg); mylistview = (ListView) findviewbyid(r.id.my_list); ArrayAdapter<String> myarrayadapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, items); mylistview.setadapter(myarrayadapter); mylistview.setonitemclicklistener(new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> av, View v, int position, long id) { String text = "Position: " + position + "\ndata: " + items[position]; txtmsg.settext(text); ); //oncreate

9 Example 5.3 Customizing the ListView control res/layout/my_custom_row.xml <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="vertical" android:padding="6dp" > <TextView android:background="#220000ff" android:padding="1dp" android:textcolor="#ffff0000" android:textsize="35sp" /> </LinearLayout> (a) User-defined row layout (my_custom_row.xml) (b) A custom ListView oncreate ArrayAdapter ArrayAdapter ArrayAdapter<String> myarrayadapter = new ArrayAdapter<String>( getapplicationcontext(), R.layout.my_custom_row, R.id.my_custom_textview, items ); ArrayAdapter<String> TextView Expandable Lists: The Spinner Control

10 setadapter(). setonitemselectedlistener() Example 5.4 An app showing a Spinner selector control Spinner TextView <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:background="@android:color/white" android:orientation="vertical"> Tap to drop list down <TextView android:id="@+id/txtmsg" android:background="@color/coloraccent" android:textsize="25sp" android:layout_margin="1dp" android:text="using Spinner..." /> <Spinner android:id="@+id/spinner1" /> </LinearLayout> public class MainActivity extends Activity implements AdapterView.OnItemSelectedListener{ // GUI objects TextView txtmsg; Spinner spinner;

11 // options to be offered by the spinner String[] items = { "Data-0", "Data-1", "Data-2", "Data-3", "Data-4", "Data-5", "Data-6", "Data-7" ; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // plumbing: connecting Java to GUI objects txtmsg = (TextView) findviewbyid(r.id.txtmsg); spinner = (Spinner) findviewbyid(r.id.spinner1); // use following adapter to move data from items array to the ListView ArrayAdapter<String> adapter = new ArrayAdapter<String>( this, android.r.layout.simple_spinner_dropdown_item, items); // bind everything together spinner.setadapter(adapter); // add a listener so user can make selections by tapping an item on the list spinner.setonitemselectedlistener(this); // next two methods implement the spinner's listener public void onitemselected(adapterview<?> parent, View v, int position, long id) { // echo on the textbox the user's selection txtmsg.settext(items[position]); public void onnothingselected(adapterview<?> arg0) { // TODO do nothing needed by the interface MainActivity AdapterView.OnItemSelectedListener. Spinner onitemselected onnothingselected onitemselected() onitemselected parent TextView View v int position long id

12 GridViews GridView android:numcolumns auto_fit" android:verticalspacing android:horizontalspacing android:columnwidth android:stretchmode android:columnwidth 100dp android:horizontalspacing 5dp android:stretchmode columnwidth android:stretchmode spacingwidth

13 Example 5.5 App showing a text GridView GridView 'auto-fit TextView <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:orientation="vertical" android:padding="6dp" tools:context=".mainactivity" > <TextView android:id="@+id/txtmsg" android:background="@color/coloraccent" android:textsize="24sp" android:layout_marginbottom="3dp" android:textcolor="@android:color/white" android:padding="2dip" /> <GridView android:id="@+id/gridchoice" android:background="@color/colorprimary50" android:verticalspacing="5dip" android:horizontalspacing="5dip" android:numcolumns="auto_fit" android:columnwidth="100dip" android:stretchmode="spacingwidth" /> </LinearLayout> public class MainActivity extends Activity { //GUI objects TextView txtmsg; GridView grid; //Data source String[] items = { "Data-0", "Data-1", "Data-2", "Data-3", "Data-4", "Data-5", "Data-6", "Data-7" ; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); //plumbing: connecting Java and GUI objects

14 txtmsg = (TextView) findviewbyid(r.id.txtmsg); grid = (GridView) findviewbyid(r.id.gridchoice); //array adapter will send rows from items array to cell in the grid ArrayAdapter<String> adapter = new ArrayAdapter<String>( this, android.r.layout.simple_list_item_1, items ); //bind grid and adapter grid.setadapter(adapter); //setup a click event listener grid.setonitemclicklistener(new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> container, View v, int position, long id) { txtmsg.settext(items[position]); ); //oncreate // class GridView MainActivity android.r.layout.simple_list_item_1 GridViews AutoComplete TextView AutoComplete android:completionthreshold

15 Example 5.6 App showing an AutoComplete box AutoText <RelativeLayout xmlns:android=" xmlns:tools=" android:padding="6dp" android:layout_height="match_parent" > <TextView android:textsize="20sp" /> <AutoCompleteTextView android:hint="type here..." android:completionthreshold="3" android:layout_width="wrap_content" android:layout_margintop="15dp" android:ems="10" /> </RelativeLayout> public class MainActivity extends Activity implements TextWatcher { // GUI objects TextView txtmsg; AutoCompleteTextView txtautocomplete; //Data source String[] items = { "words", "starting", "with", "set", "Setback", "Setline", "Setoffs", "Setouts", "Setters", "Setting", "Settled", "Settler", "Wordless", "Wordiness", "Adios" ; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main);

16 //plumbing: connecting Java and GUI objects txtmsg = (TextView) findviewbyid(r.id.txtmsg); txtautocomplete = (AutoCompleteTextView) findviewbyid( R.id.autoCompleteTextView1); //define anonymous array adapter to provide 'suggested' words txtautocomplete.setadapter(new ArrayAdapter<String>( this, android.r.layout.simple_list_item_single_choice, items)); //setup: add TextChaned listener to Autocomplete box txtautocomplete.addtextchangedlistener(this); //oncreate //process final selection made by the user public void ontextchanged(charsequence s, int start, int before, int count) { txtmsg.settext(txtautocomplete.gettext()); public void beforetextchanged(charsequence s, int start, int count,int after) { // needed for interface, but not used public void aftertextchanged(editable s) { // needed for interface, but not used //class MainActivity AutoText AutoText TextWatcher oncreate ontextchanged s count start before sen t s="sent", start=3 s before 0. count=1 s beforetextchanged aftertextchanged TextWatcher HorizontalScrollView

17 Example 5.7 App showing a HorizontalScrollView HorizontalScrollView HorizontalScrollView HorizontalScrollView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:background="@android:color/white" android:orientation="vertical" android:padding="6dp" > <TextView android:id="@+id/txtmsg" android:background="@color/colorprimary" android:text="scroll and click to select..." android:textcolor="@android:color/white" android:layout_marginbottom="2dp" android:textappearance="?android:attr/textappearancelarge" /> <HorizontalScrollView android:layout_marginbottom="2dp" android:background="@color/coloraccent" > <LinearLayout android:id="@+id/viewgroup" android:layout_width="wrap_content" android:orientation="horizontal" android:padding="10dip" > </LinearLayout> </HorizontalScrollView> <ImageView android:id="@+id/imageselected" android:layout_weight="2" /> /LinearLayout>

18 LinearLayout HorizontalScrollView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:padding="2dp"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:paddingleft="2dp" android:paddingright="2dp" android:paddingtop="2dp" inflater HorizontalScrollerView <TextView android:layout_width="100dp" android:layout_gravity="center" android:background="#03a9f4" android:gravity="center" android:text="caption" android:textsize="20sp"/> <!-- Blue500 --> onclick </LinearLayout> res/drawable frame_icon_caption

19 res/drawable public class MainActivity extends Activity { //GUI controls TextView txtmsg; ViewGroup scrollviewgroup; //large image frame for displaying high-quality selected image ImageView imageselected; //each frame in the ScrollView has [icon, caption] ImageView icon; TextView caption; //frame captions ❶ String[] items = {"Photo-00", "Photo-01", "Photo-02", "Photo-03", "Photo-04", "Photo-05", "Photo-06", "Photo-07", "Photo-08", "Photo-09", "Photo-10", "Photo-11", "Photo-12", "Photo-13", "Photo-14", "Photo-15", "Photo-16", "Photo-17", "Photo-18", "Photo-19", "Photo-20", "Photo-21", "Photo-22", "Photo-23", "Photo-24", "Photo-25", "Photo-26", ; //frame-icons ( 100X100 thumbnails ) Integer[] thumbnails = { R.drawable.small_pic00, R.drawable.small_pic01, R.drawable.small_pic02,R.drawable.small_pic03, R.drawable.small_pic04, R.drawable.small_pic05,R.drawable.small_pic06, R.drawable.small_pic07, R.drawable.small_pic08,R.drawable.small_pic09, R.drawable.small_pic10, R.drawable.small_pic11,R.drawable.small_pic12, R.drawable.small_pic13, R.drawable.small_pic14,R.drawable.small_pic15, R.drawable.small_pic16, R.drawable.small_pic17,R.drawable.small_pic18, R.drawable.small_pic19, R.drawable.small_pic20,R.drawable.small_pic21, R.drawable.small_pic22, R.drawable.small_pic23,R.drawable.small_pic24, R.drawable.small_pic25, R.drawable.small_pic26 ; ❷ //hi-resolution images Integer[] largeimages = { R.drawable.large_pic00, R.drawable.large_pic01, R.drawable.large_pic02,R.drawable.large_pic03, R.drawable.large_pic04, R.drawable.large_pic05,R.drawable.large_pic06, R.drawable.large_pic07, R.drawable.large_pic08,R.drawable.large_pic09, R.drawable.large_pic10, R.drawable.large_pic11,R.drawable.large_pic12, R.drawable.large_pic13, R.drawable.large_pic14,R.drawable.large_pic15, R.drawable.large_pic16, R.drawable.large_pic17,R.drawable.large_pic18, R.drawable.large_pic19, R.drawable.large_pic20,R.drawable.large_pic21, R.drawable.large_pic22, R.drawable.large_pic23 ❸

20 ,R.drawable.large_pic24, R.drawable.large_pic25, R.drawable.large_pic26 ; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); //bind GUI controls to Java classes txtmsg = (TextView) findviewbyid(r.id.txtmsg); imageselected = (ImageView) findviewbyid(r.id.imageselected); // this layout goes inside the HorizontalScrollView scrollviewgroup = (ViewGroup) findviewbyid(r.id.viewgroup); for (int i = 0; i < items.length; i++) { //create single frames [icon & caption] using XML inflater final View singleframe = getlayoutinflater().inflate( R.layout.frame_icon_caption, null ); //frame-0, frame-1, frame-2,... and so on singleframe.setid(i); ❹ TextView caption = (TextView) singleframe.findviewbyid(r.id.caption); ImageView icon = (ImageView) singleframe.findviewbyid(r.id.icon); //put data [icon, caption] in each single frame icon.setimageresource( thumbnails[i] ); caption.settext( items[i] ); //add frame to the scrollview scrollviewgroup.addview( singleframe ); //each single frame gets its own click listener singleframe.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { String text = "Selected position: " + singleframe.getid(); txtmsg.settext(text); showlargeimage(singleframe.getid()); );// listener // for //oncreate // display a high-quality version of the image selected using thumbnails ❺ protected void showlargeimage(int frameid) { Drawable selectedlargeimage = getresources().getdrawable( largeimages[frameid]); imageselected.setbackground(selectedlargeimage);

21 items' res/drawable xxxhdpi hi-res getlayoutinflater().inflate() frame_icon_caption.xml singleframe.setid(i) onclick getresources().getdrawable( largeimages[frameid]) res/drawable

22 Using GridViews to show images Example 5.8 App showing an image-based GridView GridView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="vertical" android:padding="6dp" > <TextView android:padding="3dp" android:text="scrool screen, tap to choose" android:textcolor="#ffffffff" android:textsize="20sp" /> <GridView android:layout_height="match_parent" android:layout_margin="1dp" android:columnwidth="100dp" android:gravity="center" android:horizontalspacing="5dp" android:numcolumns="auto_fit" android:stretchmode="columnwidth" android:verticalspacing="10dp" /> </LinearLayout>

23 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:padding="3dp" android:orientation="vertical" > <TextView android:textsize="25sp" /> <ImageView android:layout_height="0dip" android:layout_gravity="center fill" android:layout_weight="2" /> <Button android:layout_width="100dip" android:layout_gravity="center_horizontal" android:text="back" /> </LinearLayout>

24 public class MainActivity extends Activity { //GUI control bound to screen1 (holding GidView) GridView gridview; //GUI controls bound to screen2 (holding a single ImageView) TextView txtsolomsg; ImageView imgsolophoto; Button btnsoloback; //in case you want to use-save state values Bundle myoriginalmemorybundle; //frame captions ❶ String[] items = {"Photo-00", "Photo-01", "Photo-02", "Photo-03", "Photo-04", "Photo-05", "Photo-06", "Photo-07", "Photo-08", "Photo-09", "Photo-10", "Photo-11", "Photo-12", "Photo-13", "Photo-14", "Photo-15", "Photo-16", "Photo-17", "Photo-18", "Photo-19", "Photo-20", "Photo-21", "Photo-22", "Photo-23", "Photo-24", "Photo-25", "Photo-26", ; //frame-icons ( 100X100 thumbnails ) Integer[] thumbnails = { R.drawable.small_pic00, R.drawable.small_pic01, R.drawable.small_pic02,R.drawable.small_pic03, R.drawable.small_pic04, R.drawable.small_pic05,R.drawable.small_pic06, R.drawable.small_pic07, R.drawable.small_pic08,R.drawable.small_pic09, R.drawable.small_pic10, R.drawable.small_pic11,R.drawable.small_pic12, R.drawable.small_pic13, R.drawable.small_pic14,R.drawable.small_pic15, R.drawable.small_pic16, R.drawable.small_pic17,R.drawable.small_pic18, R.drawable.small_pic19, R.drawable.small_pic20,R.drawable.small_pic21, R.drawable.small_pic22, R.drawable.small_pic23,R.drawable.small_pic24, R.drawable.small_pic25, R.drawable.small_pic26 ; ❷ //hi-resolution images Integer[] largeimages = { R.drawable.large_pic00, R.drawable.large_pic01, R.drawable.large_pic02,R.drawable.large_pic03, R.drawable.large_pic04, R.drawable.large_pic05,R.drawable.large_pic06, R.drawable.large_pic07, R.drawable.large_pic08,R.drawable.large_pic09, R.drawable.large_pic10, R.drawable.large_pic11,R.drawable.large_pic12, R.drawable.large_pic13, R.drawable.large_pic14,R.drawable.large_pic15, R.drawable.large_pic16, R.drawable.large_pic17,R.drawable.large_pic18, R.drawable.large_pic19, R.drawable.large_pic20,R.drawable.large_pic21, R.drawable.large_pic22, R.drawable.large_pic23,R.drawable.large_pic24, R.drawable.large_pic25, R.drawable.large_pic26 ; //additional photo captions String[] photodescription = { "Turtle", "Blossom", "Building", "Cat", "Church", "Coffee", "Coffee","Dubrovnik", "Egg", "Firefighters", "Flower", "Football","Isolated", "Jetty", "Jetty", "Paraglider", "Pelican","Pelican", "Pier", "Purpursonnen Hut", "Roofs", "South Africa","Stone Arch", "Sunset", "Tangerine", "Travel", "Tree" ; ❸

25 protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); myoriginalmemorybundle = savedinstancestate; // setup GridView with its custom adapter and listener gridview = (GridView) findviewbyid(r.id.gridview); gridview.setadapter(new MyImageAdapter(this, thumbnails)); gridview.setonitemclicklistener(new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { ❹ showbigscreen(position); ); //oncreate // display a high-quality version of the image selected using thumbnails ❺ private void showbigscreen(int position) { // show the selected picture as a single frame in the second layout setcontentview(r.layout.solo_picture); // plumbing second layout txtsolomsg = (TextView) findviewbyid(r.id.txtsolomsg); imgsolophoto = (ImageView) findviewbyid(r.id.imgsolophoto); // set caption-and-large picture txtsolomsg.settext(" Position= " + position + " " + items[position]); imgsolophoto.setimageresource( largeimages[position] ); // set GO BACK button to return to layout1 (GridView) btnsoloback = (Button) findviewbyid(r.id.btnsoloback); btnsoloback.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { // redraw the main screen showing the GridView oncreate(myoriginalmemorybundle); ); // showbigscreen //Activity res/drawable

26 res/drawable GridView GridView ArrayAdapter<String> GridView MyImageAdapter onclick ShowBigScreen() position solo_picture.xml ShowBigScreen Back // This custom adapter populates the GridView with a visual // representation of each thumbnail in the input data set. // It implements the method getview() to access // individual cells in the GridView. public class MyImageAdapter extends BaseAdapter { private Context context; // main activity s context Integer[] smallimages; // thumbnail data set public MyImageAdapter(Context mainactivitycontext, Integer[] thumbnails) { context = mainactivitycontext; smallimages = thumbnails; // how many entries are there in the data set? public int getcount() { return smallimages.length; // what is in a given 'position' in the data set? public Object getitem(int position) { return smallimages[position]; // what is the ID of data item in given 'position? public long getitemid(int position) { return position; // create a view for each thumbnail in the data set public View getview(int position, View convertview, ViewGroup parent) {

27 ImageView imageview; // if possible, reuse (convertview) image already held in cache if (convertview == null) { // new image in GridView formatted to: 100x75 pixels (its actual size) // center-cropped, and 5dp padding all around imageview = new ImageView(context); imageview.setlayoutparams( new GridView.LayoutParams(100, 75) ); //height, width imageview.setscaletype(imageview.scaletype.center_crop); imageview.setpadding(5, 5, 5, 5); //left, top, right, bottom else { imageview = (ImageView) convertview; imageview.setimageresource(smallimages[position]); return imageview; //MyImageAdapter GridView context smallimages getview() 'convertview' getview Customizing a ListView android.r.layout.simple_list_item_2 android.r.layout.simple_list_item_1, DataAdapter ArrayAdapter getview()

28 Example 5.9 App showing a custom list design ListActivity <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:padding="6dp" android:background="@android:color/white" android:orientation="vertical" > <TextView android:id="@+id/txtmsg" android:background="@color/colorprimary" android:text="your selection is..." android:textcolor="@android:color/white" android:textsize="24sp" android:textstyle="bold" /> <ListView android:id="@android:id/list" android:layout_height="match_parent" > </ListView> </LinearLayout> ListView ListActivity <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:background="@drawable/custom_row_touched" android:padding="6dp" android:orientation="horizontal"> <ImageView android:id="@+id/icon"

29 android:layout_width="100dp" android:layout_height="75dp" android:layout_marginright="3dp" <LinearLayout android:layout_height="75dp" android:orientation="vertical" android:padding="5dp"> <TextView android:text="label1" android:textsize="25sp" android:textstyle="bold"/> <TextView android:layout_margintop="10dp" android:text="label2" android:textsize="15sp"/> </LinearLayout> LinearLayout background item <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" <item android:state_pressed="true"> <shape android:shape="rectangle"> <solid

30 <stroke android:width="1dp" </shape> </item> </selector> res/values/colors res/values/colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorprimary">#3f51b5</color> <color name="colorprimarydark">#303f9f</color> <color name="coloraccent">#ff4081</color> <color name="blue_100">#bbdefb</color> <color name="blue_200">#64f5b6</color> </resources> public class MainActivity extends ListActivity { TextView txtmsg; // The n-th row (frame) in the list includes an icon, a label, and a description // where icon = thumbnail[n], label=items[n], and photodescription[n] //frame captions String[] items = {"Photo-00", "Photo-01", "Photo-02", "Photo-03", "Photo-04", "Photo-05", "Photo-06", "Photo-07", "Photo-08", "Photo-09", "Photo-10", "Photo-11", "Photo-12", "Photo-13", "Photo-14", "Photo-15", "Photo-16", "Photo-17", "Photo-18", "Photo-19", "Photo-20", "Photo-21", "Photo-22", "Photo-23", "Photo-24", "Photo-25", "Photo-26", ; //frame-icons ( 100X100 thumbnails ) Integer[] thumbnails = { R.drawable.small_pic00, R.drawable.small_pic01, R.drawable.small_pic02,R.drawable.small_pic03, R.drawable.small_pic04, R.drawable.small_pic05,R.drawable.small_pic06, R.drawable.small_pic07, R.drawable.small_pic08,R.drawable.small_pic09, R.drawable.small_pic10, R.drawable.small_pic11,R.drawable.small_pic12, R.drawable.small_pic13, R.drawable.small_pic14,R.drawable.small_pic15, R.drawable.small_pic16, R.drawable.small_pic17,R.drawable.small_pic18, R.drawable.small_pic19, R.drawable.small_pic20,R.drawable.small_pic21, R.drawable.small_pic22, R.drawable.small_pic23

31 ,R.drawable.small_pic24, R.drawable.small_pic25, R.drawable.small_pic26 ; //additional photo description String[] photodescription = { "Turtle", "Blossom", "Building", "Cat", "Church", "Coffee", "Coffee","Dubrovnik", "Egg", "Firefighters", "Flower", "Football","Isolated", "Jetty", "Jetty", "Paraglider", "Pelican","Pelican", "Pier", "Purpursonnen Hut", "Roofs", "South Africa","Stone Arch", "Sunset", "Tangerine", "Travel", "Tree" ; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); txtmsg = (TextView) findviewbyid(r.id.txtmsg); // the arguments of the custom adapter are: // activity-context, layout-to-be-inflated, top labels, icons, descriptions CustomIconLabelAdapter adapter = new CustomIconLabelAdapter( this, R.layout.custom_row_icon_label, items, thumbnails, photodescription); // bind intrinsic ListView to custom adapter setlistadapter(adapter); //oncreate // react to user's selection of a row protected void onlistitemclick(listview l, View v, int position, long id) { super.onlistitemclick(l, v, position, id); String text = " Position: " + position + " " + items[position]; txtmsg.settext(text); //listener ❶ //class class CustomIconLabelAdapter extends ArrayAdapter<String> { //keep references to data sources defined in the MainActivity class private Context context; private Integer[] thumbnails; private String[] items; private String[] photodescription; public CustomIconLabelAdapter( Context context, int layouttobeinflated,

32 String[] items, Integer[] thumbnails, String[] photodescription) { super(context, R.layout.custom_row_icon_label, items); this.context = context; this.thumbnails = thumbnails; this.items = items; this.photodescription = photodescription; public View getview(int position, View convertview, ViewGroup parent) { //get an inflater and get ready to prepare a template LayoutInflater inflater = ((Activity) context).getlayoutinflater(); ❷ //inflate row template having: icon + vertical-linearlayout holding label1 and label2 View row = inflater.inflate(r.layout.custom_row_icon_label, null); //plumbing: create and connect java objects to handle GUI elements LinearLayout captionholder = (LinearLayout) row.findviewbyid(r.id.captionholder); ImageView icon = (ImageView) row.findviewbyid(r.id.icon); TextView label1 = (TextView) row.findviewbyid(r.id.label1); TextView label2 = (TextView) row.findviewbyid(r.id.label2); //move data to GUI objects using java proxis icon.setimageresource(thumbnails[position]); label1.settext(items[position]); label2.settext(photodescription[position]); //alternate row backcolor: once set it to white, next to light blue100 if (position % 2 == 0) captionholder.setbackgroundcolor(contextcompat.getcolor(context, R.color.blue_100)); else captionholder.setbackgroundcolor(color.white); //done! return 'pretty' row return (row); // getview // IconicAdapter CustomIconLabelAdapter ArrayAdapter DataAdapter ListView ArrayAdapter getview() ArrayAdpater getview() ArrayAdapter

33 row.findviewbyid() position ViewHolder Storing Large Resources in the SD card res/drawable Tools>Android>Android Device Monitor Example 5.10 App reading images from the SD card (External Storage) Android Device Monitor /Pictures/thumbnail /Pictures/large Tools > Android > 1- Accessing SD files names.txt /Pictures // VERSION1. Environment class allows access to your adopted MEDIA storage strpath2sdcard = Environment.getExternalStorageDirectory().getAbsolutePath(); File namefile = new File(strPath2SDCard + "/Pictures/names.txt"); // VERSION2. Reaching specific entries in the standard Android file organization

34 String strpath2pictures = Environment.getExternalStoragePublicDirectory( Environment.DIRECTORY_PICTURES ).getabsolutepath(); File namefile = new File(strPath2Pictures, "names.txt" ); Picture Environment.DIRECTORY_PICTURES DIRECTORY_ALARMS, DIRECTORY_DCIM, DIRECTORY_DOCUMENTS, DIRECTORY_DOWNLOADS, DIRECTORY_MOVIES, DIRECTORY_MUSIC, DIRECTORY_PODCASTS, DIRECTORY_NOTIFICATIONS, DIRECTORY_RINGTONES. Scanner Pictures/thumbnail 2- Obtaining Permissions at Execution Time

35 Table API23 + Normal App Permissions (No need for run-time approval) ACCESS_LOCATION_EXTRA_COMMANDS ACCESS_NETWORK_STATE ACCESS_NOTIFICATION_POLICY ACCESS_WIFI_STATE BLUETOOTH BLUETOOTH_ADMIN BROADCAST_STICKY CHANGE_NETWORK_STATE CHANGE_WIFI_MULTICAST_STATE CHANGE_WIFI_STATE DISABLE_KEYGUARD EXPAND_STATUS_BAR GET_PACKAGE_SIZE INSTALL_SHORTCUT INTERNET KILL_BACKGROUND_PROCESSES MODIFY_AUDIO_SETTINGS NFC READ_SYNC_SETTINGS READ_SYNC_STATS RECEIVE_BOOT_COMPLETED REORDER_TASKS REQUEST_IGNORE_BATTERY_OPTIMIZATIONS REQUEST_INSTALL_PACKAGES SET_ALARM SET_TIME_ZONE SET_WALLPAPER SET_WALLPAPER_HINTS TRANSMIT_IR UNINSTALL_SHORTCUT USE_FINGERPRINT VIBRATE WAKE_LOCK WRITE_SYNC_SETTINGS Table Dangerous App Permissions Permission Group CALENDAR CAMERA CONTACTS LOCATION MICROPHONE PHONE SENSORS SMS STORAGE Permissions READ_CALENDAR, WRITE_CALENDAR CAMERA READ_CONTACTS, WRITE_CONTACTS, GET_ACCOUNTS ACCESS_FINE_LOCATION, ACCESS_COARSE_LOCATION RECORD_AUDIO READ_PHONE_STATE, CALL_PHONE, READ_CALL_LOG, WRITE_CALL_LOG, ADD_VOIC , USE_SIP, PROCESS_OUTGOING_CALLS BODY_SENSORS SEND_SMS, RECEIVE_SMS, READ_SMS, RECEIVE_WAP_PUSH, RECEIVE_MMS READ_EXTERNAL_STORAGE, WRITE_EXTERNAL_STORAGE

36 READ_EXTERNAL_STORAGE READ_EXTERNAL_STORAGE WRITE_EXTERNAL_STORAGE public class MainActivity extends Activity { //control value to signal user's granting of READ_EXTERNAL request final int MY_PERMISSIONS_REQUEST_READ_EXTERNAL = 111; //GUI controls TextView txtmsg; ViewGroup scrollviewgroup; //each frame in the HorizontalScrollView has [icon, caption] ImageView icon; TextView caption; //large image frame for displaying high-quality selected image ImageView imageselected; String[] items; int index; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); applymarshmallowpermissionmodel(); ❶ //plumbing: bind GUI controls to Java classes txtmsg = (TextView) findviewbyid(r.id.txtmsg); imageselected = (ImageView) findviewbyid(r.id.imageselected); // this layout goes inside the HorizontalScrollView scrollviewgroup = (ViewGroup) findviewbyid(r.id.viewgroup); String strpath2sdcard = "n.a.";

37 try { // VERSION1. Environment class allows access to your MEDIA files ❷ strpath2sdcard = Environment.getExternalStorageDirectory().getAbsolutePath(); //photo captions are held in a (single-line) comma-separated text file File namefile = new File(strPath2SDCard + "/Pictures/names.txt"); // VERSION2. Reaching standard Android file organization entry-points String strpath2pictures = Environment.getExternalStoragePublicDirectory( Environment.DIRECTORY_PICTURES).getAbsolutePath(); namefile = new File(strPath2Pictures, "names.txt"); Scanner scanner = new Scanner(nameFile); String line = ""; while (scanner.hasnext()) { line += scanner.nextline(); items = line.split(","); //get access to the small thumbnails - populate the horizontal-scroller String paththumbnailsfolder = new File(strPath2Pictures, "/thumbnail").getabsolutepath(); File sdpicturefiles = new File(pathThumbnailsFolder); File[] thumbnailarray = sdpicturefiles.listfiles(); txtmsg.append("\nnum files: " + thumbnailarray.length); File singlethumbnailfile; for (index = 0; index < thumbnailarray.length; index++) { ❸ singlethumbnailfile = thumbnailarray[index]; final View frame = getlayoutinflater().inflate(r.layout.frame_icon_caption, null); TextView caption = (TextView) frame.findviewbyid(r.id.caption); ImageView icon = (ImageView) frame.findviewbyid(r.id.icon); // convert (jpg, png,...) file into a drawable icon.setimagedrawable(drawable.createfrompath(singlethumbnailfile.getabsolutepath())); caption.settext(items[index]); scrollviewgroup.addview(frame); frame.setid(index); frame.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { String text = "Selected position: " + frame.getid(); txtmsg.settext(text); showlargeimage(frame.getid()); ); // listener // for catch (Exception e) { txtmsg.append("\nerror: \npath=" + strpath2sdcard + "\n" + e.getmessage());

38 //oncreate //display a high-quality version of the selected thumbnail image protected void showlargeimage(int frameid) { String pathlargepicturefolder = Environment.getExternalStorageDirectory().getAbsolutePath() + "/Pictures/large/"; // convert SD image file(jpg, png,...) into a drawable, then show into ImageView File sdlargepicturefolder = new File(pathLargePictureFolder); File[] largepicturearray = sdlargepicturefolder.listfiles(); File largeimagefile = largepicturearray[frameid]; imageselected.setimagedrawable(drawable.createfrompath( largeimagefile.getabsolutepath())); imageselected.setadjustviewbounds(true); imageselected.setscaletype(imageview.scaletype.fit_xy); //ShowLargeImage ❹ // This method enforces the new permission policy introduced in API23 ❺ private void applymarshmallowpermissionmodel() { //if we already have permission to use the external SD card then do nothing! if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) return; // CAUTION: We DO NOT have the necessary permissions // Should an explanation be given to the user regarding usage of external SD card? if (ActivityCompat.shouldShowRequestPermissionRationale(MainActivity.this, Manifest.permission.READ_EXTERNAL_STORAGE)) { // Show an ASYNCHRONOUS explanation to the user, this thread will continue // cancel app if user doesn't allow reading from SD card Toast.makeText(this, "Explanation...", Toast.LENGTH_LONG).show(); //must improve! // request the permission to use SD card. ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE, MY_PERMISSIONS_REQUEST_READ_EXTERNAL); //applynewpermissionmodel public void onrequestpermissionsresult(int requestcode, String permissions[], int[] grantresults) { switch (requestcode) { case MY_PERMISSIONS_REQUEST_READ_EXTERNAL: { // If request is cancelled, the result arrays are empty. if (grantresults.length > 0 && grantresults[0] == PackageManager.PERMISSION_GRANTED) { // permission was granted - call oncreate again to setup any pending widgets oncreate(null); else { // permission denied return; ❻

39 //onrequestpermissionresult //Activity Environment getexternalstoragedirectory() storage/ emulated/0 Alarms, DCIM, Downloads Pictures icon.setimagedrawable(drawable.createfrompath()) drawable res/drawable/.setimagedrawable(drawable.createfrompath(largeimagefile.getabsolutepath())) applymarshmallowpermissionmodel if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) return; // request the permission to use SD card. ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE, MY_PERMISSIONS_REQUEST_READ_EXTERNAL);

40 onrequestpermissionresult oncreate READ-EXTERNAL <?xml version="1.0" encoding="utf-8"?> <manifest package="matos.csu.a05_07_horizontalscroll" xmlns:android=" <uses-permission android:name="android.permission.read_external_storage" /> <application android:allowbackup="true" android:supportsrtl="true" <activity android:name=".mainactivity"> <intent-filter> <action android:name="android.intent.action.main"/> <category android:name="android.intent.category.launcher"/> </intent-filter> </activity> </application> </manifest> The ViewHolder Pattern getview() onvertview getview() View public View getview(int position, View convertview, ViewGroup parent) { convertview ListView scrapview scrapview

41 Row goes back to the screen Scroll Scrapviews (Rows previously inflated and shown, but currently out-of-focus) Row goes out of the screen Extending the BaseAdapter class BaseAdapter Views BaseAdapter SimpleCursorAdapter BaseAdapter ArrayAdapter CursorAdapter BaseAdapter getitem()

42 Table Mandatory BaseAdapter Abstract Methods int getcount() Object getitem(int position) long getitemid(int position) View getview(int position, View convertview, ViewGroup parent) Example 5.11 Extending BasedAdapter - Handling multiple row taps list_row_gui Database MainActivity CustomBaseAdapter activity_main

43 <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:padding="16dp" android:orientation="vertical"> <ListView > </ListView> </LinearLayout> MainActivity ListView <LinearLayout xmlns:android=" xmlns:tools="

44 android:orientation="horizontal" android:padding="16dp" > <ImageView android:layout_width="50dp" android:layout_height="50dp" android:contentdescription="image_left" /> <LinearLayout android:layout_width="0dp" android:layout_marginleft="20dp" android:layout_weight="2" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:text="this is line 1" android:textappearance="?android:attr/textappearancelarge" /> <TextView android:layout_width="wrap_content" android:text="this is line 2" android:textappearance="?android:attr/textappearancesmall" /> </LinearLayout> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:contentdescription="image_right" /> </LinearLayout> public class MainActivity extends AppCompatActivity { Database database_records; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ListView listview = (ListView) findviewbyid(r.id.listview1); //create an instance of our fake database: {[text1, text2, icon] List database = new Database().dbList;

45 //create instance of our extended BaseAdapter CustomBaseAdapter adapter = new CustomBaseAdapter(this, database, R.layout.list_row_gui ); listview.setadapter(adapter); //oncreate MainActivty ListView public class CustomBaseAdapter extends BaseAdapter { //references to MainActivity's context, row layout, and data sources Context context; int layouttobeinflated; List<Database.DbRecord> dblist; //accept arguments, create a custom data adapter public CustomBaseAdapter(Context context, List<Database.DbRecord> databaselist, int resource) { this.context = context; this.dblist = databaselist; layouttobeinflated = resource; //return the number of rows held in the source list public int getcount() { return dblist.size(); ❶ //return database item representing row in given position public Database.DbRecord getitem(int position) { return dblist.get(position); //return the ID of item held in given position (our decision: ID same as position) public long getitemid(int position) { return position; //inflate row template, do plumbing, populate fields, add listener to right image //assign ID, return beautified row (applying ViewHolder strategy) public View getview(final int position, View convertview, ViewGroup parent) { ❷ // Use ViewHolder pattern to reduce calls to: inflate & findviewbyid. // Holder is a POJO for the GUI rows [textview1,textview2, img1, img2] MyViewHolder holder;

46 // hopefully convertview is a scrapview already made (but out of sight) View row = convertview; // has this row been already created? if (row == null) { // first time this row has to be made: (1) inflate custom layout // holding images and text, (2) invoke findviewbyid to access its // sub-components LayoutInflater inflater = ((Activity) context).getlayoutinflater(); row = inflater.inflate(layouttobeinflated, null); holder = new MyViewHolder(); // plumbing - provide access to each widget in the inflated layout // (two images & two lines of text) holder = new MyViewHolder(); holder.textview1 = (TextView) row.findviewbyid(r.id.rowtextview1); holder.textview2 = (TextView) row.findviewbyid(r.id.rowtextview2); holder.imageview1 = (ImageView) row.findviewbyid(r.id.rowimageview1); holder.imageview2 = (ImageView) row.findviewbyid(r.id.rowimageview2); // identify this row with the POJO holder just created row.settag(holder); row.setid(position); else { // row was already created- no need to inflate and invoke findviewbyid // gettag() returns the object originally stored in this view holder = (MyViewHolder) row.gettag(); // enter(or restore) data that goes in this frame (from database 'position') Database.DbRecord dbrec = getitem(position); holder.textview1.settext(dbrec.text1); holder.textview2.settext(dbrec.text2); holder.imageview1.setimageresource(dbrec.img1); holder.imageview2.setimageresource(r.mipmap.ic_pic_right); // EXTRA: individual listeners go here - if you need only a single // listener for the entire row, put it into ActivityMain. // This is a CLICK listener on top of the right icon (imageview2) ❸ // (for example, here you start an intent to call phone[position]) holder.imageview2.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { Toast.makeText(context, "(RIGHT) IMAGE CLICKED - " + position, Toast.LENGTH_SHORT).show(); );

47 // row listener (user clicks on any other part of the row) ❹ row.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { Toast.makeText(context, "ROW CLICKED - " + position, Toast.LENGTH_SHORT).show(); ); return row; // getview // A humble POJO holding references to GUI widgets that are part of rows ❺ // shown by the list. They have already been made and their IDs are known, // therefore there is no need to issue 'findviewbyid' calls again. public class MyViewHolder { TextView textview1; TextView textview2; ImageView imageview1; ImageView imageview2; // CustomMadeListener CustomBaseAdapter getcount() getitem(position) getitemid(position) getview getview() convertview row.findviewbyid()

48 Toast onclicklistener onclicklistener Toast public class Database { // TEST DATABASE public String[] text1array = { "Photo-00", "Photo-01", "Photo-02", "Photo-03", "Photo-04", "Photo-05", "Photo-06", "Photo-07", "Photo-08", "Photo-09", "Photo-10", "Photo-11", "Photo-12", "Photo-13", "Photo-14", "Photo-15", "Photo-16", "Photo-17", "Photo-18", "Photo-19", "Photo-20", "Photo-21", "Photo-22", "Photo-23", "Photo-24", "Photo-25", "Photo-26", ; public String[] text2array = { "Turtle", "Blossom", "Building", "Cat", "Church", "Coffee", "Coffee","Dubrovnik", "Egg", "Firefighters", "Flower", "Football","Isolated", "Jetty", "Jetty", "Paraglider", "Pelican","Pelican", "Pier", "Purpursonnen Hut", "Roofs", "South Africa","Stone Arch", "Sunset", "Tangerine", "Travel", "Tree" ; ❶ public Integer[] icon1array = { R.drawable.small_pic00,R.drawable.small_pic01, csu.matos.r.drawable.small_pic02, csu.matos.r.drawable.small_pic03, csu.matos.r.drawable.small_pic04, csu.matos.r.drawable.small_pic05, csu.matos.r.drawable.small_pic06, csu.matos.r.drawable.small_pic07, csu.matos.r.drawable.small_pic08, csu.matos.r.drawable.small_pic09, csu.matos.r.drawable.small_pic10, csu.matos.r.drawable.small_pic11, csu.matos.r.drawable.small_pic12, csu.matos.r.drawable.small_pic13, csu.matos.r.drawable.small_pic14, csu.matos.r.drawable.small_pic15, csu.matos.r.drawable.small_pic16, csu.matos.r.drawable.small_pic15, csu.matos.r.drawable.small_pic17, csu.matos.r.drawable.small_pic18, csu.matos.r.drawable.small_pic19, csu.matos.r.drawable.small_pic20, csu.matos.r.drawable.small_pic21, csu.matos.r.drawable.small_pic22, csu.matos.r.drawable.small_pic23, csu.matos.r.drawable.small_pic24, csu.matos.r.drawable.small_pic25, csu.matos.r.drawable.small_pic26,; public class DbRecord { public String text1; public String text2; public Integer img1; public DbRecord(String text1, String text2, Integer img1) { this.text1 = text1; this.text2 = text2;

49 this.img1 = img1; //dbrecord // dblist is a 'database' holding a list of DbRecods:[string,string,int] public ArrayList<DbRecord> dblist = new ArrayList<DbRecord>(); // populate the 'database' with data items ❷ public Database () { for(int i=0; i<text1array.length; i++){ dblist.add(new DbRecord(text1array[i], text2array[i], icon1array[i]) ); //Database Database Database ArrayList ArrayList<DbRecord> ListView

50

51