[Java][Android] TextView 클릭 시 효과(ripple)주기

안녕하세요!

이번 시간에는 텍스트뷰를 클릭 시에 다양한 효과를 주는 방법에 대하여 알아보겠습니다.

 

먼저 res -> theme.xml파일의 style 태그 안에 아래 코드를 추가해줍니다.

<!-- 클릭시 효과주기-->
<item name="android:colorControlHighlight">@color/purple_200</item>

 

다음으로 res -> drawble 폴더에 두가지 파일을 생성해줍니다.

 

custom_ripple_border.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:id="@+id/mask"
        android:drawable="@color/white"/>

</ripple>

 

custom_ripple_borderless.xml

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

</ripple>

 

다음으로 xml 파일입니다.

 

activity_ripple.xml

<?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"
    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:background="?android:attr/selectableItemBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="내부 효과"
        android:textColor="@color/black"
        android:textSize="22sp"
        android:padding="20dp"
        android:onClick="dummyclick"
        />

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_ripple_border"
        android:text="사용자 정의 내부 효과"
        android:textColor="@color/black"
        android:textSize="22sp"
        android:padding="20dp"
        android:onClick="dummyclick"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_ripple_borderless"
        android:text="사용자 정의 내부밖 효과"
        android:textColor="@color/black"
        android:textSize="22sp"
        android:padding="20dp"
        android:onClick="dummyclick"
        />

</LinearLayout>

 

다음으로 JAVA 파일입니다.

 

RippleActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class RippleActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ripple);

    }

    public void dummyclick(View view) {
    }
}

 

실행화면 입니다.

 

 

보시다시피 각 텍스트뷰에 따라 다른 효과가 나타나는 것을 확인할 수 있습니다.

오늘 준비한 내용은 여기까지 입니다.

궁금한 점은 언제든 댓글로 남겨주세요.

감사합니다 !