[안드로이드 코틀린] 텍스트뷰 TextView 클릭 시 효과(ripple)주는 방법

이번 시간에는 클릭 시에 효과를 주는 방법을 알아보겠습니다. 

---

목차

1. 실행 화면
2. 테마 themes.xml
3. 효과 drawable
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

---

1. 실행 화면

2. 테마 themes.xml

- 설명 -

 1. 클릭 시 효과를 주기 위한 설정

 2. Style 태그 안에 추가하면 됩니다.

<item name="android:colorControlHighlight">@color/purple_200</item>

3. 효과 drawable

 res -> drawable

custom_ripple_board.xml (내부 효과)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/purple_200">
    <item android:drawable="@android:color/white"/>
</ripple>

 

custom_ripple_boardless.xml(내부 밖 효과)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/purple_200">
</ripple>

 

4. 메인 화면 activity_main.xml

- 설명 -

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

  내부 효과를 주기 위한 설정

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

  내부 밖 효과를 주기 위한 설정

 3. android:background="@drawable/custom_ripple_board"

  사용자 정의 내부 효과

 4. android:background="@drawable/custom_ripple_boardless"

  사용자 정의 내부 밖 효과

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rootView"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/ripple_btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:text="내부 효과"
        android:textColor="@android:color/black"
        android:textSize="25sp"
        android:padding="20dp"
        android:onClick="dummyClick"/>

    <TextView
        android:id="@+id/ripple_btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:text="내부 밖 효과"
        android:textColor="@android:color/black"
        android:textSize="25sp"
        android:padding="20dp"
        android:onClick="dummyClick"/>

    <TextView
        android:id="@+id/ripple_btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_ripple_board"
        android:text="사용자 정의 내부 효과"
        android:textColor="@android:color/black"
        android:textSize="25sp"
        android:padding="20dp"
        android:onClick="dummyClick"/>

    <TextView
        android:id="@+id/ripple_btn4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_ripple_boardless"
        android:text="사용자 정의 내부 밖 효과"
        android:textColor="@android:color/black"
        android:textSize="25sp"
        android:padding="20dp"
        android:onClick="dummyClick"/>
</LinearLayout>

 

5. 메인 코드 MainActivity.kt

 - 설명 -

 1. fun dummyClick(view: View)

  UI onClick에서 쓰이는 함수

class MainActivity : AppCompatActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

    }//onCreate


    //클릭 이벤트
    fun dummyClick(view: View) {

        when(view.id){

            //내부 효과
            R.id.ripple_btn1 -> {
                Toast.makeText(applicationContext, "내부 효과", Toast.LENGTH_SHORT).show()
            }

            //내부 밖 효과
            R.id.ripple_btn2 -> {
                Toast.makeText(applicationContext, "내부 밖 효과", Toast.LENGTH_SHORT).show()
            }

            //사용자 정의 내부 효과
            R.id.ripple_btn3 -> {
                Toast.makeText(applicationContext, "사용자 정의 내부 효과", Toast.LENGTH_SHORT).show()
            }

            //사용자 정의 내부 밖 효과
            R.id.ripple_btn4 -> {
                Toast.makeText(applicationContext, "사용자 정의 내부 밖 효과", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

2022.08.25 - [안드로이드] - [안드로이드 코틀린] 동적 메뉴(ActionMode) 만드는 방법

[안드로이드 코틀린] 동적 메뉴(ActionMode) 만드는 방법

2022.08.19 - [안드로이드] - [안드로이드 코틀린] 속성 애니메이션 (이미지를 움직이게 하는 방법)

[안드로이드 코틀린] 속성 애니메이션 (이미지를 움직이게 하는 방법)

2022.08.17 - [안드로이드] - [안드로이드 코틀린] 소프트 키보드(Soft Keyboard) 보여주는 방법, 숨기는 방법

[안드로이드 코틀린] 소프트 키보드(Soft Keyboard) 보여주는 방법, 숨기는 방법