Android Tab Navigation between Fragments

Question

I'd like to know how these kind of navigation tabs in the following screen were realized:

http://s1.directupload.net/images/user/140803/6pg9mpk7.png

Since these navigation tabs are used in several menus of the phone it should be a standard android layout item. Did they use FragmentTabHost? If yes, how can you manage to mark the selected tab like this? I just found solutions where the selected tab was marked with an underline.

Would be nice if someone could help with an explanation or tutorial link.

Thanks in advance.

Answer 1

So I found a solution for this some days ago. I used this tutorial to realize these kinds of tabs:

http://maxalley.wordpress.com/2013/05/18/android-creating-a-tab-layout-with-fragmenttabhost-and-fragments/

There are multiple tutorials like these, but there is a problem with this if you're using the Holo.Light Theme that doesn't get mentioned really often. The issue there is that images just don't show up in the tabs and you can only see the text.

To fix this, I had to make sure to include the Tab.Widget for this theme in the style.xml:

<style name="MyAppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item>
</style>

Now the images of the Tabs get shown even when I use Holo.Light. If you're using Theme.Black or Light, this problem shouldn't appear by the way.

I found this solution thanks to the answer from Andrei Buneyeu to this older question: Icon in Tab is not showing up

Answer 2

You need to create a the xml file as follows:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </LinearLayout>
</TabHost>

For each icon, you need to create the following xml layout file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/photos_gray"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/photos_white" />
</selector>

The drawables need to be in the drawables folder.

The activity should be coded similar to the code below:

public class AndroidTabLayoutActivity extends TabActivity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost = getTabHost();

        // Tab for Groups
        TabSpec groupSpec = tabHost.newTabSpec("Gruppen");
        // setting Title and Icon for the Tab
        photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_photos_tab));
        Intent photosIntent = new Intent(this, GroupActivity.class);
        photospec.setContent(photosIntent);

        // Tab for Telephones
        TabSpec telephoneSpec = tabHost.newTabSpec("Telefon");        
        songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab));
        Intent songsIntent = new Intent(this, TelephoneActivity.class);
        songspec.setContent(songsIntent);

        // Tab for Contacts
        TabSpec contactSpec = tabHost.newTabSpec("Kontacte");
        videospec.setIndicator("Videos", getResources().getDrawable(R.drawable.icon_videos_tab));
        Intent videosIntent = new Intent(this, ContactActivity.class);
        videospec.setContent(videosIntent);

        // Adding all TabSpec to TabHost
        tabHost.addTab(groupSpec);
        tabHost.addTab(telephoneSpec);
        tabHost.addTab(contactSpec);
    }
}

Finally, you need to create the two files (xml and class) for each tab:

public class KontactActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.kontacte_layout);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView android:text="Contacts here"
            android:padding="15dip"
            android:textSize="18dip"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

</LinearLayout>