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”
3. Design application launcher icon
4. Create a blank activity
5. 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
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
20. Download

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

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
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?
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
This is very good very helpful but , Sir please tells us about these xml like main.xml, android.xml and apple.xml