Search code examples
androidandroid-relativelayoutandroid-tablayout

Align a View to Right of TabLayout in android

I want to show a Tablayout in an activity and after that TabLayout want to show a ImageButton which will be right Aligned. I am using the below layout for this but the Tabs are not shown properly and the last tab is being cropped. I want to show the scrollable tabs and an ImageButton after TabLayout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginLeft="@dimen/margin_5dp"
android:layout_marginStart="@dimen/margin_5dp"
android:layout_marginRight="@dimen/margin_5dp"
android:layout_marginEnd="@dimen/margin_5dp"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="center"
    android:background="@color/gray_background"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageButton
    android:background="@color/gray_background"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:scaleType="center"
    android:id="@+id/add_sticker_store"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginLeft="@dimen/margin_5dp"
    android:src="@drawable/ic_action_new"/>


<android.support.v4.view.ViewPager
    android:layout_below="@id/tabs"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/gray_background"
    android:layout_alignParentBottom="true"/>

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_below="@id/tabs"
    android:background="@color/white"/>

Please check the screenshot of the view in which last tab is getting cropped. Please help if anyone know how to achieve this. enter image description here

Please help, thanks a lot in advanced.

Solution

  • Add a rule between your TabLayout and ImageButton. 

    <ImageButton
    android:background="@color/gray_background"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:scaleType="center"
    android:id="@+id/add_sticker_store"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginLeft="@dimen/margin_5dp"
    android:src="@drawable/ic_action_new"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="center"
    android:background="@color/gray_background"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_toLeftOf="@+id/add_sticker_store" />