네이게이션 드로어에 머티리얼 디자인 적용하기

안드로이드 5.0이 공개된 이후, 구글 앱들에 머티리얼 디자인이 속속히 적용되기 시작했습니다. 

그 중 대표적인 예가 플레이 스토어 앱인데요, 머티리얼 디자인이 적용된 것 외에 네비게이션 드로어 상태 버튼이 빙글빙글 돌아가는 애니메이션이 추가되었습니다.

머티리얼 디자인이 적용된 네비게이션 드로어. (출처: http://chrisrenke.com/drawerarrowdrawable/)

적용하는 방법은 크게 다음과 같이 정리할 수 있습니다.

• targetSdkVersion=21
• compile 'com.android.support:appcompat-v7:21.0.0'
• import android.support.v7.app.ActionBarDrawerToggle

간단한 예제를 통해 적용 절차를 알아보겠습니다.

프로젝트 설정

새 프로젝트를 생성한 후, 애플리케이션 모듈의 build.gradle 을 확인하여 targetSdkVersion과 appcompat-v7 버전을 다음과 같이 설정합니다.

최신 버전의 안드로이드 스튜디오로 프로젝트를 생성한 경우 이미 아래와 같이 설정되어 있을 것입니다.

android {

    compileSdkVersion 21

    buildToolsVersion "21.1.1"

    defaultConfig {

        applicationId "com.androidhuman.example.materialdrawer"

        minSdkVersion 9

        targetSdkVersion 21

        versionCode 1

        versionName "1.0"

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        }

    }

}

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:21.0.0'

}

액티비티 레이아웃 구성

다음으로, 네비게이션 드로어를 포함한 액티비티 레이아웃을 구성합니다.

이번 예제에선 기존의 액션바 대신 안드로이드 5.0부터 새로 등장한 툴바(Toolbar)를 사용하여 기존의 액션바를 대체합니다. 

툴바는 액션바와 완벽하게 동일한 역할을 하지만, 뷰(View) 형태로 구성되어 있어 액티비티 혹은 프래그먼트 레이아웃 내 어떤 곳이라도 자유롭게 배치할 수 있습니다. 이번 예제를 통해 툴바의 사용법이 궁금하셨던 분들은 참고하시면 좋을 것 같네요.

[activity_main.xml]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#303F9F"/>

        <View
            android:id="@+id/drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#3F51B5" />


    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

툴바를 제외한 DrawerLayout 구성 부분은 기존과 동일합니다. DrawerLayout 내에 메인 컨텐츠를 표시할 부분(@+id/container)과 드로어에 표시될 부분(@+id/drawer)을 정의해 주었습니다.

액션바를 툴바로 대체하기로 했으므로, 중복을 방지하기 위해 액티비티의 테마를 액션바가 없는 테마로 변경해야 합니다. 따라서, 예제 프로젝트 애플리케이션에서 사용하는 테마인 AppTheme를 다음과 같이 액션바가 없는 테마를 상속하도록 변경합니다.

[styles.xml]

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

네비게이션 드로어 설정

이제 액티비티 코드를 작성할 차례입니다. ActionBarActivity를 상속하는 액티비티를 생성한 후, 다음과 같이 코드를 작성합니다.

[MainActivity.java]

public class MainActivity extends ActionBarActivity {

    Toolbar toolbar;
    DrawerLayout dlDrawer;
    ActionBarDrawerToggle dtToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        dlDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        setSupportActionBar(toolbar);

        dtToggle = new ActionBarDrawerToggle(this, dlDrawer, R.string.app_name, R.string.app_name);
        dlDrawer.setDrawerListener(dtToggle);
    }

setSupportActionBar() 메서드는 인자로 받은 툴바를 액티비티의 액션바로 대체하는 역할을 합니다. 기본으로 제공되는 액션바 외에 별도로 툴바를 사용하고 싶다면 이 메서드를 호출하지 않고 툴바만 단독으로 사용하는 것도 가능합니다.

다음으로, 네비게이션 드로어 상태를 알려주는 아이콘을 표시하기 위해 ActionBarDrawerToggle을 생성하고 있습니다. 기존과 다를 바가 없어보이는데, 기존에는 support-v4 패키지 내의 ActionBarDrawerToggle을 사용했지만 이젠 support-v7 패키지의 ActionBarDrawerToggle을 사용합니다. 

v7 서포트 패키지를 사용하면서 v4 패키지 내의 ActionBarDrawerToggle을 사용할 경우, 네비게이션 드로어 상태에 따른 애니메이션이 더 이상 표현되지 않으므로 이를 v7 패키지로 변경해 주어야 합니다.

중요한 부분의 구현은 위에서 모두 끝났습니다.

이제 ActionBarDrawerToggle 동작을 위한 나머지 코드들을 추가합니다.

[MainActivity.java]

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        dtToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        dtToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (dtToggle.onOptionsItemSelected(item)) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

예제가 완성되었습니다. 애플리케이션을 실행하면 다음과 같이 머티리얼 디자인이 적용된 네비게이션 드로어가 동작하는 모습을 확인할 수 있습니다.

이 포스트에서 작성한 예제 코드는 다음 주소에서 확인하실 수 있습니다.

https://github.com/kunny/blog_samples/tree/master/Android/2014-11-16_Material_Navigation_Drawer