안드로이드 독학 4일차 : 커스텀 버튼 만들기

버튼의 상태에 따라 버튼의 이미지가 달라지는것을 만들어보자.

일단 이미지가 달라지는것이기 때문에 res/drawable 폴더 안에 새로운 drawable file을 만들어야 한다.

 

우리는 버튼이 클릭되어 졌을때, 버튼에 hover 됐을때, 버튼이 일반적일때 이 3개의 모습에 따라서 

이미지를 다르게 할것이기 때문에 item은 3개가 있어야 한다.

각각의 속성은 android:state_pressed, android:state_focused, default

이렇게 되어 있어야 한다. 그래서

 

 

android_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/android2"
        android:state_pressed="true"/>
    <item
        android:drawable="@drawable/android1"
        android:state_focused="true"/>
    <item
        android:drawable="@drawable/android"/>
</selector>

이렇게 만들어 줘야 한다.

이때 중요한 점은 item을 읽어 들일때 위에서 부터 읽기 item의 순서가 제일 중요하다.

 

일반적일때가 가장 밑에 있기 때문에 위의 state_pressed와 state_focused가 false여야지 

일반적일때의 화면이 보여진다.

 

그럼 이제 각각의 상태에 따른 이미지를 설정해줬으니 이걸 설정할 버튼을 만들어보자

 

activity_main.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="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/custB"
        android:background="@drawable/android_button"
        android:onClick="onClicked"/>
 
</LinearLayout>

이렇게 되면 Button의 배경 이미지는 우리가 앞서 작성한 android_button.xml을 참조해서 배경이미지를 선택한다.

 

그럼 이제 자바 소스에서 버튼이 눌려졌을때 눌려졌다는 메시지를 띄워보자.

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    public void onClicked(View v){
        Toast.makeText(getApplicationContext(),"클릭됨",Toast.LENGTH_SHORT).show();
    }
}

그럼 이제 실행 화면을 보자

 

1. 일반적일때

2. 클릭됐을때

hover 됐을때는 왜 색이 안변하는지 알아봤는데 보니까

android:state_focused는 EditText의 입력창이 활성화 된 경우에만 된다. hover랑은 다르게 그야말로 focus 될떄만 작동된다.