[Android] Material Design Text fields(EditText) 적용

01. build.gradle 의존성 추가

repositories에 다음 코드가 있는지 확인한다.

 

[Gradle Scripts] - [build.gradle(Project: 프로젝트명)]

buildscript {
    repositories {
        google()
        jcenter()
    }
}

 

원하는 버전의 material을 dependencies에 추가해준다.

 

[Gradle Scripts] - [build.gradle(Module: app)]

dependencies {
	implementation 'com.android.support:design:30.0.0'
	implementation 'com.google.android.material:material:1.2.0'
}

 

오른쪽 상단에 Sync Now 버튼을 클릭한다.

 

Gradle sync가 완료되면 왼쪽 하단에 finished가 뜬다.

 

02. MaterialComponents 상속받기

styles.xml 파일을 확인해보면 아래 코드처럼 style의 parent로 AppCompat을 상속받고 있을 것이다.

 

[res] - [values] - styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
    </style>
</resources>

MaterialComponents를 상속받게 되면 button과 같은 컴포넌트들이 모두 머티리얼 디자인으로 바뀐다.

 

[res] - [values] - styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    </style>
</resources>

 

적용해주지 않아도 머티리얼 디자인을 사용할 수 있지만 적용해주게 되면 아래처럼 com.google.android.material.textfield.TextInputEditText를 다 써주지 않고, EditText만 써서 사용할 수 있다.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" /> <!-- AppCompat 상속 -->
        
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" /> <!-- MaterialComponents 상속 -->

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

 

머티리얼 디자인에서 제공하는 Text fields에는 두가지 레이아웃이 있다. 

①Filled text field(기본값)

②Outlined text field

 

Outlined text field를 사용하려면 TextInputLayout에 style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" 속성을 추가해준다. filled text field는 style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox" 이다.

<com.google.android.material.textfield.TextInputLayout
	...
	style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    
    ...
    
</com.google.android.material.textfield.TextInputLayout>

 

 

 

본 작성자는 안드로이드 개발을 공부하고 있는 학생으로 피드백 및 질문을 환영합니다. 그러나 무단복제 및 배포는 정중하게 사양하고 있으며, 참고 사이트로 링크를 남기실 때는 동의를 구해주시기 바랍니다.