프로그래밍

[Do it! 안드로이드 앱] 자바) 두 종류의 버튼 모양 만들기 본문

안드로이드/Do it! 안드로이드 앱프로그래밍

[Do it! 안드로이드 앱] 자바) 두 종류의 버튼 모양 만들기

시케 2022. 5. 18. 13:56
728x90
반응형

도전과제 05

 

실행화면

 

디자인

 

프로젝트 설명

화면에 버튼을 추가하고 버튼 모양을 각각 다르게 보이도록 만든다

 

화면에 두 개의 버튼을 배치합니다.
첫 번째 버튼의 모양은 가장자리에 경계선만 보이도록 하고 경계선과 글자색이 동일하도록 만듭니다.
두 번째 버튼의 모양은 배경색이 있고 모서리는 약간 둥글며 글자가 하얀색이 되도록 만듭니다.

 

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"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼 1"
        android:textSize="30dp"
        android:textColor="#fab055"
        android:background="@drawable/btn1_draw"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="버튼 2"
        android:textSize="30dp"
        android:background="@drawable/btn2_draw"/>

</LinearLayout>

 

btn1_draw.xml

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

    <size android:width="200dp" android:height="75dp"/>
    <solid android:color="#00000000"/>
    <stroke android:color="#fab055" android:width="3dp"/>

</shape>

 

btn2_draw.xml

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

    <size android:width="200dp" android:height="75dp"/>
    <solid android:color="#fab055"/>
    <corners android:radius="15dp"/>

</shape>

 

※ 버튼 background에 drawable 적용이 잘 안될시 앱 테마를 확인한다

버튼이 앱 테마 스타일을 상속받기 때문

 

res > values > themes.xml

<style name="Theme.Doitmission_05" parent="Theme.AppCompat.Light">
728x90
반응형
Comments