버튼에 Ripple 효과 적용하기

Android 버튼에 Ripple Effect를 주는 방법에 대해서 알아보도록 하겠습니다.

먼저 결론부터 말해보자면, 2가지 방법을 추천합니다. 
1) MaterialButton, MaterialCardView 를 사용하는 방법 (Android Support Design 라이브러리에서 제공)
2) xml을 사용하는 방법

---

앱 개발을 해보면서 적용해본 버튼 종류들과 Ripple 효과를 적용한 코드를 살펴보겠습니다. 

1. 텍스트만 들어가 있는 버튼 

<com.google.android.material.button.MaterialButton
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:text="Button"
            android:backgroundTint="#c8c8c8"
            app:rippleColor="#fff"
            app:cornerRadius="55dp"
  />

필수 속성들은 다음과 같습니다. 

• text: 버튼 문구를 지정합니다. 
• backgroundTint: 백그라운드 색상을 지정합니다. (background 아님을 주의)
• rippleColor: Ripple Effect 색상을 지정합니다. 
• cornerRadius: 모서리의 둥근 정도를 지정합니다. (0dp 는 직각입니다.)

2. 아이콘과 텍스트를 가진 버튼

Round Corner 가 살짝 들어가있음

<com.google.android.material.card.MaterialCardView
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:backgroundTint="#40000000"
            app:rippleColor="#000"
            app:cardCornerRadius="27.5dp"
            app:cardElevation="0dp"
            android:clickable="true">
            
              <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/btn_capture"
                android:layout_gravity="center"/>

  </com.google.android.material.card.MaterialCardView>

필수 속성들은 MaterialButton 과 거의 비슷합니다.

• backgroundTint: 백그라운드 색상을 지정합니다. 
  • 컬러 hex 코드는 ARGB순 입니다. (#40000000)
    • A값은 00은 0%, FF는 100%, 40은 25% 입니다.
• rippleColor: Ripple Effect 색상을 지정합니다. 
• cardCornerRadius: 모서리의 둥근 정도를 지정합니다. (0dp 는 직각입니다.)
• cardElevation: 버튼의 높이를 지정하여 그림자를 컨트롤합니다. (0dp 설정 시, 그림자가 나오지 않습니다.)

MaterialCardView 하위 계층에 ConstraintLayout을 넣고 RecyclerView의 Item으로 활용하기도 합니다. 

3. 이미지 버튼  

디자이너와 작업하다 보면, 위와 같은 이미지 파일을 적용할 때가 많습니다. 

방법 1) MaterialCardView 활용

 <com.google.android.material.card.MaterialCardView
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:backgroundTint="@android:color/transparent"
            app:cardCornerRadius="27.5dp"
            app:cardElevation="0dp"
            app:rippleColor="#fff"
            android:clickable="true">
            
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/space_ai_emoji"
                android:layout_gravity="center"/>

 </com.google.android.material.card.MaterialCardView>

 

방법 2) ImageButton 활용

<ImageButton
    android:id="@+id/ib_capture"
    android:layout_width="62dp"
    android:layout_height="62dp"
    android:src="@drawable/bg_ib_capture_ripple"
    android:background="@null"/>

// bg_ib_capture_ripple.xml 파일
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c8c8c8">
    <item android:drawable="@drawable/btn_capture"/>
</ripple>

 

---

<아래의 버튼은 어떻게 구현하면 될까요? >

 

위에서 설명한 2번째 방법인 MaterialCardView 를 활용해도 되고, 바로 위의 ImageButton의 xml을 참조하는 방법으로도 할 수 있습니다. 

ImageButton에 xml을 참조하는 방법에서 Ripple 모양을 원형으로 정의해야 합니다. 

<ImageButton
        android:id="@+id/ib_clean"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:src="@drawable/ic_cleaning"            // png 파일 
        android:background="@drawable/bg_white_ripple" // xml 파일
        />

// bg_white_ripple.xml 파일
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#40ffffff">
    <item android:id="@android:id/mask">	
        <shape android:shape="oval">        // 원형 모형
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

xml 속성을 자세히 설명하자면 다음과 같습니다. 

• <item android:id="@android:id/mask"> : Ripple Effect의 모양을 정의합니다. id를 mask로 지정해야 Ripple 효과가 나옵니다. 
• <shape android:shape="oval"> : 타원형의 모양으로 지정합니다. (width와 height가 같을 경우엔 원이 됩니다.)
  • solid android:color : 상위 태그의 색상을 지정합니다.
    실제로는 어떠한 색으로 지정하든 반영되지가 않아 의미가 없습니다만, 색상을 지정하지 않으면 Ripple 효과가 적용되지 않습니다. (oval 형태로 만드려면 color는 필수인가봅니다.)

 

---

혹시 Error inflating class com.google.android.material.button.MaterialButton 에러가 난다면?  

에러 로그를 살펴보면 답이 나옵니다.

1) Material Component (MaterialButton)를 사용하려면 app의 build.gradle에 라이브러리를 implement 해야 합니다.

implementation 'com.google.android.material:material:1.1.0'

 

2) AppTheme 의 parent를 MaterialComponents 로 지정해야 합니다. 

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@android:color/white</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowFullscreen">true</item>
    </style>

 

3) 그래도 에러가 난다면, MaterialButton의 Style을 직접 지정해줍니다. 

// view xml 파일 코드 
<com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:text="Skip"
                android:theme="@style/TextMaterialButton"
/>



// styles.xml 파일 코드
<style name="TextMaterialButton" parent="Theme.MaterialComponents">
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorOnPrimary">@android:color/white</item>
</style>