The animation effect involves a tab title that appears to sink into place.
Here's the layout structure:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:id="@+id/top_bar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal">
<RelativeLayout
android:id="@+id/layout_item_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/item_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="All"
android:layout_centerHorizontal="true"
android:textColor="#FF5722"
android:layout_centerInParent="true"/>
<View
android:id="@+id/item_one_bar"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="1px"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FF5722" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_item_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/item_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pending"
android:layout_margin="10dp"
android:textColor="#9E9E9E"
android:layout_centerInParent="true"/>
<View
android:id="@+id/item_two_bar"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="1px"
android:background="#FF5722"
android:visibility="gone"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_item_three"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/item_three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Answered"
android:layout_margin="10dp"
android:layout_centerInParent="true"
android:textColor="#9E9E9E"/>
<View
android:id="@+id/item_three_bar"
android:layout_width="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="1px"
android:background="#FF5722"
android:layout_alignParentBottom="true"
android:visibility="gone"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_item_four"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/item_four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Expired"
android:layout_margin="10dp"
android:textColor="#9E9E9E"
android:layout_centerInParent="true"/>
<View
android:id="@+id/item_four_bar"
android:layout_width="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="1px"
android:background="#FF5722"
android:layout_alignParentBottom="true"
android:visibility="gone"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_item_five"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/item_five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rejected"
android:layout_margin="10dp"
android:textColor="#9E9E9E"
android:layout_centerInParent="true"/>
<View
android:id="@+id/item_five_bar"
android:layout_width="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="1px"
android:background="#FF5722"
android:layout_alignParentBottom="true"
android:visibility="gone"/>
</RelativeLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_height="1px"
android:background="#CCCCCC" />
</LinearLayout>
The implementation relies on the visual behavior of views with in the layout. Below is the corresponding Java code:
public void onTabClick(View view) {
resetTabs();
switch (view.getId()) {
case R.id.layout_item_one:
selectTab(0);
break;
case R.id.layout_item_two:
selectTab(1);
break;
case R.id.layout_item_three:
selectTab(2);
break;
case R.id.layout_item_four:
selectTab(3);
break;
case R.id.layout_item_five:
selectTab(4);
break;
}
}
private void resetTabs() {
int defaultColor = getResources().getColor(R.color.fontTextColor);
mItemOne.setTextColor(defaultColor);
mBarOne.setVisibility(View.GONE);
mItemTwo.setTextColor(defaultColor);
mBarTwo.setVisibility(View.GONE);
mItemThree.setTextColor(defaultColor);
mBarThree.setVisibility(View.GONE);
mItemFour.setTextColor(defaultColor);
mBarFour.setVisibility(View.GONE);
mItemFive.setTextColor(defaultColor);
mBarFive.setVisibility(View.GONE);
}
private void selectTab(int index) {
int activeColor = getResources().getColor(R.color.mainColor);
if (index == 0) {
mItemOne.setTextColor(activeColor);
mBarOne.setVisibility(View.VISIBLE);
} else if (index == 1) {
mItemTwo.setTextColor(activeColor);
mBarTwo.setVisibility(View.VISIBLE);
} else if (index == 2) {
mItemThree.setTextColor(activeColor);
mBarThree.setVisibility(View.VISIBLE);
} else if (index == 3) {
mItemFour.setTextColor(activeColor);
mBarFour.setVisibility(View.VISIBLE);
} else if (index == 4) {
mItemFive.setTextColor(activeColor);
mBarFive.setVisibility(View.VISIBLE);
}
mPager.setCurrentItem(index);
}
This approach produces the desired visual effect simply by managing visibility states of the indicator views. If you prefer to disable the animation effect, you can use setVisibility(View.INVISIBLE) instead of View.GONE in both XML and code.
For example, in XML:
<View
android:id="@+id/item_five_bar"
android:layout_width="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_height="1px"
android:background="#FF5722"
android:layout_alignParentBottom="true"
android:visibility="invisible"/>