본문 바로가기

안드로이드(Android)/xml

안드로이드 버튼 클릭 효과 색상변경 (ripple effect, button pressed)

버튼을 만들다 보면 디자인적으로 버튼 클릭 시 효과를 만들어야 할 때가 있습니다.

기본적으로 버튼을 생성을 하면 클릭효과가 들어가 있습니다.

이것을 ripple effect 리플효과라고 말합니다. 

 

기본 클릭 효과

 

android:theme="@style/AppTheme.BlueRipple"

 

버튼에 theme를 넣어주고 

 

<style name="AppTheme.BlueRipple">
	<item name="colorControlHighlight">#0000ff</item>
</style>

 

styles.xml에 들어가서 <item name="colorControlHighlight">#0000ff</item> 를 넣어줍니다.

 

변경된 클릭 효과

만약에 버튼 색상을 바꾸고 싶으면 backgroundTint에서 색상을 변경할 수 도 있고 xml을 만들어서 backgroud에 넣을 수도 있습니다.

 

android:background="@drawable/ripple_custom"

 

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0000ff">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#0000ff" />
            <corners android:radius="2dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#c0c0c0" />
            <corners android:radius="2dp" />
        </shape>
    </item>
</ripple>

ripple_custom.xml

 

배경색 지정한 리플효과

 

진한 다홍색(#D35A5A)

 

하지만 우리가 원하는 진한 다홍색이 나오지 않았습니다.

ripple 효과가 흰배경과 다홍색이 섞여서 연하게 나오는 것 입니다.

원하는 색상을 출력하고 싶을 때는 ripple효과를 사용하지 않고 클릭되었을 때 버튼 색상이 변경되는 것을 이용하면 

조금 더 자신이 원하는 디자인에 접근 할 수 있습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#0000ff" />
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#c0c0c0" />
        </shape>
    </item>
</selector>

button_pressed.xml

 

위와 같이 button_pressed.xml을 만들어줍니다.

<item android:state_pressed="true"> 이 버튼이 클릭되었을 경우에 도형을 원하는 색상을 넣어서 그려줄 수 있습니다.

 

android:background="@drawable/button_pressed"

 

버튼에 background를 넣어줍니다.

 

리플효과 없는 클릭효과

 

이렇게 버튼 클릭 시 원하는 색상으로 출력이 되게 만들어 보았습니다. 여러분에게 많은 도움이 되었으면 좋겠습니다. 

부족한 점이 있으면 댓글로 피드백 부탁드립니다~

감사합니다!!