[안드로이드 앱 만들기] firebase의 database 어플 #4(TextInputLayout)

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

이번에는 메인에서 AddActivity로 넘어갔을 때 layout을 꾸며보겠습니다. 

여기에는 제목과 URL을 전송할 수 있는 EditText를  두개 만들어 볼 생각입니다. 

그런데 EditText는 디자인 꾸미기가 조금 어렵습니다. 저는 android.support.design에서 제공하는 위젯, TextInputLayout으로 만들어 볼 생각입니다. 

EditText 와 TextInputLayout의 차이점

방법은 하나만 주의하면 쉽습니다. 

우선 어플의 Gradle Scripts의 Build.gradle (Module: app)으로 들어갑니다.

아래쪽에 dependencies가 있는데요. 거기에 'com.android.support:design:28.0.0' 을 implementation 해줄 겁니다. 

implementation 'com.android.support:appcompat-v7:28.0.0'

위 내용을 복사해서 붙여넣은 뒤 Sync Now를 눌러줍니다. 

이제 add.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=".AddActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="데이터베이스 입력"
        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"/>
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">d
        <EditText
            android:id="@+id/add_title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:padding="5dp"
            android:textSize="15sp"
            android:inputType="text"
            android:background="@null"
            android:imeOptions="actionNext"
            android:hint="제목"/>
    </android.support.design.widget.TextInputLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_margin="3dp"
        android:background="@color/line_color"/>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <EditText
        android:id="@+id/add_url"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:padding="5dp"
        android:textSize="15sp"
        android:inputType="text"
        android:imeOptions="actionDone"
        android:background="@null"
        android:hint="URL"/>
    </android.support.design.widget.TextInputLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_margin="3dp"
        android:background="@color/line_color"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <Button
            android:id="@+id/add_apply"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/orange"
            android:padding="5dp"
            android:text="저장"
            android:textSize="15sp"
            android:textStyle="bold"
            android:theme="@style/MyButton" />
    </LinearLayout>

</LinearLayout>

TextInputLayout은 터치시 힌트가 위로 올라갑니다. 하지만 EditText는 아무현상도 일어나지 않죠.

위에있는 add_title의 imeOptions은 actionNext입니다.

아래에 있는 add_url의 imeOptions은 actionDone입니다.

actionNext는 키보드 입력 후 오른쪽 아래에 다음 버튼이 생기고

actionDone은 키보드 입력 후 오른쪽 아래에 닫기 버튼이 생깁니다.

그 아래에 저장 버튼을 만들어주면 끝!! 

다음 포스팅에는 가장 중요한 코딩을 할 차례네요. TextInputLayout에 입력한 내용을 Firebase database에 보내는 방법을 알아보겠습니다. ^^     

▷ 다음글:『[안드로이드 앱 만들기] firebase의 database 어플 #5(firebase 연동)』