Android TabLayout의 너비를 어떻게 줄일 수 있을까?

제준·2024년 3월 29일

Android Trouble Shooting

목록 보기

1/1

쇼핑몰 프로젝트를 진행하며 TabLayout에서 버튼에 맞는 프래그먼트를 화면에 뿌려주는 기능을 구현중이었다. TabLayout 너비를 위의 피그마 사진처럼 좁고 이쁘게 하고 싶은데 안드로이드 스튜디오에서 구현하려고 하니, 밑의 사진처럼 넓게 나오는 것을 확인할 수 있었다. 그래서 나는 밑의 사진을 위의 사진처럼 이쁘게 하기 위해서 TabLayout에 대해서 공부하고, 이 방법을 해결하고자 한다.

일단 TabLayout이 무엇인지, TabLayout에 어떤 속성들을 사용할 수 있는지부터 살펴보자.

TabLayout 이란?

안드로이드에서 탭(tab)으로 구분하는 화면에서 탭 버튼을 배치하는 레이아웃이다. 탭 버튼을 선택했을 때 버튼에 맞는 탭 화면을 뿌려줄 수 있다. 탭 레이아웃은 이 중 탭 버튼을 다양하게 표시하고자 사용하는 뷰다.

TabLayout에서 사용되는 속성들

tabMode: 탭의 모드를 설정합니다. fixed와 scrollable 중 선택할 수 있습니다. fixed 모드에서는 모든 탭이 화면에 고정되어 표시되고, scrollable 모드에서는 탭이 많을 경우 스크롤하여 탭을 탐색할 수 있습니다.
tabGravity: 탭 아이템들이 TabLayout 내에서 어떻게 배치될지 설정합니다. fill과 center 중 선택할 수 있습니다. fill은 모든 탭이 TabLayout을 꽉 채우도록 확장되며, center는 탭들이 중앙에 위치합니다.
tabIndicatorColor: 탭 아래에 표시되는 인디케이터의 색상을 설정합니다.
tabIndicatorHeight: 탭 인디케이터의 높이를 설정합니다.
tabSelectedTextColor: 선택된 탭의 텍스트 색상을 설정합니다.
tabTextColor: 탭의 텍스트 색상을 설정합니다.
tabBackground: 탭의 배경을 설정합니다.
tabContentStart: 탭 내용의 시작 부분에 대한 여백을 설정합니다.
tabPaddingStart, tabPaddingTop, tabPaddingEnd, tabPaddingBottom: 탭의 패딩을 설정합니다.
tabTextAppearance: 탭 텍스트의 스타일과 모양을 정의하는 데 사용되는 텍스트 스타일 리소스를 설정합니다.
tabIconTint: 탭 아이콘의 색조를 설정합니다.

내가 작성한 코드는 이렇게 된다.

내가 작성한 코드

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/byCategoryTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/white"
        app:tabIndicatorColor="@color/black"
        app:tabIndicatorFullWidth="true"
        app:tabGravity="start"
        app:tabMode="scrollable"
        app:tabIndicatorHeight="2dp"
        app:tabTextAppearance="@style/tab_text"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/textGray" >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/byCategoryTabItemAll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="전체" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/byCategoryTabItemPop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="인기" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/byCategoryTabItemNew"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="신규" />
    </com.google.android.material.tabs.TabLayout>

이 코드에서 app:tabMode="scrollable" 을 빼면 밑의 사진 처럼 가운데로 정렬되면서 Tab들이 좁게 설정되는 것을 확인할 수 있었다. 근데 app:tabMode="scrollable" 을 붙이니 옆으로 퍼지는 것을 고치고 싶은 것이다.

구글링으로 찾아보면서, 한 스택오버플로우를 발견하였는데, 나와 같은 고민은 아니지만 탭 레이아웃 탭 너비 고민이어서 한번 확인하게 되었다.
탭 너비 고민 stackOverflow

답변을 확인해보다가, 위에서 찾지 못한 속성이 있었다. app:tabMaxWidth="0dp" 이 코드였다.

tabMaxWidth 속성은 각 탭의 최대 너비를 지정하는 데 사용되는 속성이다. 이 속성은 주로 TabLayout의 scrollable 모드에서 유용하게 사용될 수 있으며, 탭이 너무 넓어져서 사용자 인터페이스(UI) 디자인이 의도하지 않은 방식으로 보이는 것을 방지하는 데 도움을 준다.

위의 stackOverflow의 답변 코드는 이렇다.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        />

"그러면 tabMaxWidth를 내 코드에 적용시키면 너비를 바꿀 수 있겠다!" 생각이 들어서 바로 코드로 들어가 tabMaxWidth 속성을 추가해보았다.

수정한 코드

<com.google.android.material.tabs.TabLayout
        android:id="@+id/byCategoryTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/white"
        app:tabIndicatorColor="@color/black"
        app:tabIndicatorFullWidth="true"
        app:tabMaxWidth="55sp"
        app:tabGravity="start"
        app:tabMode="scrollable"
        app:tabIndicatorHeight="2dp"
        app:tabTextAppearance="@style/tab_text"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/textGray" >

적당한 크기로 속성을 추가해줬더니, 밑의 사진처럼 잘 너비가 좁아진 것을 확인할 수 있었다.

마무리

지금까지 TabLayout과 TabLayout에서 Tab의 너비를 줄이는 방법에 대해서 포스팅해보았다. 다른 블로그에는 탭 너비가 같아지는 것들 위주로
작성되어 있는 것 같아, 내가 하는 프로젝트처럼 너비가 좁아야 한다면, 이 글이 누군가에게 도움이 되었으면 좋겠다.
프로젝트를 진행하며, 안드로이드에서 많은 레이아웃을 사용하고 그 레이아웃에서 사용할 수 있는 속성들이 상당히 많다. 많은 레이아웃을 사용해보면서 이렇게 공부할 수 있는 시간을 가지는 것이 내가 더 성장할 수 있는 기회다. 모르는 것을 해결하고 적는 습관. 중요하게 생각하고 더 열심히 작성하자.

제준