앱 개발 과정에서 디자이너에게 다음과 같은 디자인을 요청받았다.

ConstraintLayout에서 RecyclerView 와 플로팅 버튼을 이용해 해당 시안을 구현하고자 했다.

문제

코드

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/memo_add_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="9dp"
        android:layout_marginBottom="50dp"
        android:elevation="12dp"
        android:background="@color/memo_add_color"
        android:focusable="true"
        android:src="@drawable/ic_memo_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="9dp"
        android:layout_marginTop="38dp"
        android:background="@drawable/shape_diary_background"
        android:elevation="10dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/viewPager"
        tools:listitem="@layout/item_memo_list_all" />

결과 사진

분명 floating 버튼을 넣었고, 원하는 위치에 view를 설정했으나 제대로 보이지 않는 문제가 있었다.

해결

코드

        android:id="@+id/memo_add_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="9dp"
        android:layout_marginBottom="50dp"
        android:background="@color/memo_add_color"
        android:focusable="true"
        android:src="@drawable/ic_memo_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="9dp"
        android:layout_marginTop="38dp"
        android:background="@drawable/shape_diary_background"
        android:elevation="3dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/viewPager"
        tools:listitem="@layout/item_memo_list_all" />

결과 사진

원인

원인은 elevation에 있었다.
화면의 z 축을 담당하는 요소에 문제가 있을 것이라 판별해 해당 부분을 확인 해 보았다.

Component elevation values
각 컴포넌트 별 z 축의 기본 값은 다음과 같다.
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp

해당 부분을 통해 FAB(FloatingActionButton)은 6dp 를 가지는 반면에 우리가 기존의 recyclerview를 10dp 만큼 띄웠기에 화면 속에서 가려지게 되는 것이다.

숙제

그러나 FAB에 elevation 값을 recyclerview의 elevation 값보다 크게 준다고 해도 여전히 가려지는 문제가 있다. 이부분은 추후 확인을 하고 포스팅을 하려고한다.

다른이들은 나와 같은 멍청한 실수를 하지 않길 바라며 포스팅을 마친다.

참조

https://m2.material.io/design/environment/elevation.html

https://developer.android.com/training/material/shadows-clipping?hl=ko