[안드로이드 팁] elevation: 뷰에 그림자를 주는 가장 쉬운 방법

안드로이드에서 화면을 그리다 보면 그림자가 있는 뷰를 만들어야 하는 일이 많다.

이런 식으로 배경에 그림자를 주기 위해서는 아예 배경 이미지 또는 drawable이 그림자를 갖도록 만들어버리는 방법이 있다.

하지만 elevation을 사용하면 따로 그림자가 포함된 리소스를 만들지 않고도 이렇게 그림자를 줄 수 있다.

 

Elevation

Elevation은 xml layout에서 뷰에 줄 수 있는 속성으로, API21부터 추가되었다.

레이아웃에서 그림자를 주고자 하는 뷰에 단순히 elevation을 dp값으로 집어넣어 주는 것만으로 그림자 표현이 가능하다.

아래 코드는 위에 첨부된 사진에 해당하는 레이아웃이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#DDDDDD">
    <View
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="@color/white"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:elevation="10dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

Elevation 속성으로 넣어주는 dp값은 뷰의 z축, 즉 '높이'에 해당한다.

따라서 5dp, 10dp, 15dp를 넣어주면 각각 그림자의 깊이가 달라진다.

각각 5dp, 10dp, 15dp의 elevation을 가진 뷰

 

주의할 점

1. elevation 값이 높이를 나타낸다는 말은, 단순히 그림자의 깊이만 달라진다는 의미가 아니라 말 그대로 '높이'가 달라진다는 것이다.

예를 들어 어떤 요소에 elevation 10dp를 주게 되면, 다른 요소들 (elevation=0dp)은 z축 기준으로 그 요소보다 '밑에' 있게 되므로, 해당 요소 밑으로 가려진다.

특정 뷰를 이것보다 더 위에 보여주려면 elevation값을 더 높여서 20dp 등의 값을 주어야 하고, 그러면 해당 뷰에도 그림자가 생긴다.

 

만약 eleavtion으로 뷰의 높이를 결정해서 더 위에 보이게 하되, 그림자는 보여주고 싶지 않다면,

android:outlineProvider="none"

속성을 추가하면 된다.

 

2. 이 elevation 속성은 해당 뷰에 background 속성이 정의되어 있는 경우에만 작동한다.

그러므로 앱 상단의 툴바와 같이 background 값을 집어넣기 적절한 뷰에는 사용하기 쉽지만, ImageView 등에서는 적절하지 않을 수 있다.

 

3. 또한 eleveation의 그림자 색이나 방향의 기본값은 화면에서 퍽 자연스럽지만, 다른 값으로 변경할 수는 없다.

따라서 커스텀한 그림자를 구현하고 싶다면 다른 방식을 사용해야 한다.