안드로이드에 Material Design 적용하기

안녕하세요 왕초보 개발자 아보카도🥑입니다.

 

오늘은 안드로이드에 쉽고 예쁜 Material Design을 적용하는 방법을 알아보겠습니다.

 

https://material.io/resources/get-started#android

구글의 Material Design은 디자인, 기능 등의 모범 사례를 제공하고 쉽고 빠른 빌드를 도와줍니다.

이제는 없으면 허전해요 !

 

저는 앱 어플리케이션을 Flutter로 처음 접했는데요. 기능이나 디자인을 적용할 때 어떤 것을 적용해야 할지도 모르고 검색할 키워드도 몰랐을 때 Material Design 사이트를 보면서 배웠습니다. 기본적인 것들은 나와있으니 참고하면서 공부·개발하면 도움이 될 것 같아요. 

 

자주 보는 카카오톡 로그인 페이지를 Material Design으로 따라해볼게요 👇

두둥

(수직으로 정렬되어 있어서 Linear Layout으로 진행했습니다)

 

Dependency 설정

build.gradle 파일에 repositories 안에 google()이 없다면 추가해줍니다.

 

 

build.gradle (:app) 파일에

implementation 'com.google.android.material:material:1.2.1'

최신 버전으로 넣어줍니다.  Sync도 잊지말고 눌러주세요

 

 

Text fields 넣기

Text fields 가이드  material.io/develop/android/components/text-fields

가이드에 나와 있는 코드를 복사해서 넣어줍니다. 

저는 로그인 페이지의 아이디와 비밀번호 텍스트 필드가 필요하니 두번 넣어줬어요.

 

 

기본적인 텍스트필드 완성!

여기서 배경 색을 흰색으로 바꾸고 싶어요. 가이드 페이지로 돌아가볼게요

 

텍스트필드에서 1번을 Container라고 해요. 가이드에서 컴포넌트들의 속성 바꾸는 법도 알려주고 있어요. 

 

 

여기서 app:boxBackgroundColor 라는 속성을 이용해서 컨테이너의 배경 색을 흰색으로 바꾸겠습니다.

app:boxBackgroundColor="@color/white"

TextInputLayout에 한줄씩 넣어주세요.

 

 

 

완성 !

 

 

Checkbox 넣기

체크박스도 Material Design에 있어요. 

<CheckBox
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:checked="true"
    android:text="@string/label_1"/>

height은 wrap_content로 바꾸고 text도 "로그인 상태 유지"로 바꿔주겠습니다. 

buttonTint로 색상도 변경했어요.

 

 

 

Button 넣기

버튼 종류가 많은데요, 저는 기본 버튼타입인 contained button으로 넣어줬어요.

긴 버튼으로 하기 위해 width를 match_parent으로 바꿔줬습니다. 

버튼 컨테이너의 색상과 텍스트 색상도 바꿔주는 게 좋겠죠?

 

 

완성

 

 

마지막으로, 전체적으로 padding과 margin 등으로 비율을 조정해줍니다. 

 

 

텍스트 필드와 버튼이 작동합니다. Material Design을 이용해서 카카오톡 로그인 페이지를 만들어봤어요. 

 

이외에도 활용할 일이 많으니 하나씩 사용해보면 좋을 것 같아요 🙂

 

---

˙참고자료

Material Design Android material.io/develop/android

Material Design