TabLayout이 태블릿에서 작게 나타날때

 

TabLayout을 사용할 때 태블릿과 같이 큰 화면에서는 아래의 그림과 같이 TabItem이 화면에 꽉차지 않는 경우가 있습니다.

 

원인은 Widget.Design.TabLayout내부의 xml 설정때문입니다.

 

자세한 내용은 stackOverflow를 참고 해 주세요.

 

이때는 아래와 같이 TabLayout의 XML 설정을 간단하게 변경해주면 TabItem이 화면에 꽉차도록 배열됩니다.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <com.google.android.material.tabs.TabLayout
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        android:id="@+id/tab_reminder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="항목 1" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="항목 2" />


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

 

TabLayout의 XML 속성에 아래와 같이 tabGravity 속성을 간단히 추가해주면 잘 적용되는것을 볼 수 있습니다. 

   app:tabMaxWidth="0dp"
   app:tabGravity="fill"