CODEWITHSUNDEEP
android
menu_on_top
menu_on_top

Reputation: 2613

How to create a tabView like the image

I would like to create a tabView like in the picture.

enter image description here

the gradient tab is the one i have clicked

but i dont want to be like this for example

http://www.androidhive.info/2011/08/android-tab-layout-tutorial/

is that possible to be created from my .xml?any help please?

EDIT: .xml code

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/header"   
        android:layout_weight="1"   
             />  

    <ImageButton   
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/header_btn1"      
        />           

    <ImageButton        
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/header_btn2"  
        />

    <ImageButton  
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@drawable/header_btn3"
        />
</LinearLayout>

Upvotes: 0

Views: 715

Answers (1)

Kevin Galligan
Kevin Galligan

Reputation: 17302

I wouldn't use the actual "tab" components in Android. In every project that we originally had tabs, we removed them and just used buttons that looked like tabs, and made everything into its own activity.

I would do something like the following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical">

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="80dp"
            android:orientation="horizontal"
            android:background="#000000">
        <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:background="#68cffa">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="hello"
                    android:layout_gravity="center_horizontal|center_vertical"/>

        </LinearLayout>
        <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#68cffa">
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/star"/>
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/highlight"
                    android:id="@+id/star1"
                    android:visibility="gone"/>
        </FrameLayout>
        <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#68cffa">
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/star"/>
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/highlight"
                    android:id="@+id/star2"
                    android:visibility="gone"/>
        </FrameLayout>
        <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#68cffa">
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/star"/>
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/highlight"
                    android:id="@+id/star3"
                    android:visibility="gone"/>
        </FrameLayout>

    </LinearLayout>


</LinearLayout>

Make the star image the width/height you want for the whole blue block, and leave the area around the star transparent. Show/hide the highlight images based on which tab you're currently in.

Upvotes: 2

Related Questions