RoundedCorner ImageView 그림자

김은섭 2.0·2022년 8월 23일
0

만들고 싶은 것
RoundedCorner를 적용한 Image를 보여주는 ImageView에 그림자를 넣고 싶다.

쉬운 방법 :: ImageView의 elevation 속성

<ImageView 
    android:elevation="8dp"
    android:background="@color/white"
    android:margin=10dp />

※주의사항
1. elevation 준 만큼 ImageView 주변으로 여백이 있어야 한다.
2. background color가 불투명하지 않아야 한다.

참고
https://selfish-developer.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EA%B7%B8%EB%A6%BC%EC%9E%90Shadow-%ED%9A%A8%EA%B3%BC-%EB%84%A3%EA%B8%B0

뾰족한 사각형에 그림자가 만들어진다.

위 방법대로 elevation 속성을 지정하면, 애써 이미지의 모서리를 깎았지만.. 본래 뾰족한 사각형인 ImageView에 그림자가 만들어지므로 아래와 같아진다.

ImageView 하단에 그림자가 생기긴 했지만, ImageView의 모양이 적나라하게 보인다.

그림자 모양 커스텀하기

https://developer.android.com/training/material/shadows-clipping#Shadows

여기에 나온대로 하면 쉽게 해결이 된다.

<!-- res/drawable/rounded_corner_rect.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners android:radius="20dp"/>
</shape>

모서리 둥근 rectangle shape를 만들어서 ImageView의 background에 적용해준다.
(여전히 elevation을 적용하려면 background color는 불투명해야 한다.)

<ImageView 
    android:elevation="8dp"
    android:background="@drawable/rounded_corner_rect"
    android:margin=10dp />

하단에 그림자가 있지만 모서리가 뾰족한 흔적은 없다.

이 방법은 그림자의 모양을 커스텀하기 위한 방법이라서, ImageView 자체의 모양이 바뀌는 건 아니다. ImageView 자체의 모양이 바뀐 줄 알고, Glide를 이용해 Image를 지정해주는 코드에서 Rounded Corner 옵션을 제거했더니 뾰족한 이미지 그대로 나왔다.

ImageView 자체의 모양을 바꾸려면 다른 방법을 이용해야 한다.

profile
생각하지 말고 그냥 할게요

0개의 댓글