Android

Android List View Example
Author : Ishtek

Setup Eclipse with Android ADT Plugin for test/code environment (by using Android API Level 7 and Emulator).
P.S- Above page is having around 14 images, download size could be around 700KB.

This Page and/or example code is using Android API Level 7 and tested using corresponding Emulator only.
For latest information please refer Android Official website.

Using Android API Level : 7 In this tutorial we shall be covering Android's ListView API with the help of an example. Final screen of this Expandable listview example would look like the below image: List of groups as initial view of this application showing two different sections as different categories. Following image shows screen after clicking both the items from the expandable ListView: Expandable ListView initial screen layout as follows: main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ExpandableListView android:layout_height="wrap_content" android:id="@android:id/list" android:layout_width="fill_parent"/> </LinearLayout>
list_group_1.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ee33ee"> <TextView android:text="Cup Boards " android:layout_width="wrap_content" android:textColor="#000000" android:layout_height="wrap_content"/> <ImageView android:src="@drawable/downarrow" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
list_group_2.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ee33ee"> <TextView android:text="Cameras " android:layout_width="wrap_content" android:textColor="#000000" android:layout_height="wrap_content"/> <ImageView android:src="@drawable/downarrow" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
list_item_1.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:src="@drawable/cupboards1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/cupboards2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/cupboards3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/cupboards4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> </LinearLayout>
list_item_2.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableLayout android:id="@+id/table" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:id="@+id/tabRow1" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/camera1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px" android:paddingBottom="2px"/> <ImageView android:src="@drawable/camera2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px" android:paddingBottom="2px"/> </LinearLayout> </TableRow> <TableRow android:id="@+id/tabRow2" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/camera3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px" android:paddingBottom="2px"/> <ImageView android:src="@drawable/camera4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px" android:paddingBottom="2px"/> </LinearLayout> </TableRow> </TableLayout> </LinearLayout>
Using Android API such as ExpandableListActivity and BaseExpandableListAdapter class files, those can be extended by example specific Java class files such as "PracticalListViewExample" extends ExpandableListActivity and "PracticalListViewAdapter" extends BaseExpandableListAdapter class file. PracticalListViewExample.java
package com.techienjoy.example.listview; import android.app.ExpandableListActivity; import android.app.ListActivity; import android.os.Bundle; import android.widget.BaseAdapter; import android.widget.ExpandableListAdapter; import android.widget.ListAdapter; public class PracticalListViewExample extends ExpandableListActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ExpandableListAdapter adapter = new PracticalListViewAdapter(this); setListAdapter(adapter); } }
and PracticalListViewExample.java
package com.techienjoy.example.listview; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseExpandableListAdapter; import android.widget.LinearLayout; import android.widget.TextView; public class PracticalListViewAdapter extends BaseExpandableListAdapter { private LayoutInflater infLayout; private Context context; public PracticalListViewAdapter(Context context) { this.context = context; } @Override public Object getChild(int groupPosition, int childPosition) { return null; } @Override public long getChildId(int groupPosition, int childPosition) { return 0; } /** * * Following method is overridden and it returns the view for the child view * as shown in this image */ @Override public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { LinearLayout view = null; if(infLayout == null) infLayout = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if(groupPosition == 0) { view = (LinearLayout) infLayout.inflate(R.layout.list_item_1, null); } if(groupPosition == 1) { view = (LinearLayout) infLayout.inflate(R.layout.list_item_2, null); } return view; } @Override public int getChildrenCount(int groupPosition) { return 1; } @Override public Object getGroup(int groupPosition) { return null; } @Override public int getGroupCount() { return 2; } @Override public long getGroupId(int groupPosition) { return 0; } /** * * Following method is overridden and it returns the view for the group * as shown in this image */ @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { LinearLayout linear = new LinearLayout(context); if(infLayout == null) infLayout = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if(groupPosition == 0){ linear = (LinearLayout) infLayout.inflate(R.layout.list_group_1, null); } if(groupPosition == 1){ linear = (LinearLayout) infLayout.inflate(R.layout.list_group_2, null); } return linear; } @Override public boolean hasStableIds() { return false; } @Override public boolean isChildSelectable(int groupPosition, int childPosition) { return false; } }
Once all these files are placed in folders as appropriate within Eclipse Workspace and Android Project, Java files compiled and *.apk file created. Then this APK file can be published to Android Emulator for displaying application at runtime.
    Updated as of 13-Oct-2013:
Let us explore some other ways to use ListView, by using configuration files for the list items. By using static xml file for listview items, one can provide initial set of list item values. list_items.xml
<resources> <string-array name="test"> <item>Test</item> <item>Test1</item> <item>Test2</item> <item>Test3</item> </string-array> </resources>
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/listView" android:layout_centerVertical="true" android:text="@string/title_activity_main" tools:context=".MainActivity" /> <ListView android:id="@+id/listView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:entries="@array/test" android:dividerHeight="5dp" android:divider="@drawable/divider" android:background="#8888bb"> </ListView> </RelativeLayout>
android:divider as the @drawable divider is an image as As per this example, this divider image is to be copied to a folder as drawable under res folder of the android project. And the final screen as captured in an emulator is as follows: And the item seletable background image as shown below: By setting text color in the styles.xml file as follows: <item name="android:textColor">#FFFFFF</item>
     This part below is added as of 20-Oct-2013
Based on a request from one of our visitor in comments section: List with oval shaped items as shown below: In order to achieve this, we would be requiring four major changes in the above example code. These files are as follows: activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="50dp" android:layout_above="@android:id/list" android:layout_centerVertical="true" android:text="@string/title_activity_main" tools:context=".MainActivity" /> <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:entries="@array/test" android:dividerHeight="5dp" android:divider="@drawable/divider"> </ListView> </RelativeLayout>
rounded_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#0000FF"/> <stroke android:width="2dp" android:color="#FF0000"/> </shape>
list_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="150dp" android:background="@drawable/rounded_background"> <TextView android:id="@+id/txtView" android:layout_width="fill_parent" android:layout_height="100dp" android:paddingLeft="100dp" android:paddingTop="40dp" android:textScaleX="2" android:textSize="14dp"/> </LinearLayout>
This layout is to be used for each list item's layout, with a background drawable as the rounded/oval shape as defined in the rounded_background.xml shape. MainActivity.java
/** * This code is provided on "As IS" basis. * Author: Ishtek * Date: 19 - Oct-2013 * Contact: usingframeworks@gmail.com */ package com.example.examplelist; import android.app.ListActivity; import android.content.Context; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; public class MainActivity extends ListActivity { private Context context; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = this; setListAdapter(new MyListAdapter()); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } class MyListAdapter extends BaseAdapter { @Override public int getCount() { return 4; } @Override public Object getItem(int arg0) { return null; } @Override public long getItemId(int id) { return id; } @Override public View getView(int position, View parent, ViewGroup rootViewGrp) { final View view = View.inflate(context, R.layout.list_item, null); TextView txtView = (TextView) view.findViewById(R.id.txtView); if(position == 0) { txtView.setText("Test 1"); } else if(position == 1) { txtView.setText("Test 2"); } else if(position == 2) { txtView.setText("Test 3"); } else if(position == 3) { txtView.setText("Test 4"); } return view; } } }
This main activity code has a private class of type BaseAdaptor and overridden methods, such as getItem, getCount (returns 4, so we are having 4 list items), getView returns the view for each items with the layout as defined in the list_item.xml file (as shown above).
If interested in commenting related to Android ListView Example
Click Here

Name (To be shown on this Page:*

Email (Not to be shown):*

Website (To be shown on this Page)

Your Comments here (To be shown on this Page):*

(You can use <a> Tag in your comments)

Please enter same number as shown here 661

Name: UsingFrameworksDated: 2013-10-19 19:38:46
How to code list items with beveled border?
Is it possible to achieve using Android API/Widgets?    
Name: IshtekDated: 2013-10-19 19:43:23
Good question though, I shall be working on it, thereby creating custom border for the list item used
in example shown on this page. Apart from beveled border, I would like to make it round cornered
border as well.  How is that !!!

Please visit again to see this update on this page.
Name: Ishtek (Author)Dated: 2013-10-19 21:34:09
I have recently updated this page with code for achieving an oval shaped item inside a listview.

If you are facing any issues, please ask me by using the comments form on this page.

Please be informed that my response to your queries won't be bound by any time duration.
Name: SidhirDated: 2013-10-19 21:54:40
There is a link I came across recently that has demonstrated another way of coding round corner
item's background of any listview.

https://github.com/munnadroid/AndroidListviewRoundedCorner

Hope this helps.
Name: Ishtek (Author)Dated: 2013-10-19 23:28:29
I have changed the list-items.xml file that contains the shape to somewhat as shown below:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
  <solid android:color="#0000FF"/>
  <stroke android:width="2dp" android:color="#FF0000"/> 
  <corners android:radius="30dp"/>
</shape>
       
And the output screen on Emulator is as shown below:



Try many other possibilities.
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: SeemaDated: 2013-10-20 13:41:57
Can anyone please help me in doing a perticular scenario whereby, I am 
trying to create a ListView with a SharedPreference for storing configuration to as to control the way ListView
widget would react the output screen layout would be??

For example, If user selected vegetables as configuration setting, then this setting has to be
stored in external storage, and 
based on the selection, output ListView would list down all vegetables with details on screen.

Any design pattern can be helpful in this scenario.

Please help    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: YashminDated: 2013-10-26 09:44:01
How about creating a list with listitem having a X signed button on the right side, 
On click or touch of this X button, the corresponding list item should be deleted and removed from the List (parent).

I am newbie to Android, so need help in achieving this please.    
Name: SureshDated: 2013-11-01 23:18:12
Nice idea, I am also looking for solution similar to this this scenario.
I think approach for achieving this type of layout, would require click event handlers local to a class as private.
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: benDated: 2013-11-12 15:22:18
How can i get the data from Web service .net and display it in an expandable List view The Web service get the data from Microsoft SQL Server.

i'm using web service.net to read the data from Microsoft Sql Server this is my web service my webservice    
Name: SureshDated: 2013-11-13 21:26:29
Hi,

I think it all depends on answers to following questions:
1. What is the type of webservice, whether SOAP or REST based webservice?
2. What is the data type used in webservice message payload?
3. What is the latency for the webservice call?
4. what is the size of message payload web service?

Is there any authentication or authorization aspect to look at as well?

If possible, answers to these queries would definitely helpful in deciding what type of 
web service client for Android Device.
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: yesrajDated: 2013-11-23 10:33:49
How to code a list with separate background for each list item.
Background would be separate images for each item.    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: SudhirDated: 2013-11-29 12:17:47
Thanks for this easy to follow example on ListView class from Android API.

I have a query, how to place a list of items by using ListView class, in a section or portion of
the UI screen. I mean, this list will be shown inside a single cell of a GridView, for example.

How to code this, can I use ListActivity for the main screen or any other Activity type for this.

Thanks in advance for any help on this...    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: yogeshDated: 2013-12-02 13:56:45
How about designing or overriding listview's default behavior and look and feel for the listview? Is this possible on Android Platform?

If yes, how?

I would like to provide dynamic data fetching from server using AJAX and update listview with more items only
after last item is seen on user' mobile device with scroll action to the bottom 
of listview    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: YogeshDated: 2013-12-11 20:02:49
Thanks for this thread on ListView class from Android API.
I am looking for a little attention here for solution to a technical challenge I am presently 
working on.

Let me explain a bit about the problem statement here:
There is a list of items, values/items of which would be a view to the Backing bean mapped to server side transfer objects. I will be using JSF as the server side component and Android ListView part of the native application.

How to control/update view based on server side component? One way is to use client pull, and other option would be server push.

Evaluating various pros and cons to these approaches.

Any feedback on this would be welcome.    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: RaniKDated: 2015-03-20 09:44:30
Nice example... Please keep it up...thanx    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393

Name: sreeDated: 2016-02-13 20:41:40
good work    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 393




Android Thread Example

REST Interview Questions

JAX-WS Webservice Example

Android Overlap SurfaceView Example

Spring3 Integration of File Endpoint

JAXWS Webservice Example

Android WebView Example

Android Context Menu Example

Setting up Eclipse for Android App Development

Android SensorEvent Orientation Example

Android ImageSwitcher Example

REST API Design for Android App

Android ExpandableListView Example

Singleton Serializable on Android

Android GPS with Google MAP Example

Android Project With Example

Android Project Manageing Files

Project Ideas for App on Android Platform

Android EditText with Background

Android SQLite Database Example

Android AutoCompleteTextView Example

Android Tester

Android Interview Questions

Android ListView Example

Android Intent Notification Example

Android Intent Broadcast Example

Android TextView Link Example

Android Sensor List

Android Sensor Orientation Example

Android Intent Broadcast Receiver

Android Gallery SurfaceViews Example

Android Location Example

Android Text to Speech Example

Android Intent Example

Android Layout Example

Android Download File Example

Android Expandable ListView Example

Android Tab Example

Android RelativeLayout Example

Android Intent Example

Android Text to Speech Example

Android SQLite Example

Android CustomView Example

Android Canvas Example

Android SharedPreferences Example

Android Shape Background Example

Android ShapeButton Example

Android ViewFlipper Example

Android Gallery Example

Android TimePickerDialog Example





If interested commenting on this Page :

comments powered by Disqus
Any source code found on any of the page(s) in Techiecommunity.net is associated with following notice: 
   /*
     * TECHIECOMMUNITY.NET MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE SUITABILITY OF
     * THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
     * TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
     * PARTICULAR PURPOSE, OR NON-INFRINGEMENT. TECHIECOMMUNITY.NET SHALL NOT BE LIABLE FOR
     * ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, MODIFYING OR
     * DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
     *
     * THIS SOFTWARE IS NOT DESIGNED OR INTENDED FOR USE OR RESALE AS ON-LINE
     * CONTROL EQUIPMENT IN HAZARDOUS ENVIRONMENTS REQUIRING FAIL-SAFE
     * PERFORMANCE, SUCH AS IN THE OPERATION OF NUCLEAR FACILITIES, AIRCRAFT
     * NAVIGATION OR COMMUNICATION SYSTEMS, AIR TRAFFIC CONTROL, DIRECT LIFE
     * SUPPORT MACHINES, OR WEAPONS SYSTEMS, IN WHICH THE FAILURE OF THE
     * SOFTWARE COULD LEAD DIRECTLY TO DEATH, PERSONAL INJURY, OR SEVERE
     * PHYSICAL OR ENVIRONMENTAL DAMAGE ("HIGH RISK ACTIVITIES"). TECHIECOMMUNITY.NET
     * SPECIFICALLY DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY OF FITNESS FOR
     * HIGH RISK ACTIVITIES.
     */
   
The content provided in this page is NOT warranted and/or NOT guaranteed by techiecommunity.net .
techiecommunity.net is not liable for any negative consequences that may result/arise from 
implementing directly/indirectly any information covered in these pages/articles/tutorials.

For any of the content, if you would like to bring it to notice for removal from this web site, 
please write to this web site administrator @ EMAIL-ID (please remove space before and after @),
with appropriate concern and supporting proof(s). After thorough review and if found genuine concern,
we would take appropriate action and remove disputed content from this web site within 24 hours 
starting from the time it has brought to techiecommunity.net Administrator notice.

This website uses cookies and third party cookies to improve the user experience. 
And to provide more relevant ads. 
In case of continued use of this website implies that you accept the use of cookies on this website.
		
While using this web site, you agree to have read and accepted techiecommunity.net terms of use and privacy policy.