FrontEnd/Android

[Android] TabLayout의 Tab의 가로 길이가 태블릿에서 좁게 표시되는 문제

Satisfaction 2021. 5. 10. 20:24

하단의 탭 레이아웃의 탭들이 가로를 꽉 채우지 않는 문제가 발견되었다.

 

재미있는 점은 스마트폰에서는 정상적으로 표시되지만, 태블릿에서만 이렇게 쪼그라든다는 점이다.

 

해결법

<com.google.android.material.tabs.TabLayout
            android:background="@color/white"
            android:elevation="15dp"
            android:layout_alignParentBottom="true"
            android:id="@+id/statistics_tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

기존의 TabLayout에 몇 가지 속성만 추가하면 된다.

 

<com.google.android.material.tabs.TabLayout
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabMaxWidth="0dp"
            android:background="@color/white"
            android:elevation="15dp"
            android:layout_alignParentBottom="true"
            android:id="@+id/statistics_tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

이런식으로 tabGravity, tabMode, tabMaxWidth 속성을 추가해준다.

 

이제 태블릿에서도 정상적으로 표시된다.