[Kotlin][Android] TextInputLayout 사용하여 로그인 화면 만들기

앱을 개발할때마다 항상 만들게 되는

 

로그인화면

 

좀더 간단하고 빠르게 

 

그리고 무엇보다 직관적으로 이쁘게 만들수는 없을까? 

 

고민하게 되는데요. 

 

안드로이드의 Material Library에서  TextInputLayout을  제공해 주고 있습니다.

 

그럼 인제 사용법을 한번 알아볼까요?

 

먼저 라이브러리를 추가해줍니다.

 

build.gradle

implementation 'com.google.android.material:material:1.2.1'

 

먼저 EditText에 Hint를 보여주고 포커스가 올때 Hint값이 TextInputLayout의 라벨로 이동합니다.

 

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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="email"
            />

    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

 

 

TextInputLayout 의 스타일은 기본적으로 두가지가 있습니다.

위에 보이는 스타일이 기본 스타일인 FilledBox 이고, 다른 하나는 OutlinedBox 스타일이 있습니다.

 

아래와 같이 비밀번호를 입력하는 EditText를 추가했습니다.

Style값에 Widget.MaterialComponents.TextInputLayout.OutlinedBox를 적용했습니다.

적용된 모습은 아래와 같습니다.

비밀번호 같은 경우에는 입력 후 보이지 않게 처리하기 위해서 inputType="textPassword"를 EditText 속성 값으로 추가하고, 비밀번호를 보기위한 토글 버튼을 만들기 위해 passwordToggleEnabled="true" TextInputLayout속성으로 추가해 줍니다.

 

 <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:passwordToggleEnabled="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password"
            android:inputType="textPassword"
            />
    </com.google.android.material.textfield.TextInputLayout>

 

TextInputLayout은 입력 텍스의 길이를 카운트할 수 있는 기능도 있습니다.

닉네임을 입력하는 TextInputLayout 하나 더 추가했습니다. 여기에 counterEnabled="true" 속성과, counterMaxLength="10" 속성을 추가합니다.

 

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="nickname"
            android:inputType="text"
            />
    </com.google.android.material.textfield.TextInputLayout>

 

 

이처럼 xml만으로 많은 기능을 제공하고 사용할 수 있습니다.

 

다음번에 로그인 화면을 만들때 한번 사용해 보면 어떨까요?