how to create custom tabs with custom tab indicator using tab layout

Pradeepkumar Reddy

New member
Aug 2, 2016
3
0
0
i'm trying to create custom tabs using tablayout. The following layout includes tablayout :-

<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>

By using above layouts, there is some space on the leftside of the tab indicator. Can somebody tell me how to get rid of that space.
 

Members online

Forum statistics

Threads
956,227
Messages
6,967,002
Members
3,163,487
Latest member
Christoph