{"id":416,"date":"2015-12-30T12:59:00","date_gmt":"2015-12-30T12:59:00","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=416"},"modified":"2018-06-05T10:03:18","modified_gmt":"2018-06-05T10:03:18","slug":"listview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/listview","title":{"rendered":"ListView Tutorial With Example In Android Studio"},"content":{"rendered":"

List of scrollable items can be displayed in Android using ListView. It helps you to displaying the data in the form of a scrollable list. Users can then select any list item by clicking on it. ListView is default scrollable so we do not need to use scroll View or anything else with ListView.<\/p>\n

ListView is widely used in android applications. A very common example of ListView is your phone contact book, where you have a list of your contacts displayed in a ListView and if you click on it then user information is displayed.<\/p>\n

Adapter:<\/strong><\/span> To fill the data in a ListView we simply use adapters. List items are automatically inserted to a list using an Adapter that pulls the content from a source such as an arraylist, array or database.<\/p>\n

ListView in Android Studio:<\/strong><\/span> Listview is present inside Containers. From there you can drag and drop on virtual mobile screen to create it. Alternatively you can also XML code to create it.<\/p>\n

\"ListView<\/center>Here is Android ListView XML Code: <\/strong><\/p>\n
<ListView xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/simpleListView\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    tools:context=\"abhiandroid.com.listexample.MainActivity\">\r\n<\/ListView><\/pre>\n
Listview look in Design:<\/strong><\/p>\n
\"Listview<\/center><\/p>\n
\n
Attributes of ListView:<\/strong><\/h4>\n
Lets see some different attributes\u00a0of ListView which will be used while designing a custom list:<\/p>\n
1. id:<\/strong><\/span> id is used to uniquely identify a ListView.<\/p>\n
Below is the id attribute\u2019s example code with explanation included.<\/p>\n
<!-- Id of a list view uniquely identify it-->\r\n<ListView\r\nandroid:id=\"@+id\/simpleListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\n\/>\r\n<\/pre>\n
2. divider: <\/strong><\/span>This is a drawable or color to draw between different list items.<\/p>\n
Below is the divider example code with explanation included, where we draw red color divider between different views.<\/p>\n
<!--Divider code in ListView-->\r\n<ListView\r\nandroid:id=\"@+id\/simpleListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:divider=\"#f00\"\r\nandroid:dividerHeight=\"1dp\"\r\n\/>\r\n<\/pre>\n
\"divider<\/center>3. dividerHeight:<\/strong><\/span> This specify the height of the divider between list items. This could be in dp(density pixel),sp(scale independent pixel) or px(pixel).<\/p>\n
In above example of divider we also set the divider height 1dp between the list items. The height should be in dp,sp or px.<\/p>\n
4. listSelector: <\/strong><\/span>listSelector property is used to set the selector of the listView. It is generally orange or Sky blue color mostly but you can also define your custom color or an image as a list selector as per your design.<\/p>\n
\"listSelector<\/center>Below is listSelector example code with explanation includes, where list selector color is green, when you select any list item then that item\u2019s background color is green .<\/p>\n
<!-- List Selector Code in ListView --><\/strong>\r\n<ListView\r\nandroid:id=\"@+id\/simpleListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:divider=\"#f00\"\r\nandroid:dividerHeight=\"1dp\" \r\nandroid:listSelector=\"#0f0\"\/> <!--list selector in green color-->\r\n<\/pre>\n
\n
Adapters Use in ListView:<\/strong><\/h4>\n
An adapter is a bridge between UI component and data source that helps us to fill data in UI component. It holds the data and send the data to adapter view then view can takes the data from the adapter view and shows the data on different views like as list view, grid view, spinner etc.<\/p>\n
ListView is a subclass of\u00a0AdapterView\u00a0and it can be populated by binding\u00a0 to an\u00a0Adapter, which retrieves the data from an external source and creates a View that represents each data entry.<\/p>\n
In android commonly used adapters are:<\/strong><\/p>\n
    \n
  1. Array Adapter<\/li>\n
  2. Base Adapter<\/li>\n<\/ol>\n
    Now we explain these two adapter in detail:<\/p>\n
    1.Array Adapter:<\/strong><\/span><\/p>\n
    Whenever you have a list of single items which is backed by an array, you can use ArrayAdapter. For instance, list of phone contacts, countries or names.<\/p>\n
    Important Note:<\/span><\/strong> By default, ArrayAdapter expects a Layout with a single TextView, If you want to use more complex views means more customization in list items, please avoid ArrayAdapter and use custom adapters.<\/p>\n
    Below is Array Adapter code:<\/p>\n
    ArrayAdapter adapter = new ArrayAdapter<String>(this,R.layout.ListView,R.id.textView,StringArray);\r\n<\/pre>\n
    Example of list view using Array Adapter<\/strong>:<\/span><\/span><\/p>\n
    In this example, we display a list of countries by using simple array adapter. Below is the final output we will create:<\/p>\n
    \"Listview<\/center>Step 1:<\/strong><\/span> Create a new project Listexample and activity Main Activity. Here we will create a ListView in LinearLayout. Below is the code of activity_main.xml or content_main.xml:
    \n<\/strong><\/p>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\">\r\n\r\n<ListView\r\nandroid:id=\"@+id\/simpleListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:divider=\"@color\/material_blue_grey_800\"\r\nandroid:dividerHeight=\"1dp\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
    Step 2:<\/strong><\/span> Create a new activity name Listview and below is the code of activity_listview.xml<\/p>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\">\r\n\r\n<TextView\r\nandroid:id=\"@+id\/textView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:padding=\"@dimen\/activity_horizontal_margin\"\r\nandroid:textColor=\"@color\/black\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
    Step 3:<\/strong><\/span> Now in this final step we will use ArrayAdapter to display the country names in UI. Below is the code of MainActivity.java<\/strong><\/p>\n
    package abhiandroid.com.listexample;\r\n\r\nimport android.os.Bundle;\r\nimport android.app.Activity;\r\nimport android.view.Menu;\r\nimport android.widget.ArrayAdapter;import android.widget.ListView;\r\n\r\npublic class MainActivity extends Activity\r\n{\r\n    \/\/ Array of strings...\r\n    ListView simpleList;\r\n    String countryList[] = {\"India\", \"China\", \"australia\", \"Portugle\", \"America\", \"NewZealand\"};\r\n\r\n    @Override   protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);      setContentView(R.layout.activity_main);\r\n        simpleList = (ListView)findViewById(R.id.simpleListView);\r\n        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, R.layout.activity_listview, R.id.textView, countryList);\r\n        simpleList.setAdapter(arrayAdapter);\r\n    }\r\n}<\/pre>\n
    Output Screen:<\/strong><\/span><\/p>\n
    Now run the App in Emulator. You will see the below output screen where list of country names will be printed:<\/p>\n
    \"Listview<\/center>2.Base Adapter:<\/strong><\/span><\/p>\n
    BaseAdapter is a common base class of a general implementation of an Adapter that can be used in ListView. Whenever you need a customized list you create your own adapter and extend base adapter in that. Base Adapter can be extended to create a custom Adapter for displaying a custom list item. \u00a0ArrayAdapter is also an implementation of BaseAdapter.<\/p>\n
    \u00a0<\/strong>Example of list view using Custom adapter(Base adapter):<\/strong><\/p>\n
    In this example we display a list of countries with flags. For this, we have to use custom adapter as shown in example:<\/p>\n
    \"List<\/center>Step 1:<\/strong><\/span> Create a new project Listebasexample and activity Main Activity. Here we will create a ListView in LinearLayout. Below is the code of activity_main.xml or content_main.xml:
    \n<\/strong><\/p>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<\/em><LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\">\r\n\r\n<ListView\r\nandroid:id=\"@+id\/simpleListView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:divider=\"@color\/material_blue_grey_800\"\r\nandroid:dividerHeight=\"1dp\"\r\nandroid:footerDividersEnabled=\"false\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
    Step 2:<\/strong><\/span> Create a new activity name Listview and below is the code of activity_listview.xml<\/p>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"horizontal\">\r\n\r\n<ImageView\r\nandroid:id=\"@+id\/icon\"\r\nandroid:layout_width=\"50dp\"\r\nandroid:layout_height=\"50dp\"\r\nandroid:src=\"@drawable\/ic_launcher\" \/>\r\n\r\n<TextView\r\nandroid:id=\"@+id\/textView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:padding=\"@dimen\/activity_horizontal_margin\"\r\nandroid:textColor=\"@color\/black\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
    Step 3:<\/strong><\/span> In third step we will use custom adapter to display the country names in UI by coding MainActivity.java. Below is the code of MainActivity.java<\/strong><\/p>\n
    Important Note:<\/strong><\/span> Make sure flag images are stored in drawable folder present inside res folder with correct naming.<\/p>\n
    package com.abhiandroid.listbaseexample;\r\n\r\nimport android.app.Activity;\r\nimport android.os.Bundle;\r\nimport android.widget.ListView;\r\n\r\npublic class MainActivity extends Activity {\r\n\r\nListView simpleList;\r\nString countryList[] = {\"India\", \"China\", \"australia\", \"Portugle\", \"America\", \"NewZealand\"};\r\nint flags[] = {R.drawable.india, R.drawable.china, R.drawable.australia, R.drawable.portugle, R.drawable.america, R.drawable.new_zealand};\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\nsimpleList = (ListView) findViewById(R.id.simpleListView);\r\nCustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), countryList, flags);\r\nsimpleList.setAdapter(customAdapter);\r\n}\r\n}\r\n<\/pre>\n
    Step 4: <\/strong><\/span>Now create another class Custom Adapter which will extend BaseAdapter. Below is the code of CustomAdapter.java<\/p>\n
    package com.abhiandroid.listbaseexample;\r\n\r\nimport android.content.Context;\r\nimport android.media.Image;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseAdapter;\r\nimport android.widget.ImageView;\r\nimport android.widget.TextView;\r\n\r\nimport java.util.zip.Inflater;\r\n\r\npublic class CustomAdapter extends BaseAdapter {\r\nContext context;\r\nString countryList[];\r\nint flags[];\r\nLayoutInflater inflter;\r\n\r\npublic CustomAdapter(Context applicationContext, String[] countryList, int[] flags) {\r\nthis.context = context;\r\nthis.countryList = countryList;\r\nthis.flags = flags;\r\ninflter = (LayoutInflater.from<\/em>(applicationContext));\r\n}\r\n\r\n@Override\r\npublic int getCount() {\r\nreturn countryList.length;\r\n}\r\n\r\n@Override\r\npublic Object getItem(int i) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic long getItemId(int i) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic View getView(int i, View view, ViewGroup viewGroup) {\r\nview = inflter.inflate(R.layout.activity_listview<\/em>, null);\r\nTextView country = (TextView) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0view.findViewById(R.id.textView<\/em>);\r\nImageView icon = (ImageView) view.findViewById(R.id.icon<\/em>);\r\ncountry.setText(countryList[i]);\r\nicon.setImageResource(flags[i]);\r\nreturn view;\r\n}\r\n<\/pre>\n
    Output:<\/strong><\/span><\/p>\n
    Now run the App in Emulator and it will show you name of countries along with flags. Below is the output screen:<\/p>\n
    \"List<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
    List of scrollable items can be displayed in Android using ListView. It helps you to displaying the data in the form of a scrollable list. Users can then select any list item by clicking on it. ListView is default scrollable so we do not need to use scroll View or anything else with ListView. ListView … Continue reading ListView Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-416","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"ListView Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on list view, adapters and attributes with example, images and code in Android Studio. Also find details about Array Adapter and Base Adapter\/Custom Adapter.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/listview\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/416\/revisions"}],"predecessor-version":[{"id":2639,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/416\/revisions\/2639"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}