Search code examples
androidandroid-layoutwhatsappui-design

Android App UI Design : WhatsApp like Tabs

How can I change the width of single Tab in a TabLayout? setting app:tabMode="scrollable" in xml layout will change width of all tab items. But I want to change the width of individual tab items, or to be specific, the first tab item.

A good example of what I am trying to do is the camera tab in WhatsApp's home screen. Width of that tab is just enough to show the icon.

How can I achieve the same result? WhatsApp Homescreen tabs

Below is my layout xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.myapplication.WolfApp">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ffffff">

        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
Solution

  • Not the answer to your question, but, I just decompiled the WhatsApp apk, and found the layout file which I think is of the home screen, here:

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@id/root_view" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:whatsapp="http://schemas.android.com/apk/res-auto">
    <FrameLayout android:id="@id/camera_frame" android:layout_width="fill_parent" android:layout_height="fill_parent" />
    <LinearLayout android:orientation="vertical" android:fitsSystemWindows="true" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <RelativeLayout android:id="@id/call_notification" android:background="@drawable/call_duration_bar_background" android:paddingLeft="16.0dip" android:paddingTop="8.0dip" android:paddingRight="16.0dip" android:paddingBottom="8.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:textSize="17.0sp" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/tap_to_return_to_call" android:layout_toLeftOf="@id/call_notification_timer" android:layout_alignParentLeft="true" />
            <TextView android:textSize="16.0sp" android:textColor="@android:color/white" android:gravity="center_vertical" android:id="@id/call_notification_timer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textAllCaps="true" />
        </RelativeLayout>
        <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <FrameLayout android:id="@id/pager_holder" android:paddingTop="0.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <view android:id="@id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent" class="com.whatsapp.HomeActivity$TabsPager" />
            </FrameLayout>
            <LinearLayout android:orientation="vertical" android:id="@id/header" android:background="?colorPrimary" android:layout_width="fill_parent" android:layout_height="wrap_content">
                <include layout="@layout/toolbar" />
                <com.whatsapp.HomePagerSlidingTabStrip android:id="@id/tabs" android:background="@color/primary" android:layout_width="fill_parent" android:layout_height="@dimen/tab_height" whatsapp:pstsIndicatorColor="@color/tab_indicator" whatsapp:pstsDividerColor="@android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />
            </LinearLayout>
            <FrameLayout android:id="@id/search_holder" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" />
            <ImageView android:layout_gravity="bottom|center|right" android:id="@id/fab" android:background="@drawable/input_circle_green" android:layout_width="@dimen/submit_button_size" android:layout_height="@dimen/submit_button_size" android:layout_margin="16.0dip" android:scaleType="center" />
            <ImageView android:layout_gravity="bottom|center|right" android:id="@id/fab_aux" android:background="@drawable/input_circle_grey" android:visibility="gone" android:layout_width="46.0dip" android:layout_height="46.0dip" android:layout_marginRight="21.0dip" android:layout_marginBottom="88.0dip" android:scaleType="center" android:contentDescription="@string/menuitem_new_text_status" />
        </FrameLayout>
    </LinearLayout>
    <FrameLayout android:id="@id/preview_container" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</FrameLayout>

    I think the line,

    <com.whatsapp.HomePagerSlidingTabStrip android:id="@id/tabs" android:background="@color/primary" android:layout_width="fill_parent" android:layout_height="@dimen/tab_height" whatsapp:pstsIndicatorColor="@color/tab_indicator" whatsapp:pstsDividerColor="@android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />

    Is the tab layout you have given in the question.

    Also there is another layout file, which contains the custom view for tab title. The tab title in whatsapp ha badges for message counter, missed calls etc

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:gravity="center" android:layout_gravity="center" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="48.0dip" android:animateLayoutChanges="true">
        <TextView android:textSize="14.0sp" android:textStyle="bold" android:textColor="@android:color/white" android:ellipsize="end" android:id="@id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1.0" android:textAllCaps="true" />
        <TextView android:textSize="11.0sp" android:textStyle="bold" android:textColor="@color/primary" android:ellipsize="end" android:gravity="center" android:layout_gravity="center_vertical" android:id="@id/badge" android:background="@drawable/tab_badge_background_inactive" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5.0dip" android:minWidth="16.0dip" android:singleLine="true" />
        <ImageView android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </LinearLayout>
</FrameLayout>

    My point is it may not be that easy to get what you are looking for. WhatsApp did that using custom views and custom tablayout.

    If anyone knows a simpler solution, that would be great.