How to make 4 Tabs and 2 ImageView's in ToolBar equal in size?

Question

I have created the following XML layout. You can see that in it I have a ToolBar that contains a LinearLayout with 3 view in it: a TabLayout and 2 imageview. I want to set the width of each image view as the width of each Tab inside the resulted TabLayout, so that it would appear as if I have 6 tabs with same size but two of them should not be tabs.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="6" >

            <android.support.design.widget.TabLayout
                android:layout_weight="4"
                android:id="@+id/tabs"
                style="@style/tab_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />

            <ImageView
                android:layout_weight="1"
                android:id="@+id/ivSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic_tab1"/>

            <ImageView
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic_tab1"/>
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"></android.support.v4.view.ViewPager>
</RelativeLayout>
<!-- The navigation drawer -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    android:background="#111"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp" />

What I have done: Now as you can see in the layout I tried to reach the desired result with weights in the LinearLayout. but the result is unsatisfying. And I have no other idea how to perform this.

The question: Has someone done something like this and can provide some input on this matter?

Answer 1

The solution is to use TabLayout as following:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal"
android:background="?attr/colorPrimary">

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="0dp"
    android:layout_height="?attr/actionBarSize"
    android:layout_weight="4"/>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_weight="1">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/icon5"/>

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_weight="1">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/icon6"/>

</LinearLayout>

And populate it using the following code:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); 
tabLayout.setupWithViewPager(mViewPager); 

tabLayout.getTabAt(0).setIcon(R.drawable.icon1); 
....  
tabLayout.getTabAt(4).setIcon(R.drawable.icon6); 

The complete solution can be found here:

How to create new LinkedIn app style ActionBar with Tabs inside it?