[Android] Meterial 디자인 적용

아무디자인을 적용하지 않은 EditText의 경우 약간 밋밋할수있는데 Meterial Deisn을 적용할경우 아래 이미지처럼 보기 괜찮게 바꿀수있다.

해당 포스팅에서는 머티리얼 디자인을 적용하는 방법을 소개한다.

Meterial Design이 적용된 EditText

style.xml

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
		..
    </style>

style.xml의  parent를 위와같이 수정한다.

build.gradle(:app)

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

앱단의 build.gradle에서 위와같이 라이브러리를 추가한다.

그 후 XML에서 사용할때 아래와같이 TextInputLayout으로 감싸주면된다.

 <!-- 이름 -->
            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/username_textInputLayout"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"
                android:padding="10dp"
                app:counterEnabled="true"
                app:counterMaxLength="20"
                app:endIconMode="clear_text"
                app:helperText="필수입력">

                <EditText
                    android:id="@+id/username_textField"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="text"
                    android:maxLength="21" />
            </com.google.android.material.textfield.TextInputLayout>

 

---

이미지 출처 : https://stackoverflow.com/questions/44891219/custom-textinputlayout-android