[Android] TabLayout 화면 꽉차게 대응하기 (feat. 갤럭시 z 폴드야 ..... )

 

 

TabLayout은 안드로이드에서 탭 기반 UI를 구현할 때 사용하는 뷰로, ViewPager와 함께 하단 네비게이션 바를 구현할떼 자주 쓰인다. 해당 경우로 사용하다가, 갤럭시 울트라 / 갤럭시 Z 폴드와 같이 기기의 가로 길이가 큰 기기에서 실행했을때, 네비게이션이 꽉 차지 않고 여백이 생기는 문제를 발견하여 이를 대응했다. 검색해본 결과, 해결방법이 다음과 같이 정해져있어 이를 이번기회에 기록해 놓고자 한다. 

 

TabLayout의 주요 속성

TabLayout은 익히 쓰고, 또 해당 뷰에 대해 알아보려고 쓰는 글은 아니라 간단하게 속성만 정리해놓고 넘어가자. 

• app:tabMode
  • 탭의 배치 방식을 결정한다
    • fixed: 모든 탭이 동일한 너비로 화면에 고르게 배치된다
    • scrollable: 탭이 많으면 스크롤 가능하며, 각 탭의 너비는 내용에 따라 결정된다
• app:tabGravity
  • 탭의 정렬 방식을 결정한다
    • fill: 탭을 가로로 균등하게 배치한다
    • center: 탭을 중앙 정렬한다
• app:tabTextColor
  • 탭의 텍스트 색상 지정한다
• app:tabSelectedTextColor
  • 선택된 탭의 텍스트 색상을 지정한다
• app:tabIndicatorColor
  • 선택된 탭 아래 표시되는 인디케이터의 색상을 지정한다

 

 

TabLayout이 화면 너비에 꽉 차도록 설정하기 

Tab not taking full width on Tablet device [Using android.support.design.widget.TabLayout]

<com.google.android.material.tabs.TabLayout
    ...
    app:tabMode="fixed"
    app:tabMaxWidth="0dp"
    app:tabGravity="fill"
    ...>

 

tabGravity의 값을 fill로 가득 채워주고, tabMode의 값을 fixed로 설정하면서 해당 문제를 간단하게 해결할 수 있었다.