개발 공부/Android / / 2022. 8. 9. 07:21

[Android] RecyclerView Item Ripple Effect(리플 적용하기)

기본 Ripple Effect 

RecyclerView에 쓰이는 Item layout의 가장 상단의 뷰에 적용해준다.(부모 뷰)

 

- 아이템 제한 물결 효과

android:background="?android:attr/selectableItemBackground"

 

적용 예

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/selectableItemBackground">

 

- 아이템을 넘어 원형으로 확장된 물결 효과

android:background="?android:attr/selectableItemBackgroundBorderless"

적용 예

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/selectableItemBackgroundBorderless">

 

Custom Ripple Effect

Ripple Effect로 쓸 xml 파일 생성

 

1. res>drawable에 ripple.xml 파일을 만든다

<?xml version="1.0"encoding="utf-8"?>
<ripplexmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorPrimary"
tools:targetApi="lollipop">
    <itemandroid:id="@android:id/mask">
        <shapeandroid:shape="rectangle">
            <solidandroid:color="@color/colorPrimary"/>
            <cornersandroid:radius="20dp"/>
        </shape>
    </item>
</ripple>

2. 기본 Ripple Effect를 적용했던 거처럼 부모 뷰 background에 적용해준다. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple">
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유