[Android] Material Design 사용하기

🚩 Material Design?

Material Design은 플랫 디자인의 장점을 살리면서도, 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다.
2014년 구글이 안드로이드 스마트폰에 적용하면서 널리 퍼지기 시작했다.

오늘은 Material Design을 사용하여 EditText에 아래와 같은 효과를 주겠다.

🚩 원하는 디자인 찾아 추가하기

◼ 1. Design - Material Design
구글에서 Android의 meterial widget들의 문서를 올려놓은 곳이다.
우리는 EditText에 효과를 줄 것이니 'EditText'를 검색한다.
◼ 2. 제일 첫번째 뜨는 Text fields를 선택한다.
유형은 Filled와 Outlined 두가지가 있고, 여러가지 효과를 줄 수 있다. (넘예뻐!!!ㅠㅠ)

나는 Outlined 효과를 줄 예정이다. 'Outlinde text field'를 누르면 예시를 확인 할 수 있다.

◼ 3. 예시에 나와있는대로 따라서 xml에 코드를 추가해준다.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/outlinedTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/email"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

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

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

여기까지 되었다면 기본 틀은 추가된 것이다.
문서를 보고 자기만의 스타일로 꾸며나가면 된다. 엄청 다양한 속성들이 있다.

🚩 완성!!

UI/UX 쪽도 재밌는것 같다. 꾸미는 재미가 있는듯!

---

출처 : Material.io