안드로이드 1to50 어플을 만들어보자 2편

안드로이드용 1to50어플을 만드는 포스팅 2편이네요.

[Android Study] - 안드로이드 1to50 어플을 만들어 보자 1편

이번 포스팅 2편에서는 안드로이드 스튜디오를 사용해서 xml파일에 코딩을 해보도록 하겠습니다.

어플에서 사용할 뷰들에 대해서 미리 id를 정하고 시작을 하겠습니다. 미리 id를 정해놓고 시작을 하면 코딩하실때에 고민할 필요가 없으니 쉽게쉽게 진행을 하실 수 있습니다.

게임화면

현재 클릭해야하는 숫자를 알려주는 칸에는 TextView에 id를 now_number로 사용하고

25개의 칸은 RelativeLayout에 id를 button으로 사용하고

25개의 칸에 숫자를 출력해줘야 하니 TextView에 id를 button_text로 사용하도록 하겠습니다.

이러면 게임화면에서 사용하는 뷰에 id를 모두 정해놓았습니다.

성공화면

확인 버튼은 RelativeLayout에 id를 ok_button으로 사용하겠습니다.

이러면 끝나는가?

생각해보니 게임화면과 성공화면을 같은 xml파일에서 사용하려면 귀찮으니까

include를 사용해서 게임화면이 보여질때 성공화면을 숨기고

성공화면이 보여질때 게임화면을 숨기도록 하겠습니다.

게임화면을 include로 id를 include_game_view로 하고

성공화면을 include로 id를 include_success_view로 사용하도록 하겠습니다.

이제 어플에서 사용할 모든 뷰들에 id를 정한것 같네요.

이제 xml파일에 코딩을 시작해 봅시다.

layout폴더에 include로 사용하는 게임화면과 성공화면을 만들어줍니다.

저는 include_view_game, include_view_success로 만들었습니다.

activity_main.xml에 두개의 include를 입력해주세요.

물론 위에 미리 정해놓은 id도 같이 입력해주세요.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/include_game_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        layout="@layout/include_view_game" />
    <include
        android:id="@+id/include_success_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        layout="@layout/include_view_success" />
</RelativeLayout>

두개의 include에 visible을 설정하지 않았으니 아래쪽에 입력된 include_view_seccess화면만 보여집니다.

visible은 java코딩을 할때에 컨트롤 하도록 하겠습니다.

activity_main.xml파일은 입력이 완료되었습니다.

include_view_game.xml에 코드를 입력해봅시다.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f3f3f3">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="#848484"
            android:layout_margin="10dp">
            <TextView
                android:id="@+id/now_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:textSize="40sp"
                android:textStyle="bold"
                android:textColor="#f3f3f3"/>
        </RelativeLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RelativeLayout
                android:id="@+id/button_1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RelativeLayout
                android:id="@+id/button_6"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_7"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_8"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_9"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_9"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_10"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_10"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RelativeLayout
                android:id="@+id/button_11"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_11"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_12"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_12"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_13"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_13"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_14"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_14"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_15"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_15"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RelativeLayout
                android:id="@+id/button_16"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_16"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_17"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_17"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_18"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_18"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_19"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_19"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_20"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_20"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RelativeLayout
                android:id="@+id/button_21"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_21"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_22"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_22"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_23"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_23"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_24"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_24"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/button_25"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#f15f74"
                android:layout_margin="3dp">
                <TextView
                    android:id="@+id/button_text_25"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:textColor="#f3f3f3"/>
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

25개의 칸과 1개의 칸을 사용해야하니 반복되는 코드만 잔뜩이네요.

미리 구상한 디자인대로 배경 색상과 각 칸에 맞는 색상을 입력해주었습니다.

각 칸에 TextView는 미리 구상한 디자인과 비슷하게 크기와 색상을 입력을 해주었습니다.

id는 당연히 각 칸에 입력을 해주었습니다.

include_view_game.xml에 코딩도 완료가 되었습니다.

입력이 완료된 include_view_game.xml을 캡쳐한 이미지입니다.

include_view_success.xml에 코드를 입력해봅시다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f3f3f3">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#f15f74">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/success"
            android:textStyle="bold"
            android:textSize="80sp"
            android:textColor="#f3f3f3"/>
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/ok_button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/ok"
            android:textColor="#848484"
            android:textStyle="bold"
            android:textSize="30sp"/>
    </RelativeLayout>
</LinearLayout>

LinearLayout에 RelativeLayout을 2개를 만들어서 1:2크기로 설정을 해주었습니다.

확인버튼이 1이고 성공글씨 뷰가 2입니다.

전체 배경을 f3f3f3으로 입력을 해주고 성공글씨가 보여지는 뷰에 배경을 따로 f15f74로 입력을 하였습니다.

TextView는 미리 구상한 디자인과 비슷하게 크기를 설정하고 색상도 적용하였습니다.

각 TextView에 @string/success와 @string/ok를 입력하였는데

이걸 적용하려면 values폴더에 string.xml파일에 입력을 해줘야 합니다.

<resources>
    <string name="app_name">1to50_blog</string>
    <string name="success">성공</string>
    <string name="ok">확인</string>
</resources>

여기까지 입력을 다 하셨다면 include_view_success.xml코딩은 완료가 되었습니다.

include_view_success.xml화면을 캡쳐한 이미지입니다.

이제 1to50을 만들기 위한 xml파일에 코딩은 모두 끝이났습니다.

아래 xml파일을 다운받아서 다시 확인을 해주세요.

activity_main.xml

include_view_game.xml

include_view_success.xml

strings.xml

java파일만 코딩을 완료하면 1to50은 제작이 완성이 되겠네요.