Android Tabs containing ListViews with images and text since pre Honeycomb Versions using Sherlock library

November 5, 2012
By

This article is an extension to the article “Adding Navigation tabs containing listview to Action Bar in Pre Honeycomb versions using Sherlock library“. Here as an add-on we will list images also in the listview along with text. We will power this application with Sherlock library to display action bar from pre Honeycomb versions.

This application is developed in Eclipse (4.2.0) with ADT plugin(20.0.3) and Android SDK(R20.0.3).


1. Setting up Sherlock library for Eclipse 4.2.0

Please see the article titled  “Setting up Action Bar Sherlock Library 4.2.0 for Eclipse IDE“, for setting up the Sherlock library for Eclipse 4.2.0


2. Create a new Android application project namely “ActionBarSherlockNavTabWithImages”

Creating a new Android application project

Figure 1 : Creating a new Android application project


3. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


4. Create a blank  activity

Create a blank Activity

Figure 3 : Create a blank Activity


5. Enter MainActivity details

Enter MainActivity Details

Figure 4 : Enter MainActivity Details


6. Delete Android’s backward compatibility support library

By default Eclipse ( 4.2.0) adds Android Support Library to  Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”


7. Add Sherlock library to the project

Adding Sherlock Library to this project

Figure 5 : Adding Sherlock Library to this project


8. Download the given below file and extract to drawable-ldpi


9. Download the given below file and extract to drawable-mdpi


10. Download the given below file and extract to drawable-hdpi


11. Create a new folder drawable in res and create a new file namely android.xml with the given below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/android_selected" />
    <item
        android:drawable="@drawable/android_unselected" />
</selector>

12. Create new file namely apple.xml in res/drawable directory created in the above step and add the given below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/apple_selected" />

    <item
        android:drawable="@drawable/apple_unselected" />
</selector>


13. Download the given below file and extract to drawable


14. Create the file src/in/wptrafficanalyzer/actionbarsherlocknavtabwithimages/AndroidFragment.java


package in.wptrafficanalyzer.actionbarsherlocknavtabwithimages;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.SimpleAdapter;

import com.actionbarsherlock.app.SherlockListFragment;

public class AndroidFragment extends SherlockListFragment{

    /** An array of items to display */
    String android_versions[] = new String[]{
        "Jelly Bean",
        "IceCream Sandwich",
        "HoneyComb",
        "GingerBread",
        "Froyo"
    };

    /** An array of items to display */
    int android_images[] = new int[]{
        R.drawable.jb,
        R.drawable.ics,
        R.drawable.honeycomb,
        R.drawable.gingerbread,
        R.drawable.froyo
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        // Each row in the list stores country name, currency and flag
        List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

        for(int i=0;i<5;i++){
            HashMap<String, String> hm = new HashMap<String,String>();
            hm.put("txt", android_versions[i]);
            hm.put("img", Integer.toString(android_images[i]  ) );
            aList.add(hm);
        }

        // Keys used in Hashmap
        String[] from = { "img","txt" };

        // Ids of views in listview_layout
        int[] to = { R.id.img,R.id.txt};

        // Instantiating an adapter to store each items
        // R.layout.listview_layout defines the layout of each item
        SimpleAdapter adapter = new SimpleAdapter(getActivity().getBaseContext(), aList, R.layout.listview_layout, from, to);

        // Setting the adapter to the listView
        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);
    }
}


15. Create the file src/in/wptrafficanalyzer/actionbarsherlocknavtabwithimages/AppleFragment.java


package in.wptrafficanalyzer.actionbarsherlocknavtabwithimages;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.SimpleAdapter;

import com.actionbarsherlock.app.SherlockListFragment;

public class AppleFragment extends SherlockListFragment{

    /** An array of items to display*/
    String apple_versions[] = new String[]{
        "Mountain Lion",
        "Lion",
        "Snow Leopard",
        "Leopard ",
        "Tiger",
        "Panther"
    };

    /** An array of images to display*/
    int apple_images[] = new int[]{
        R.drawable.mountainlion,
        R.drawable.lion,
        R.drawable.snowleopard,
        R.drawable.leopard,
        R.drawable.tiger,
        R.drawable.panther
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){

        // Each row in the list stores country name, currency and flag
        List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

        for(int i=0;i<5;i++){
            HashMap<String, String> hm = new HashMap<String,String>();
            hm.put("txt", apple_versions[i]);
            hm.put("img", Integer.toString(apple_images[i]  ) );
            aList.add(hm);
        }

        // Keys used in Hashmap
        String[] from = { "img","txt" };

        // Ids of views in listview_layout
        int[] to = { R.id.img,R.id.txt};

        // Instantiating an adapter to store each items
        // R.layout.listview_layout defines the layout of each item
        SimpleAdapter adapter = new SimpleAdapter(getActivity().getBaseContext(), aList, R.layout.listview_layout, from, to);

        // Setting the adapter to the listView
        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);
    }
}


16. Create the file src/in/wptrafficanalyzer/actionbarsherlocknavtabwithimages/CustomTabListener.java


package in.wptrafficanalyzer.actionbarsherlocknavtabwithimages;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;

import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.ActionBar.TabListener;
import com.actionbarsherlock.app.SherlockFragmentActivity;

public class CustomTabListener<T extends Fragment> implements TabListener {
    private Fragment mFragment;
    private final SherlockFragmentActivity mActivity;
    private final String mTag;
    private final Class<T> mClass;

    public CustomTabListener(SherlockFragmentActivity activity, String tag, Class<T> clz){
        mActivity = activity;
        mTag = tag;
        mClass = clz;
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // Nothing special to do here for this application
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        mFragment = mActivity.getSupportFragmentManager().findFragmentByTag(mTag);
        if(mFragment==null){
            mFragment = Fragment.instantiate(mActivity, mClass.getName());
            ft.add(android.R.id.content,mFragment, mTag);
        }else{
            ft.attach(mFragment);
        }
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if(mFragment!=null) {
            ft.detach(mFragment);
        }
    }
}


17. Update src/in/wptrafficanalyzer/actionbarsherlocknavtabwithimages/MainActivity.java


package in.wptrafficanalyzer.actionbarsherlocknavtabwithimages;

import android.os.Bundle;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockFragmentActivity;

public class MainActivity extends SherlockFragmentActivity  {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Getting an instance of action bar
        ActionBar actionBar = getSupportActionBar();

        // Enabling Tab Navigation mode for this action bar
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Enabling Title
        actionBar.setDisplayShowTitleEnabled(true);

        // Creating Android Tab
        Tab tab1 = actionBar.newTab()
            .setText("Android")
            .setTabListener(new CustomTabListener<AndroidFragment>(this, "android", AndroidFragment.class) )
            .setIcon(R.drawable.android);

        // Adding Android Tab to acton bar
        actionBar.addTab(tab1);

        // Creating Apple Tab
        Tab tab2 = actionBar.newTab()
            .setText("Apple")
            .setTabListener(new CustomTabListener<AppleFragment>(this, "apple", AppleFragment.class))
            .setIcon(R.drawable.apple);

        // Adding Apple Tab to action bar
        actionBar.addTab(tab2);

        // Orientation Change Occurred
        if(savedInstanceState!=null){
            int currentTabIndex = savedInstanceState.getInt("tab_index");
            actionBar.setSelectedNavigationItem(currentTabIndex);
        }
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        int currentTabIndex = getSupportActionBar().getSelectedNavigationIndex();
        outState.putInt("tab_index", currentTabIndex);
        super.onSaveInstanceState(outState);
    }
}


18. Update the file AndroidManifest.xml


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionbarsherlocknavtabwithimages"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/Theme.Sherlock" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

19. Application in execution

Screenshot of the application in execution

Figure 6 : Screenshot of the application in execution


20. Download


21. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , ,

3 Responses to Android Tabs containing ListViews with images and text since pre Honeycomb Versions using Sherlock library

  1. koshuni on May 1, 2013 at 11:18 pm

    I have seen your programme about :

    “Android Tabs containing ListViews with images and
    text since pre Honeycomb Versions using Sherlock library”

    how can I do if I want the image loading by url?

  2. Miguel on June 7, 2013 at 12:16 pm

    Thanks for this great example.

    How can i do to have a detailed view of a item of the listview? i have seen that you have done that on other posts but no in this one and i tried code from other ones but didn’t worked.

    Best regards

  3. prakash on January 30, 2016 at 12:46 pm

    This is very good very helpful but , Sir please tells us about these xml like main.xml, android.xml and apple.xml

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner