Practical 1.ListView example

Size: px

Start display at page:

Download "Practical 1.ListView example"

Florence Malone
5 years ago
Views:

1 Practical 1.ListView example In this example, we show you how to display a list of fruit name via ListView. Android Layout file File : res/layout/list_fruit.xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textsize="20sp" > </TextView> ListView ListFruitActivity.java package com.mkyong.android; import android.app.listactivity; import android.os.bundle; import android.view.view; import android.widget.adapterview; import android.widget.arrayadapter; import android.widget.listview; import android.widget.textview; import android.widget.toast; import android.widget.adapterview.onitemclicklistener;

2 public class ListFruitActivity extends ListActivity { static final String[] FRUITS = new String[] { "Apple", "Avocado", "Blueberry", "Coconut", "Durian", "Guava", "Kiwifruit", "Jackfruit", "Mango", "Olive", "Pear", "Sugar-apple" ; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // setcontentview(r.layout.list_fruit); setlistadapter(new ArrayAdapter<String>(this, R.layout.list_fruit,FRUITS)); ListView listview = getlistview(); listview.settextfilterenabled(true); listview.setonitemclicklistener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // When clicked, show a toast with the TextView text Toast.makeText(getApplicationContext(), Toast.LENGTH_SHORT).show(); ((TextView) view).gettext(), ); Output

4 Practical 2. Custom ArrayAdapter example In this example, we show you how to create 4 items in the ListView, and use a custom ArrayAdapter to display different images base on the item name in the list. Get 4 images for demonstration and paste to res/drawable/ folder. Based on your image file names, you have to change the resource id names R.drawables.<your image file name> in the MobileArrayAdapter.java file. Android Layout file File : res/layout/list_mobile.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" > <ImageView android:id="@+id/logo" android:layout_width="50px" android:layout_height="50px"

5 android:layout_marginleft="5px" android:layout_marginright="20px" android:layout_margintop="5px" > </ImageView> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="30px" > </TextView> </LinearLayout> Custom ArrayAdapter Create a class extends ArrayAdapter and customize the item display in the getview() method. MobileArrayAdapter.java package com.mkyong.android.adaptor; import com.mkyong.android.r; import android.content.context; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup;

6 import android.widget.arrayadapter; import android.widget.imageview; import android.widget.textview; public class MobileArrayAdapter extends ArrayAdapter<String> { private final Context context; private final String[] values; public MobileArrayAdapter(Context context, String[] values) { super(context, R.layout.list_mobile, values); this.context = context; this.values = public View getview(int position, View convertview, ViewGroup parent) { LayoutInflater inflater = (LayoutInflater) context.getsystemservice(context.layout_inflater_service); false); View rowview = inflater.inflate(r.layout.list_mobile, parent, TextView textview = (TextView) rowview.findviewbyid(r.id.label); ImageView imageview = (ImageView) rowview.findviewbyid(r.id.logo); textview.settext(values[position]); // Change icon based on image file name String s = values[position]; System.out.println(s); if (s.equals("windowsmobile")) { imageview.setimageresource(r.drawable.windowsmobile_logo);

7 else if (s.equals("ios")) { imageview.setimageresource(r.drawable.ios_logo); else if (s.equals("blackberry")) { imageview.setimageresource(r.drawable.blackberry_logo); else { imageview.setimageresource(r.drawable.android_logo); return rowview; Change the file names based on your image file names ListView ListView, but use above custom adapter to display the list. package com.mkyong.android; import com.mkyong.android.adaptor.mobilearrayadapter; import android.app.listactivity; import android.os.bundle; import android.widget.listview; import android.widget.toast; import android.view.view; public class ListMobileActivity extends ListActivity { static final String[] MOBILE_OS = new String[] { "Android", "ios", "WindowsMobile",

$oncreate(savedinstancestate); setlistadapter(new MobileArrayAdapter(this, MOBILE_OS)); @Override protected void onlistitemclick(listview l, View v, int position, long id) { //get selected items$

8 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setlistadapter(new MobileArrayAdapter(this, protected void onlistitemclick(listview l, View v, int position, long id) { //get selected items String selectedvalue = (String) getlistadapter().getitem(position); Toast.makeText(this, selectedvalue, Toast.LENGTH_SHORT).show(); Output Try it your self:

9 Create an Android project to display a set of countries with the flag and its currency as indicated in the image below. Hint : create a layout file with an mageview and two textviews as shown below: Image View Text View Text View

Android Apps Development for Mobile and Tablet Device (Level I) Lesson 4. Workshop

Android Apps Development for Mobile and Tablet Device (Level I) Lesson 4. Workshop Workshop 1. Create an Option Menu, and convert it into Action Bar (Page 1 8) Create an simple Option Menu Convert Option Menu into Action Bar Create Event Listener for Menu and Action Bar Add System Icon