Making an Album List & Editing – Using ListView on Android

In this tutorial, we will learn how to use ListView on android. Our scenario is simple. We have an album list of Michael Jackson and we can change any album name or delete an list item.

 

1. Creating a Simple ListView
2. Optimization of ListView
3. Configuring Item Clicks on ListView
4. Editing Items

1. Creating a Simple ListView

  • Lets begin. Open your Android Studio. Start a new project. Project name is up to you, I named it as AlbumList. If you forget how to open new project in android studio, follow this.
  • As always, first of all, define all resources used by application.
    Open your res/values/strings.xml file and add below string items.

    Open your res/values/colors.xml file and add below color items.

 

  • Lets design the screen. Our activity contains just a ListView. Open your res/layout/activity_main.xml file and write below.

     
  • We should design listview item layout also. An item looks like below.item_template
  • Create a new layout resource file. Right click on res/layout folder and go New->Layout resource file. Name it as listview_item.xml.Screen Shot 2015-12-19 at 21.06.50Screen Shot 2015-12-19 at 21.07.25

 

  • Open res/layout/listview_item.xml and write below.

     
  • We need an album cover image. So download below image and place it under res/drawable folder.
    jackson_album_coverScreen Shot 2015-12-19 at 21.15.49

 

  • We are ok with design. Lets go java side.
  • Every listview item shows datas like album name and artist name. These datas should be hold in a model list. Model lists are like an ArrayLists in java and they just hold raw datas. Right click on your package and create new class like below. Name it as Album.java
    Screen Shot 2015-12-19 at 21.27.15
    Screen Shot 2015-12-19 at 21.27.29

 

  • An album object holds two strings. Album name and artist name. Open your Album class and write below.

 

  • Next, create a model list and fill it up. Open your MainActivity.java and write below.

 

  • Our model list is ready. Lets configure our ListView. Every ListView has an adapter that arranges items appearance and their order. So without and adapter, a ListView is nothing.
    Look at definition of ListView and Adapter of developer.android.com

    ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that’s placed into the list.

    So basically, Adapter read the datas from an array or database and converts them into a view which is listview item.

 

  • Lets create an adapter. Right click on your package and create a java class again. Name it as ListViewAdapter
  • Screen Shot 2015-12-19 at 21.27.15
    Screen Shot 2015-12-19 at 21.43.08

 

  • To be an adapter, your ListViewAdapter class must be extended from BaseAdapter. Open it and write below.

 

  • You have to override some methods. These methods will help adapter to know how many items listview will have and create those items. So in ListViewAdapter write below.

 

  • In ListViewAdapter, getView method is very important. You prepare an item view there and return to adapter to place it in listview.  Remember we designed item layout before. So lets convert that xml into a view and give it to adapter.

 

  • To converting we need LayoutInflater object. An example is below about using LayoutInflater.

 

  • So, in ListViewAdapter write below.

 

  • Back to MainActivity. Lets create an adapter object and give it to our listview.

 

  • You can run your application and try it.

 

2. Optimization Of ListView

  • At some points, we can optimize our ListView.
  • Open your ListViewAdapter and see getView method parameters. There is a convertView parameter. Below chart shows trick about convertView.
    convertview

 

  • So we can use convertview instead of creating a new item view again and again. But we need to check if coming convertView is null. If getView method run before any item view be invisible, convertView will come as null.

 

  • Here is another optimization trick. Everytime getView method is called, findViewById methods are called also. Because findViewById method costs a lot, we have to avoid using findViewById everytime.

 

  • In this situation, a ViewHolder class will help us. A ViewHolder obviously hold view elements in listview item and save us from reach them using findViewById method. Open your ListViewAdapter and write like below.

 

  • You can run your application and try it. Visually nothing change but it works more efficient now.

 

3. Configuring Item Clicks on ListView

  • We need to show a toast message about clicked item. Open your MainActivity and set a OnItemClickListener like below.

 

  • Run application and click on any item. You can see the toast message.

4. Editing Items

  • According to our scenario, we have to show an editing dialog when we click long on any item. First of all we have to design our dialog. Right click on your res/layout folder and create a new layout resource file. Name it as edit_dialog.xml.
    Screen Shot 2015-12-19 at 21.06.50
    Screen Shot 2015-12-20 at 15.38.10

 

  • Open res/layout/edit_dialog.xml and write below.

 

  • We are ok with dialog designing. Lets show it when we click long. Open your MainActivity and add below code part.

 

  • Run application and click long on any item. You can see the dialog you designed.

 

  • Next, we have to add functionality to edittext and buttons on dialog. Edittext must be initalized with clicked album name. When rename button is clicked, new album name should be set in model list and adapter should be notified of that. When delete button is clicked, that item should be deleted from model list and again adapter should be notified of that.
Note

When notifyDataSetChanged method is called, adapter refresh itself. It creates listview items over again with new model list.

  • Thats all. Run your application and try it.
download_source_icon Download Source Code
If you don’t know how to open an existing Android Studio Project, follow this tutorial.

Bir Cevap Yazın