[안드로이드 앱 만들기] firebase의 database 어플 #2(버튼 디자인)

▷ 이전글: 『[안드로이드 앱 만들기] firebase의 database 어플 #1(hello world!)』

이번에는 어플의 메인 layout을 꾸며보려고 합니다. 

이번 어플은 firebase의 데이터베이스를 추가하고 수정하고 삭제하는 기능만 있으면 되기 때문에 간단합니다. 

하지만, 기존 버튼을 이용하려고 하니 뭔가 식상합니다. 

밋밋하고 재미없는 어플 메인화면을 버튼 디자인을 조금 변경해주는 것만으로도 나름 봐줄만하게 꾸밀 수 있어요. 

main.xml 결과물입니다. 이걸 그대로 만들어볼게요!! 복붙만 하면 됩니다. ^^

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Firebase 데이터베이스"
            android:textStyle="bold"
            android:textSize="21sp"
            android:layout_marginTop="50dp"
            android:layout_marginBottom="50dp"
            android:layout_gravity="center_horizontal"
            />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_margin="3dp"
            android:background="@color/line_color"/>
        <Button
            android:id="@+id/main_add"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/blue"
            android:padding="30dp"
            android:text="추가"
            android:textSize="15sp"
            android:textStyle="bold"
            android:theme="@style/MyButton" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_margin="3dp"
            android:background="@color/line_color"/>
        <Button
            android:id="@+id/main_modify"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/green"
            android:padding="30dp"
            android:text="수정"
            android:textSize="15sp"
            android:textStyle="bold"
            android:theme="@style/MyButton" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_margin="3dp"
            android:background="@color/line_color"/>
        <Button
            android:id="@+id/main_delete"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/orange"
            android:padding="30dp"
            android:text="삭제"
            android:textSize="15sp"
            android:textStyle="bold"
            android:theme="@style/MyButton" />
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_margin="3dp"
            android:background="@color/line_color"/>
</LinearLayout>

main.xml 코드입니다. 

이렇게만 복사해서 붙여 넣는다면 빨간줄이 몇개 그입니다. 왜 그럴까요? 

android:textColor="@color/blue"
android:theme="@style/MyButton" 

그 이유는 바로 <Button>에 포함되어 있는 이 부분때문인데요. 

@color에 blue와 @style에 MyButton이라는 정의가 없기 때문입니다. 

우선, app → res → values → colors.xml 과 styles.xml를 찾습니다. 

color.xml에는, 

<color name="blue">#68B3F2</color>
<color name="orange">#FAA160</color>
<color name="green">#60BBB1</color>
<color name="line_color">#dce0e7</color>

를 복사해서 붙여넣어 줍니다. 기존에 colorPrimary, colorPrimaryDark, colorAccent가 있는데 이거 밑에다가 넣어주면 돼요. 

styles.xml에는, 

<style name="MyButton" parent="Theme.AppCompat.Light">
    <item name="colorControlHighlight">#39deff</item>
</style>

를 복붙해줍니다. upload_firebase 어플의 main화면 꾸미기 끝! 

다음 포스팅에서는 추가, 수정, 삭제를 눌렀을 때 두번째 페이지로 이동하는 방법을 다루겠습니다.

▷ 다음글:『[안드로이드 앱 만들기] firebase의 database 어플 #3(온클릭리스너)』