In Android Tab Layout Tutorial i explained how to implement a tab view. This tutorial is about implementing list view inside a tab layout. Everything is same except tabs will have listview inside it. List data is displayed by fetching json by making http request. I took an example of simple mailbox which will contains two list views for inbox, outbox messages and a profile tab.
In this example i am displaying list view in each tab where the list data is fetched from a JSON.
Get Inbox JSON here
Get Outbox JSON here.
And get Profile JSON here
Create new Project
So let’s start with creation of new project in Eclipse IDE.
1. Create a new project File -> New -> Android Project and fill out required details.
2. Open your Main Activity and extend the class from TabActivity.
3. Now open your main.xml under res -> layout folder and type the following code to create a tabview.
4. Create three activities for 3 tabs. I am creating 3 activities as InboxActivity.java, OutboxActvity.java and ProfileActivity.java and extend the classes from ListActivity.
Note that ProfileActivity.java in not ListActivity.
5. Now create xml layouts for the list views. Here we have two list views and a normal layout. So create totally 5 xml layouts. inbox_list.xml, outbox_list.xml, profile.xml, inbox_list_item.xml (inbox listview single row item), outbox_list_item.xml (outbox listview single row item)
inbox_list.xml
inbox_list_item.xml
outbox_list.xml
outbox_list_item.xml
profile.xml
6. Each and every tab needs an icon so design icons for each tab. We need three dimensions of each icon. Design each icon in 48 x 48 px, 32 x 32 px and 24 x 24 px and place them in drawable-hdpi, drawable-mdpi and drawable-ldpi respectively. See following diagram for your guidance
7. Android icon states will be define in xml files with default and hover state configurations. For three icons we need the icon state configuration files. So create three 3 xml files under drawable-hdpi directory. Type the following code for icon states.
8. Now open AndroidTabAndListView.java which is Main Activity and type the following code. In the following code we are creating three TabSepcs and adding them to TabHost.
9. Now open your project make sure that you an entry of new activity name in AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below. Also don’t forgot to add INTERNET Permissions as we are getting JSON by making http request.
10. If you run your project now you will see tabs running without listviews. So all we need to do is implement listview in each tab activity. So open you individual tab activity classes and try to implement listview. If you are new to ListView i suggest you to go through Android ListView Tutorial once.
InboxActivity.java
OutboxActivity.java
ProfileActivity.java
11. Finally create a class called JSONParser.java and paste the following code as we need a parser class to parse the json.
12. Now Run & Test your project.
This image is for thumbnail purpose