[안드로이드앱] 두 종류의 버튼 모양 만들기

Do it! 안드로이드앱 프로그래밍 도전과제 05

 

두 개의 버튼을 화면에 추가하고

버튼 모양을 각각 다르게 보이도록 만들기

 

 

 

① 화면에 두 개의 버튼을 추가합니다.

 

② 첫 번째 버튼의 모양은 가장자리에 경계선만 보이도록하고 경계선과 글자색이 동일하도록 만듭니다.

 

③ 두 번째 버튼의 모양은 배경색이 있고 모서리는 약간 둥글며 글자가 하얀색이 되도록 만듭니다.

 

※ 참고할 점

    드로어블 객체를 만들어 버튼의 배경으로 설정하면 버튼의 모양을 만들 수 있습니다.

    드로어블을 XML로 정의할 때 버튼의 모양이 결정됩니다.

 

---

[ CODE ]

<activity_main.xml>

<?xml version="1.0" encoding="UTF-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout
        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_height="match_parent"
        android:layout_width="match_parent"
        tools:context=".MainActivity">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:textStyle="bold"
            android:textSize="24sp"
            android:textColor="#F26722"
            android:text="버튼 1"
            android:paddingBottom="10dp"
            android:paddingRight="30dp"
            android:paddingTop="10dp"
            android:paddingLeft="30dp"
            android:background="@drawable/linear_border"
            android:layout_marginTop="148dp" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintEnd_toEndOf="parent"
            android:textStyle="bold"
            android:textSize="24sp"
            android:textColor="#FFFFFF"
            android:text="버튼 2"
            android:paddingBottom="10dp"
            android:paddingRight="30dp"
            android:paddingTop="10dp"
            android:paddingLeft="30dp"
            android:background="@drawable/filled_border"
            android:layout_marginTop="76dp"
            app:layout_constraintTop_toBottomOf="@+id/button"/>

</androidx.constraintlayout.widget.ConstraintLayout>

레이아웃화면

---

[drawable]

 

<filled_border.xml>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#ff0000"/>
    
    <corners
        android:radius="15dp"/>

</shape>

<linear_border.xml>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="#ff0000" android:width="3dp"/>
    <solid android:color="#00000000"/>

</shape>

---

<MainActivity.java>

package com.example.mission05;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

---

<실행화면>