Dharmendra
Dharmendra

Reputation: 33996

Vertical tabs in Android

I want to make vertical tabs in Android like below image. enter image description here

I had see example for vertical tabs from below link.

Click here

In this link answer has some comments and in comments they had share code but the link of mega-upload is expired.

I had try many ways but not able to display tabs vertical. When I am trying according to link the tabs can not be display. Please help me

Upvotes: 14

Views: 21690

Answers (1)

blessanm86
blessanm86

Reputation: 31779

When I use tabs, I normally just hide the tabwidget tag by setting android visibility as gone.

And add buttons to act as the tab buttons like

THIS IS MODIFIED TO MAKE VERTICAL TAB BUTTONS

<?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="horizontal" 
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <FrameLayout android:layout_width="0dip" 
            android:layout_height="fill_parent" android:layout_weight="0.2">
        <TabWidget android:id="@android:id/tabs" 
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:visibility="gone"/>
            <LinearLayout android:layout_width="fill_parent"  
                android:layout_height="fill_parent"
                android:orientation="vertical">
                <Button android:layout_height="0dip" 
                    android:layout_width="fill_parent" 
                    android:layout_weight="1.0"
                android:background="@drawable/ic_tab_artists"               
                    android:id="@+id/artist_id" 
                    android:onClick="tabHandler"/>
                <Button android:layout_height="0dip" 
                    android:layout_width="fill_parent" 
                    android:layout_weight="1.0"
                android:background="@drawable/ic_tab_artists"  
                    android:id="@+id/album_id" 
                    android:onClick="tabHandler"/>
                <Button android:layout_height="0dip" 
                    android:layout_width="fill_parent" 
                    android:layout_weight="1.0"
                android:background="@drawable/ic_tab_artists"   
                    android:id="@+id/song_id" 
                    android:onClick="tabHandler"/>
        </LinearLayout> 
    </FrameLayout>       
    <FrameLayout android:id="@android:id/tabcontent" 
        android:layout_width="0dip" 
        android:layout_height="fill_parent" android:layout_weight="0.8"/>
</LinearLayout>

and I add a button click handler

public void tabHandler(View target){
    artistButton.setSelected(false);
    albumButton.setSelected(false);
    songButton.setSelected(false);
    if(target.getId() == R.id.artist_id){
        tabHost.setCurrentTab(0);
        artistButton.setSelected(true);
    } else if(target.getId() == R.id.album_id){
        tabHost.setCurrentTab(1);
        albumButton.setSelected(true);
    } else if(target.getId() == R.id.song_id){
        tabHost.setCurrentTab(2);
        songButton.setSelected(true);
    }
}

When I use this method, it gives me more freedom to style the tab buttons. The above xml is for horizontal tab buttons but you easily make it vertical but editing it a bit. Just make sure you need the Tahbost,Tabwidget and a framelayout with @android:id/tabcontent as the id.

Upvotes: 12

Related Questions