Search code examples
androidxmltabsandroid-tablayout

Why are images in the centre on TabLayout?


I make different designs for different screen sizes.Normal screen size images look the way I want.I encountered this error and couldn't find a solution. Changing the size of Tablayout did not work.enter image description here

enter image description here

I use this same code in two designs

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:theme="@style/AppBarOverlay">

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@drawable/banner"
        app:layout_anchor="@+id/appBarLayout"

        app:layout_anchorGravity="center"
        app:tabIndicatorColor="#00b7fa">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/buyutec50" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/plus50" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/table50" />

    </com.google.android.material.tabs.TabLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>


Solution

  • Add app:tabMaxWidth="0dp" to all of your Tab items.

    <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:tabMaxWidth="0dp"
                android:icon="@drawable/buyutec50" />