안드로이드 버튼 만들기 미션5 / Android Studio / 안드로이드 앱만들기 공부

버튼을 눌렀을때 눌렸다는 표시가 되는건 layer-list로 하는거 같은데 잘못 작성한거 같다...

 

두잇 안드로이드 앱프로그래밍 책에서 내준 미션

 

두 종류의 버튼 모양 만들기
- 두개의 버튼을 화면에 추가하고 버튼 모양을 각각 다르게 보이도록 만들기
- 화면에 두 개의 버튼을 배치한다.
- 첫 번째 버튼의 모양은 가장자리에 경계선만 보이도록 하고 경계선과 글자색이 동일하도록 만든다
- 두 번째 버튼의 모양은 배경색이 있고 모서리는 약간 둥글며 글자가 하얀색이 되도록 만든다

참고
- 드로어블 객체를 만들어 버튼의 배경으로 설정하면 버튼의 모양을 만들 수 있다
- 드로어블을 XML로 정의할 때 버튼의 모양이 결정된다

 

결과

처음꺼는 가장자리를 둥글게 다듬지 않아도 되는데 그냥 했다.

 

고쳐지지 않은 내가쓴 코드

 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="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Button 1"
            android:background="@drawable/button1"
            android:textColor="#ff7700"
            />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="Button 2"
            android:background="@drawable/button2"
            android:textColor="#ffffff"/>
        
    </LinearLayout>

</LinearLayout>

 

button1.xml 드로어블

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

    <size android:width="100dp" android:height="20dp" />
    <stroke android:width="2dp" android:color="#ff7700" />
    <solid android:color="#00000000" />
    <corners android:radius="5dp" />

</shape>

 

button2.xml 드로어블

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

    <size android:width="100dp" android:height="20dp" />
    <stroke android:width="2dp" android:color="#ff7700" />
    <solid android:color="#ff7700" />
    <corners android:radius="5dp" />

</shape>

 

 

다운받은 미션 코드 내용

activity_main.xml

- LineaerLayout이 아니라 기본 레이아웃으로 그대로 한게보인다

<?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_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

 

button1

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

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#00000000" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#00000000" />
        </shape>
    </item>

</layer-list>

 

button2

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

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#F26722" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#F26722" />
        </shape>
    </item>

</layer-list>

 

 

미션 써진거 확인하고 고친 코드

 

레이아웃은 내가 한거 그대로 뒀다

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="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Button 1"
            android:background="@drawable/button1"
            android:textColor="#ff7700"
            />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="Button 2"
            android:background="@drawable/button2"
            android:textColor="#ffffff"/>

    </LinearLayout>

button1

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

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#00000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#00000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>

</layer-list>

button2

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

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#F26722" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#F26722" />
            <solid android:color="#F26722" />
            <corners android:radius="5dp" />
        </shape>
    </item>

</layer-list>

 

깃허브 연결하기 만들었던거

그대로 사용해서 파일 저장소에 올리는거까지 완료했다.

github.com/young-0112/android-app-Mission5

young-0112/android-app-Mission5