툴바(Toolbar) 내부 텍스트뷰(TextView) 문자열 가운데로 배치하는 법

안녕하세요? 닉네임간편입니다. 이번 시간에는 툴바 내부에 텍스트뷰의 문자열을 가운데로 배치하는 법에 대해서 설명드리겠습니다.

1. 문제

툴바에 문자열을 배치할 때 기본 title을 사용하지 않고 텍스트뷰를 사용하는 경우가 있습니다. 그런데 문자열을 가운데에 배치하려고 layout_gravity 속성을 설정하여도 가운데에 배치가 되지 않는 경우가 있습니다.

2. 해결 방법

이때 contentInsetStart 또는 contentInsetLeft을 0dp로 설정하면 중앙에 가깝게 배치할 수 있습니다.

툴바 내부에선 Navigation 버튼이나 메뉴 아이템들이 배치될 수 있고, 이것들이 기본적으로 차지할 만한 최소한의 공간을 미리 설정합니다. 이 값은 default로 16dp이며, 따라서 기본적으로 툴바 내부에 뷰를 배치할 때 이 값만큼 일종의 공간이 이미 배치되어있는 것입니다.

따라서 텍스트뷰의 문자열을 중앙에 배치한다고 하더라고, 이 값이 이미 디폴트로 존재하기 때문에 중앙에 배치되지 않을 수 있는 것입니다.

이때 contentInsetStart나 contentInsetLeft를 0dp로 설정하면 온전히 텍스트뷰의 문자열을 가운데로 배치할 수 있습니다.

contentInsetStartWithNavigation 속성은 만약 툴바에 네비게이션 버튼이 있을 경우 존재하는 최소한의 inset을 나타냅니다. 이 값도 0dp로 설정하면 됩니다.

 

이후 텍스트뷰의 layout_gravity 속성을 center로 설정하면 가운데에 텍스트뷰를 배치할 수 있습니다.

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/see_all_review_toolbar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent="0.063"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp">
            <TextView
                android:id="@+id/see_all_review_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="전체 리뷰"
                android:textColor="@color/white"
                android:textSize="15sp"
                android:fontFamily="@font/noto_sans_kr_medium"
                android:includeFontPadding="false"
                android:layout_gravity="center"
                />

        </androidx.appcompat.widget.Toolbar>

3. 마무리

이번 시간에는 툴바 내부에 텍스트뷰 문자열을 가운데로 배치하는 법에 대해서 설명해보았습니다.

많이 유용한 글이 되었으면 좋겠습니다.