Android Material Design 따라하기 2 - 로그인 화면 구상(EditText)

안녕하세요 프로나인 입니다.

Android Material Design 따라하기 2번째 시간입니다.

 

앞에서 Material 라이브러리를 추가 하는 방법을 알아봤습니다.

https://koohee.tistory.com/3?category=891895

Android Material Design 따라하기 1 - 라이브러리 추가

 

 

이번에는 라이브러리를 추가 했으니 이제 적용하고 활용 하는 방법을 알아보겠습니다.

 

Material 따라하기 시리즈는 누구나 쉽게

Material Design 을 가지고 하나의 어플을 만들어갈 수 있도록 진행 해 볼려고 합니다! 

 

https://material.io/develop/android/

Develop for Android

 

보통 어플들을 실행 시키면 맨 처음 로그인을 진행 합니다.

디자인도 로그인 화면처럼 구성 해보겠습니다.

---

우선 Material Design을 사용하기 위해서는 style에  Material Theme를 적용을 시켜야 합니다.

 

styles.xml

App - res - styles.xml 위의 경로로 들어가 아래 코드에 parest = "Theme.MaterialComponents.DayNight" 를 수정해줍니다.

< styles.xml>

<resources>

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    	... (중간 생략)
    </style>

</resources>

---

< EditText >

우선 기본적으로 사용하는 EditText 와는 구성이 다릅니다.

 <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
 		..
        ../>

위에 처럼 기본 design 을 사용할때 EditText 만을 사용하는데 Material 디자인에서는 이와 다르게

 

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

이런 식으로 

TextInputEditText 를 TextInputLayout 으로 감싸는 구조인것을 볼 수 있습니다.

 

아래 적용 코드입니다.

ConstarintLayout을 Layout으로 사용하여 보기 어려울 수있지만 큰 틀만 보시고 원하시는 크기와 디자인으로 작성하시면 될것입니다.

 

---

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
	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"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:hint="아이디"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.35">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edit_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:hint="비밀번호"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.50">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edit_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

여기서 TextInputLayout 에

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

을 적용하여 테두리가 있는 EditText 를 만들수 있습니다.

 

---

EditText 적용

---

다음 Material Design - 3 에서는 Button을 적용시키는것을 알아보겠습니다.

 

참조 - 안드로이드 Developer

https://developer.android.com/guide/topics/ui/look-and-feel?hl=ko

Android의 머티리얼 디자인  |  Android 개발자  |  Android Developers

참조 - Material Design

https://material.io/develop/android/

Develop for Android