[Android, elevation not working] 안드로이드 elevation 사용하기 위한 조건

안녕하세요 블랙진 입니다.

이번에는 안드로이드에서 그림자 효과로 많이 쓰는 elevation 의 올바른 사용법에 대해 포스팅 해보겠습니다.

elevation 은 API 21 이상에서부터 적용되는 효과입니다. 해당 View 를 Z 축으로 이동하여 하단에 그림자가 깔리는 입체적인 효과를 줄수 있도록 고안된 구글의 머테리얼 디자인입니다.

사용법은 아주 간단합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:elevation="10dp"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp" />

</RelativeLayout>

위와 같이 android:elevation 에 값을 주면 됩니다. 이 값이 커지면 커질수록 Z 축으로부터 더 멀어져 그림자가 커지게 됩니다.

그런데!!! 위와 같이 설정하면 화면 가운데에 100dp 네모의 그림자가 있는 이미지가 생겨야 되지만 생기지 않습니다. 왜 그럴까요?

그건!! 그림자를 주기 위한 뷰의 Background Color 가 불투명이 아닌 어떠한 색을 가지고 있어야 되기 때문입니다.!!

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:elevation="10dp"
        android:background="#ffffff"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp" />

</RelativeLayout>

다시 위와 같이 백그라운드에 하얀색을 설정하고 실행시키면 elevation 효과가 적절하게 들어갑니다.

두번째로 elevaton 은 해당 뷰를 Z 축으로 이동시키는데 그 뷰 주위에 여백이 없다면 그림자 효과가 생기지 않습니다.

간단한 예로 이미지뷰를 RelativeLayout 으로 감싸는데 이 뷰의 크기는 ImageView 와 동일하여 ImageVIew 에 여백이 존재하지 않습니다.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:elevation="10dp"
            android:background="#ffffff"
            android:layout_width="100dp"
            android:layout_height="100dp" />

    </RelativeLayout>

</RelativeLayout>

그럼 아래와 같이 이미지뷰 주위에 그림자가 생기지 않습니다.

이 경우 여백을 주기 위해서는 ImageView 를 감싸고 있는 RelativeLayout 에 padding 과 clipToPadding 을 false 로 설정해주면 됩니다.

혹은 ImageView 에 margin 을 줘서 해결할 수 있습니다.

1. 부모 뷰(RelativaLayout)에 padding 과 clipToPadding 을 설정하여 해결하는 방법

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_centerInParent="true"
        android:padding="20dp"
        android:clipToPadding="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:elevation="10dp"
            android:background="#ffffff"
            android:layout_width="100dp"
            android:layout_height="100dp" />

    </RelativeLayout>

</RelativeLayout>

RelativeLayout 의 padding 값의 크기는 ImageView의 elevation 의 값이 커질 수록 비례하여 크게 늘려주어야 그림자가 잘리지 않고 생성됩니다.

여기서는 ImageView 의 elvation 의 값이 10dp 이므로 이를 감싸고 있는 RelativaLayout 의 padding 값은 더 큰 20dp 로 설정해 주었습니다.

2.  자식 뷰(ImageView) 에 margin 을 줘서 해결하는 방법

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:elevation="10dp"
            android:layout_margin="20dp"
            android:background="#ffffff"
            android:layout_width="100dp"
            android:layout_height="100dp" />

    </RelativeLayout>

</RelativeLayout>

두 방법 모두 동일하게 elevaton 효과가 잘 적용되었음을 확인 할 수 있습니다.!

그럼 여기서 1번의 경우 "padding 의 방향을 조절하면 그림자가 보이는 부분은 설정할 수 있겠구나" 라는 생각을 하실 수 있을 겁니다!

만약 아래와 같이 paddingBottom 만을 설정하면 그림자의 상,좌,우는 padding 이 없어 잘리고 하단만 그림자가 생성됩니다.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_centerInParent="true"
        android:paddingBottom="20dp"
        android:clipToPadding="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:elevation="10dp"
            android:background="#ffffff"
            android:layout_width="100dp"
            android:layout_height="100dp" />

    </RelativeLayout>

</RelativeLayout>

아래는 위와같이 설정 했을 때에 화면입니다.

보시는 바와 같이 상,좌,우의 그림자는 잘리고 하단에만 그림자가 생겼음을 확인할 수 있습니다.

다시 내용을 정리해서 elvation 을 주었는데 왜 뷰에 그림자가 생기지 않을까? 에 대해서 2가지 조건을 충족 시켜야 됩니다.

1.  뷰의 background color 가 불투명이 아닌 색상이 설정되어 있어야 합니다.

2.  뷰의 그림자가 생길 수 있는 여백이 충분히 있어야 합니다.

그럼 왜 나만 elvation 이 적용이 안될까? 에 문제에서 벗어나 즐거운 코딩 하시기 바랍니다.~!