안드로이드 스튜디오 Material Design 적용하기

material.io 를 들어가보면 안드로이드의 아름답고 정갈한 디자인, 그리고 그 철학을 볼 수 있다.

우선 쉽게 프로젝트에 Material Design을 적용하는 방법을 소개한다.

프로젝트 AndroidX migrate를 했다는 가정하에, 혹은 안드로이드 스튜디오 최신버전을 사용했다는 가정하에

(필자는 Android Studio 3.6.1 버전을 사용 중)

먼저 좌측 프로젝트 트리에서 다음과 같은 부분을 클릭한다.

build.gradle(Module:app)을 클릭하자.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'    
}

위와 같은 부분에서

androidx.appcompat:appcompat:1.1.0의 버전 숫자에 맞게 아래와 같은 코드를 추가한다.

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

그럼 아래와 같은 모습이 될 것이다.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

추가가 완료되었다면, 아래의 Sync Now 버튼을 눌러 동기화를 시켜주자.

Gradle의 Sync를 시켜주도록 하자.

이제 테마를 Material Theme로 적용해보자.

AndroidX로 migrate해서 Material 테마를 전적으로 사용하고자 하는 경우

AndroidManifest.xml파일에서 Application에 초기값으로 적용하고 있는 AppTheme를

styles.xml을 통해 parent="Theme.AppCompat.Light.DarkActionBar"를

parent="Theme.MaterialComponents.Light.DarkActionBar"

으로 적용하면, 이후에 사용되는 View들, 예를 들어 Button과 같은 객체들을 일일이

<com.google.android.material.button.MaterialButton>이런 형태 대신에

<Button>으로 사용할 수 있게 된다.

적용한 뒤 모습은 다음과 같은데, 어떤 특별한 튜도 추가하고 적용하지 않았기에 그대로 보일 것이다.

Material Design이 적용되었으나 아직은 차이를 느낄 수가 없다.

어쨌든 우선 1차적으로 Material Design의 컴포넌트들을 사용할 준비가 완료되었다.

이제 activity_main.xml로 들어가 다음과 같이 TextView를 Button으로만 변경하여 다시 실행시켜보자.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

이랬던 버튼이

Material Design 적용하기 전 버튼

다음의 모습으로 예쁘게 변경되었다!

Material Design이 적용된 버튼 모습