[안드로이드 코딩/Button]투명 버튼 클릭효과 넣기

xml 파일 상에서 Button 항목에 아래와 같이 style 값 지정해주기

 

 

안드로이드 UI 코딩시 나름대로 버튼 이미지나 효과에 신경은 쓰고 싶지만, 그렇다고 해서 따로 이미지를 만들기보다

투명한 버튼을 만들어서 깔끔한 스타일로 가고 싶을 때가 있었는데요.

그 때 얻은 코딩 정보를 나누고자 합니다. :D

 

 

버튼의 옵션을 아래와 같이 하면 클릭 효과가 나타나지 않는 투명 배경의 버튼을 만들 수 있기는 합니다.

    android:background="@null"

    android:background="@android:color/transparent"    

하지만 혹시나 하며, 예측되는 암울한 결과..! 버튼 클릭시 기본적으로 제공되는 시각 효과도 background 속성이 있어야만 보이는 것인지, 

효과도 함께 투명이 되어버려서 클릭 에니메이션이 나타나지 않게 됩니다.

background를 투명으로 하는 것은 접어두고 아래의 방법을 사용하시면 될 것 같습니다.

 

 

방법: Button의 style 값을 borderlessButtonStyle로 아래와 같이 지정해주면 됩니다.

  (버튼의 width값은 원하는 text 내용에 맞춰 따로 설정해준 것 입니다. )

 

<Button

style="?android:attr/borderlessButtonStyle"

android:layout_width="30dp"

android:layout_height="wrap_content" 

android:text="@string/Increase"

android:id="@+id/button1"/>

 

 

구현 결과는 아래와 같습니다.

off 항목의 이미지는 버튼을 누르지 않는 상태이고, on 항목의 이미지는 버튼을 누를 때 나타나는 효과 입니다.

끝.

---

[참고]

1. xml상 background 옵션의 Documentation

Formats: color, reference  A drawable to use as the background. This can be either a reference to a full drawable resource

(such as a PNG image, 9-patch, XML state list description, etc), or a solid color such as "#ff000000" (black).

2. borderlessButtonStyle의 Documentation

android:borderlessButtonStyle (Added in API level 11) 

Style for buttons without an explicit border, often used in groups.   

?android:attr/borderlessButtonStyle => @style/Widget.Material.Light.Button.Borderless   

Widget.Material.Light.Button.Borderless:  

Inherits from: @android:style/Widget.Material.Button.Borderless:    

android:background = @drawable/btn_borderless_material C:\Program Files\Android\Android Studio\plugins\android\lib\layoutlib\data\res\drawable\btn_borderless_material.xml    android:stateListAnimator = @null  

Inherits from: @android:style/Widget.Material.Button:

android:minHeight = 48dip     

android:textAppearance = ?attr/textAppearanceButton => @style/TextAppearance.AppCompat.Widget.Button     

android:clickable = true    

 android:gravity = center_vertical|center_horizontal     

android:minWidth = 88dip     

android:focusable = true  

Inherits from: @android:style/Widget.Material:  

Inherits from: @android:style/Widget: