[Android] 로그인 화면 구성 및 디자인

안드로이드 XML View에 대한 구성

우선 이메일과 비밀번호 입력 그리고 메인 타이틀을 배치하였다.

전체적인 뷰는 RelativeLayout으로 구성을 하였는데, 당시에는 여러개의 LinearLayout으로 구성을 하려고 생각하였기에 이렇게 하였다.

나중에 드는 생각이지만 그냥 ConstraintLayout으로 할껄 그랬다.

이때 당시에 이메일과 비밀번호의 입력에 대해서 고민을 많이 하였다.

왜냐하면 실제 유효하지 않은 이메일 패턴과 비밀번호 패턴을 입력할 시에 예외처리를 내부적으로 하기보다는 사용자 Ui에 직접 보여주고 싶었기 때문이다. 그리고 Hint나 부가적인 효과 또한 필요하였다.

 

그래서

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/emailInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp">

            <EditText
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                tools:ignore="Autofill,TextFields" />

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

위와 같이 TextInputLayout을 이용하였다.

 

TextInputLayout이란

Android TextInputLayout은 Android 개발에서 사용되는 UI 컴포넌트 중 하나로, 텍스트 입력 필드 (EditText)를 감싸는 래퍼 역할을 하는 뷰이다. TextInputLayout은 Material Design 가이드라인에 따라 디자인되었으며 사용자에게 텍스트 입력 필드를 쉽게 사용하도록 지원합니다. TextInputLayout을 사용하면 다음과 같은 기능 및 효과를 얻을 수 있다.

• Hint 텍스트: TextInputLayout은 EditText 위에 미리 입력된 텍스트 (hint)를 표시하여 사용자가 해당 필드에 어떤 정보를 입력해야 하는지 이해하기 쉽게 합니다.
• 에러 표시: 사용자가 유효하지 않은 데이터를 입력하면 TextInputLayout은 에러 메시지를 표시하여 사용자에게 오류를 알립니다.
• 레이블 애니메이션: 사용자가 입력 필드를 클릭하면 hint 텍스트가 EditText 상단으로 이동하여 레이블로 나타나며, 입력한 내용에 따라 이 레이블의 위치가 조절됩니다.
• 포커스 및 상태 변경 시 애니메이션: TextInputLayout은 포커스가 변경되거나 입력 내용이 변경될 때 다양한 애니메이션 효과를 제공하여 사용자 경험을 향상시킵니다.

 

APP에서 보이는 화면

 

로그인 뷰 이미지

유효한하지 입력을 하였을 경우

유효한 이메일 패턴이 아니거나 일정 비밀번호의 길이가 아닐경우 로그인 버튼이 활성화되지 않는 효과를 넣어주었다.

이는 다음 로그인 기능 Kotlin 코드에서 좀 더 상세하게 풀어쓰겠다.

 

코드

<?xml version="1.0" encoding="utf-8"?><!--suppress ALL -->
<RelativeLayout 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=".view.login.LoginActivity">

    <LinearLayout
        android:id="@+id/signIn_layout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="88dp"
        android:orientation="vertical"
        tools:ignore="UselessParent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="40dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="80dp"
            android:fontFamily="@font/fontspring_demo_blue_vinyl_regular_ps_ot"
            android:gravity="center"
            android:text="@string/app_name"
            android:textSize="36sp" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/emailInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp">

            <EditText
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                tools:ignore="Autofill,TextFields" />

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/passwordInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp">

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/password"
                android:inputType="textPassword"
                android:maxLines="1"
                tools:ignore="Autofill,TextFields" />

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

        <Button
            android:id="@+id/signInButton"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="20dp"
            android:text="@string/login" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Or" />

        <LinearLayout
            android:id="@+id/signIn_layout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:orientation="horizontal"
            tools:ignore="UselessParent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/signUpDescription" />

            <TextView
                android:id="@+id/signUpText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:text="@string/signUp" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>