안드로이드/Android View

[Android] Elevation (그림자 효과)

코딩하는후운 2022. 10. 27. 10:22
반응형

Android Elevation (그림자 효과)

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

사용법
<?xmlv ersion="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축으로 더 멀어져 그림자가 커지게 됩니다.
그림자를 주기 위한 뷰의 BackgroundColor가 불투명이 아닌 어떠한 색을 가지고 있어야 그림자가 생긴다.


두번째로 elevation은 해당 뷰를 Z축으로 이동시키는데 그 뷰 주위에 여백이 없다면 그림자 효과가 생기지 않습니다.
이 경우 여백을 주기위에서는 ImageView를 감싸고 있는 RelativeLayout에 padding과 clipToPadding을 false로 설정해주면 됩니다.
혹은 ImageView에 margin을 줘서 해결할 수 있습니다.


1.부모 뷰(RelativeLayout)에 padding과 clipToPadding을 설정하여 해결하는 방법
<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의 padding값의 크기는 ImageView의 elevation의 값이 커질 수록 비례하여 크게
늘려주어야 그림자가 잘리지 않고 생성됩니다.


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

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


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

 

 

참조 :

https://black-jin0427.tistory.com/78?category=727620 

 

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

안녕하세요 블랙진 입니다. 이번에는 안드로이드에서 그림자 효과로 많이 쓰는 elevation 의 올바른 사용법에 대해 포스팅 해보겠습니다. elevation 은 API 21 이상에서부터 적용되는 효과입니다. 해

black-jin0427.tistory.com

 

반응형