Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make Tab Custom Layout?

    @rajshekhar.tiwari
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 161
    Comment on it

    In the below example code, I have created a Tab Custom Layout. In Tab Layout I have added Text with icon. Here first I have created two custom tab layouts Then I have created a method setupTabIcons() and inflate Custom layouts for tabOne and tabTwo.  
    You can see below example code it clearly describes "How to make Tab Custom Layout?"

     

     
    Step(1)I have created First a setupTabIcons() method-

    1.  private void setupTabIcons() {
    2.  
    3.             //inflate custom layout for tabOne
    4.         View tabOne = (View) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab_myprofile, null);
    5.         TextView view = (TextView) tabOne.findViewById(R.id.tab);
    6.         ImageView view1 = (ImageView) tabOne.findViewById(R.id.img_male);
    7.  
    8.         //inflate custom layout for tabTwo
    9.         View tabTwo = (View) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab_myprofile2, null);
    10.         TextView v = (TextView) tabTwo.findViewById(R.id.tab2);
    11.         ImageView v2 = (ImageView) tabTwo.findViewById(R.id.img_female);
    12.  
    13.         // position  tabs(tabOne,tabTwo)
    14.         
    15.         tabLayout.getTabAt(0).setCustomView(tabOne);
    16.         tabLayout.getTabAt(1).setCustomView(tabTwo);
    17.  
    18.     }


    Step(2)-Created custom_tab_myprofile .xml layout for tabOne-

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:layout_width="match_parent"
    4.     android:gravity="center"
    5.     android:layout_height="wrap_content">
    6.     <ImageView
    7.         android:id="@+id/img_male"
    8.         android:layout_width="wrap_content"
    9.         android:layout_height="wrap_content"
    10.         android:background="@drawable/male"/>
    11.   <TextView
    12.     android:layout_toRightOf="@+id/img_male"
    13.     android:layout_width="wrap_content"
    14.     android:layout_height="wrap_content"
    15.     android:id="@+id/tab"
    16.     android:text="Male"
    17.     android:paddingLeft="5dp"
    18.     android:textColor="#1e1d1d"
    19.     android:textSize="20sp"/>
    20. </RelativeLayout>

    Step(3)-Created custom_tab_myprofile2 .xml layout for tabTwo-
     

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:layout_width="match_parent"
    4.    android:gravity="center"
    5.     android:layout_height="wrap_content">
    6.     <ImageView
    7.         android:id="@+id/img_female"
    8.         android:layout_width="wrap_content"
    9.         android:layout_height="wrap_content"
    10.         android:background="@drawable/female"/>
    11.     <TextView
    12.         android:layout_toRightOf="@+id/img_female"
    13.         android:layout_width="wrap_content"
    14.         android:layout_height="wrap_content"
    15.         android:id="@+id/tab2"
    16.         android:text="Female"
    17.         android:paddingLeft="5dp"
    18.         android:textColor="#1d1c1c"
    19.         android:textSize="20sp"/>
    20. </RelativeLayout>
    21.  
    22.  

     

    Android TabCustom layout
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: