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”
Figure 1 : Creating a new Android application project
3. Design application launcher icon
Figure 2 : Design Application Launcher Icon
4. Create a blank activity
Figure 3 : Create a blank Activity
5. 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
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
Figure 6 : Screenshot of the 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
Ready to test your knowledge in Android? Take this quiz :
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