How to create custom tabs with custom tab indicator using tab layout.
The following is the layout which includes tab layout :-
-----------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android";
xmlns:app="http://schemas.android.com/apk/res-auto";
android:orientation="vertical">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android";
xmlns:app="http://schemas.android.com/apk/res-auto";
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DADEE0">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ivBack"
android:src="@drawable/ic_keyboard_arrow_left_black_24dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tvSchoolName"
android:text="PSG Public Schools"
android:layout_below="@+id/ivBack"
android:layout_marginLeft="50dp"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tvSchoolAddr"
android:layout_below="@+id/tvSchoolName"
android:text="Avinashi Rd, PSG Institute, Peelamedu"
android:layout_marginLeft="50dp"/>
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="@+id/ivLocation"
android:src="@drawable/ic_place_black_24dp"
android:layout_below="@+id/tvSchoolAddr"
android:layout_marginLeft="50dp"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tvLocation"
android:text="Coimbatore"
android:layout_below="@id/tvSchoolAddr"
android:layout_toRightOf="@+id/ivLocation"
android:layout_marginTop="25dp"
android:layout_marginLeft="10dp"
android:textSize="15sp"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="45dp"
android:layout_height="45dp"
android:id="@+id/fabActivity"
android:layout_toRightOf="@+id/tvLocation"
android:layout_below="@+id/tvSchoolAddr"
android:layout_marginLeft="130dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
/>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:layout_width="wrap_content"
android:layout_height="80dp"
android:id="@+id/tabs"
app:tabMode="fixed"
app:tabGravity="fill"
android:background="#fff"
app:tabIndicatorHeight="0dp"
app:tabIndicatorColor="#000"
>
</android.support.design.widget.TabLayout>
<in.lxltech.citycoordinator.CustomViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>
The following is the custom tab layout :-
--------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android";
android:layout_height="wrap_content" >
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="@+id/ivIcon"
android:src="@drawable/ic_event_note_white_24dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tvTitle"
android:fontFamily="sans-serif"
android:textAllCaps="false"
android:layout_below="@+id/ivIcon"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:textSize="16sp"
android:text="info"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:id="@+id/tabDivider"
android:background="#000"
android:alpha="0.2"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@+id/tvTitle"/>
<View
android:layout_width="85dp"
android:layout_height="3dp"
android:id="@+id/tabIndicator"
android:layout_alignParentBottom="true"
android:background="#000"
android:alpha="0.6"/>
</RelativeLayout>
<https://lh3.googleusercontent.com/-3DF8n3Uu9qg/V6xmXEfuniI/AAAAAAAAB9s/WFVJ3GHHbkEOi895RspM8eD6hJ5vQU4KwCLcB/s1600/Screenshot_20160811-151039.png>
By using the above layouts, i'm getting some space on the left side of the
tab indicator. how to get rid of that space ?
--
You received this message because you are subscribed to the Google Groups
"Android Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/android-developers.
To view this discussion on the web visit
https://groups.google.com/d/msgid/android-developers/f227fc45-c6b3-4fee-8e47-a118e7041d1a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
