DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Data Transferring Between Android Based Mobile Devices
  • How to Develop a Simple Step Counter App on ReactNative
  • Custom Spinner for Android Application
  • How To Create a Resource Chart in JavaScript

Trending

  • LTS JDK 21 Features
  • Agile Estimation: Techniques and Tips for Success
  • TDD With FastAPI Is Easy
  • Software Verification and Validation With Simple Examples
  1. DZone
  2. Data Engineering
  3. Data
  4. Custom ListView in Android Tutorial

Custom ListView in Android Tutorial

Sai Geetha M N user avatar by
Sai Geetha M N
·
Jul. 29, 11 · News
Like (0)
Save
Tweet
Share
22.43K Views

Join the DZone community and get the full member experience.

Join For Free

Now, we shall look at creating a custom list view – a custom layout, a custom row layout and how we bind the custom data holder to these layouts. (please see the earlier article on simple list view for the fundamentals of list view).

So, here again, we start with extending ListActivity.

public class MyCustomListView extends ListActivity {

Now let us create the custom list view in an xml file – custom_list_view.xml. This will be set using the setContentView() in onCreate() method:

    <ListView android:id="@id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000fff"
android:layout_weight="2"
android:drawSelectorOnTop="false">
</ListView>
<TextView android:id="@id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFff00"
android:text="No data"
/>


Note that it must contain a ListView object with android:id="@id/android:list"

I have also declared a TextView which should be whon when the list if empty by declaring with android:id="@id/android:empty"

Now we will declare how each row in this ListView should be displayed by creating a new xml file – custom_row_view.xml

I plan to have 3 items one below the other in each row. So, here is the declaration for the same:

    <TextView android:id="@+id/text1"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#FFFF00"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView android:id="@+id/text2"
android:textSize="12sp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
<TextView android:id="@+id/text3"
android:typeface="sans"
android:textSize="14sp"
android:textStyle="italic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>


So, now, how do I tie all of this together? The MyCustomListView class, the listview layout and the row layout. Just like in the earlier example, we need a ListAdpater object. Here I plan to use a SimpleAdpater provided by the SDK.

An adapter expects the context, the layout and the handle to the data that needs to be displayed. So, let us create a list of data in an ArrayList of HashMaps. This way, the HashMap can store any amount of data.

    static final ArrayList<HashMap<String,String>> list =

new ArrayList<HashMap<String,String>>();


This is just a declaration of the list object. We need to populate it with data. Our custom row layout expects each row to have 3 prices of data…

This list is populated in a method as shown below with the 3 keys as ‘pen’, ‘price’ and ‘color’:
private void populateList() {

    HashMap<String,String>  temp = new HashMap<String,String>();
temp.put("pen","MONT Blanc");
temp.put("price", "200.00$");
temp.put("color", "Silver, Grey, Black");
list.add(temp);
HashMap<String,String> temp1 = new HashMap<String,String>();
temp1.put("pen","Gucci");
temp1.put("price", "300.00$");
temp1.put("color", "Gold, Red");
list.add(temp1);
HashMap<String,String> temp2 = new HashMap<String,String>();
temp2.put("pen","Parker");
temp2.put("price", "400.00$");
temp2.put("color", "Gold, Blue");
list.add(temp2);
HashMap<String,String> temp3 = new HashMap<String,String>();
temp3.put("pen","Sailor");
temp3.put("price", "500.00$");
temp3.put("color", "Silver");
list.add(temp3);
HashMap<String,String> temp4 = new HashMap<String,String>();
temp4.put("pen","Porsche Design");
temp4.put("price", "600.00$");
temp4.put("color", "Silver, Grey, Red");
list.add(temp4);
}


So, now how do we tie up the data with the row layout and the listview layout. It is in this simple piece of code in the onCreate() method of MyCustomListView class:
    setContentView(R.layout.custom_list_view);

SimpleAdapter adapter = new SimpleAdapter(
this,
list,
R.layout.custom_row_view,
new String[] {"pen","price","color"},
new int[] {R.id.text1,R.id.text2, R.id.text3}

);

populateList();


setListAdapter(adapter);

Here we have set the default view to custom_list_view.
Then, using the SimpleAdapter, we have set the context, the list containing the data for display, the custom_row_view, the keys by which the data has to be fetched from the list, the TextViews into which the corresponding data has to be displayed.

Now execute and you will have a custom list view. Here is what you will get to see:


NOTE: if you do not populate the list with any data, you will see another view – the empty listview that we have defined in the custom_list_view.xml

You can download the complete source code for this example here.

Added later:
Based on a question below, I would like to add that an item can be clicked even in this custom list and the even captured by overriding the onListItemClick() method on the ListActivity class.

Here is the piece of code you can add to my sample, if you haev downlaoded and ti will toast a message on what has been selected:



protected void onListItemClick(ListView l, View v, int position, long id) {

super.onListItemClick(l, v, position, id);
Object o = this.getListAdapter().getItem(position);
String pen = o.toString();
Toast.makeText(this, "You have chosen the pen: " + " " + pen, Toast.LENGTH_LONG).show();
}


Enjoy....
Data (computing) Android (robot)

Published at DZone with permission of Sai Geetha M N, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Data Transferring Between Android Based Mobile Devices
  • How to Develop a Simple Step Counter App on ReactNative
  • Custom Spinner for Android Application
  • How To Create a Resource Chart in JavaScript

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: