새로워진 MaterialDesign의 TextField

MaterialDesign가 새로워졌으며 그 중에서도 TextField 디자인이 업데이트되었습니다.



크게 나누어 2 종류의 디자인으로 변경되었습니다.

Filled text fields 및 Outlined text fields

1은 Filled text fields
2가 Outlined text fields

됩니다.

com.google.android.material 소개

이러한 디자인을 Android에 도입하려면 com.google.android.material 가져오기가 필요합니다.

다음 공식을 참고로 가져옵니다.

Getting started with Material Components for Android

그건 그렇고,이 구성 요소 AndroidX가 필요하지만,
"아직 support lib에서 마이그레이션할 수 없습니다!"라는 사람에게도 com.android.support:design:28.0.0-alpha3에서 사용할 수 있도록 지원됩니다.

또한 compileSDKVersion는 P입니다.

Filled text fields 사용자 정의

우선 이쪽은, Widget.MaterialComponents.TextInputLayout.FilledBox 를 style 지정해 주세요

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

boxBackgroudColor

app:boxBackgroundColor

hintColor

Widget.MaterialComponents.TextInputLayout.FilledBox -> hintTextAppearanceTextAppearance.AppCompat.Caption -> android:textColor

<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>

helperTextColor

Widget.MaterialComponents.TextInputLayout.FilledBox -> helperTextTextAppearanceTextAppearance.AppCompat.Caption -> android:textColor

<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="helperTextTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>

errorTextColor

Widget.MaterialComponents.TextInputLayout.FilledBox -> errorTextAppearanceTextAppearance.AppCompat.Caption -> android:textColor

<style name="Sample.InputLayout.Error" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="errorTextAppearance">@style/Sample.InputLayout.Error</item>
</style>

※ 밑줄도 error와 같은 색이 됩니다.

bottomBar

TextInputEditText -> Base.Widget.AppCompat.EditTextcolorControlNormal / colorControlNormal

<style name="EditText.Style" parent="Base.Widget.AppCompat.EditText">
    <item name="colorControlNormal">#0000FF</item>
    <item name="colorControlActivated">#0000FF</item>
</style>

activity_main.xml

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@style/EditText.Filled">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/EditText.Style"
        />
</com.google.android.material.textfield.TextInputLayout>

cornerRadius

app:boxCornerRadiusTopStartapp:boxCornerRadiusTopEndapp:boxCornerRadiusBottomStartapp:boxCornerRadiusBottomEnd

Outlined text field 사용자 정의

여기 Widget.MaterialComponents.TextInputLayout.OutlinedBox를 스타일 지정하십시오.

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

boxBackgroudColor

app:boxBackgroundColor

hintColor

Widget.MaterialComponents.TextInputLayout.OutlinedBox -> hintTextAppearanceTextAppearance.AppCompat.Caption -> android:textColor

<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Boxed" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="hintTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>

helperTextColor

Widget.MaterialComponents.TextInputLayout.OutlinedBox -> helperTextTextAppearanceTextAppearance.AppCompat.Caption -> android:textColor

<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="helperTextTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>

errorTextColor

Widget.MaterialComponents.TextInputLayout.OutlinedBox -> errorTextAppearanceTextAppearance.AppCompat.Caption -> android:textColor

<style name="Sample.InputLayout.Error" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Boxed" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="errorTextAppearance">@style/Sample.InputLayout.Error</item>
</style>

※ 아웃라인도 같은 색이 됩니다.

boxStrokeColor

Widget.MaterialComponents.TextInputLayout.OutlinedBox -> boxStrokeColor

cornerRadius

app:boxCornerRadiusTopStartapp:boxCornerRadiusTopEndapp:boxCornerRadiusBottomStartapp:boxCornerRadiusBottomEnd

요약

MaterialDesign은 처음에는 "사용자가 다양한 플랫폼에서 서비스에 액세스해도 동등한 가치를 얻을 수 있도록"라고 설계되었지만,
점차 우리 개발자를 위해 "더 개발하기 쉽고 서비스의 본질 개발에 집중할 수 있도록"이라는 측면도 강해지고 있으며 단순히 MD를 사용하는 것뿐만 아니라 그 커스터마이징도 쉬워지고 있습니다. 합니다.

그 혜택을 드러내고 더 쉽고 수준 높은 서비스를 만들 수 있도록 우리 엔지니어도 디자인을 알고 싶습니다.