태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

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

2014.11.16 21:46

안드로이드 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);
    }


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




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





저작자 표시 비영리 변경 금지
신고

커니 유저 인터페이스/Material Design , , , , , , , , , , , , ,

  1. Blog Icon
    iTiSt

    항상 도움을 받으면 개발하고 있습니다.
    이번 머테리얼테마를 적용하고 싶어서 따라해보고 있는데요.

    다른건 다 잘 되는데 토글이 표시가 안됩니다. 토글도 v7으로 추가했고, 나머지도 다 확인해봤는데 뭐가 문제 인지 모르겠습니다.
    다만 sdk버전을 21이 아니고 22버전으로 사용중이긴 한데...
    sdk버전 말고는 똑같이 따라했는데 왜 토글 버튼이 안나오는지 모르겠습니다.

    어떻게 해야 할까요??제가 뭔가 빠트린걸까요??

  2. Blog Icon
    iTiSt

    이것 저것 해보다가 해결했습니다.
    sdk22에서 변경이 된건지 예제에서 빠진 건지는 모르겠으나, 현재 22버전을 사용중인데
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    이걸 추가해주니 표시가되더군요..;;;;
    근데 이상한건 또 Toolbar에 배경색이 colorPrimary 색상을 지정해도 적용이 안되네요..;;;;;;점점 미궁으로 빠져들고 있네요..ㅎㅎㅎ;;;;

  3. Blog Icon
    iTiSt

    ㅎㅎ 툴바에 색상 지정이 안됐던것도 어떻게 하다보니 적용 됐습니다.
    저 같은 경우와 예제와의 차이는 모르겠으나, 일단 전
    android:background="?attr/colorPrimary"
    속성을 추가해야 적용이 되더라구요..;;ㅎㅎㅎ 저처럼 안돼시는 분은 참고하세요.ㅎ

  4. Blog Icon
    라인

    저도 지금 토글이 표시안되서.. ㅠㅠ 그랬는데.. 감사합니다!..
    저도 역시 안드로이드 5.1 SDK 22입니다..ㅎ
    5.0.2에서 잘되던앱이 안되서 당황했네요..ㅎㅎ;;

  5. Blog Icon
    질문

    작성자님,
    상단 메뉴를 액션바대신에 툴바를 이용한 이유가 있는지....알수있을까요?
    액션바+변하는메뉴+서랍메뉴가 전부 포함된 앱을 만들고싶은데 찾기가 쉽지않네요..

  6. Blog Icon
    석진

    deprecated 된 기술이 많이 사용되었네요. 따라하실분들은 소스를 좀 수정하셔야 합니다.

    일단 extend 받는 activity 조차 deprecated 입니다.

    1년도 안지났는데 이렇게 많은것들이 바뀌네요.

    업데이트가 필요할듯 합니다.

  7. 이거 예제만 업데이트 해 두고, 글을 수정을 못 하고 있네요..ㅠㅠ
    https://github.com/kunny/blog_samples/tree/master/Android/2014-11-17_Material_Navigation_Drawer_FullOverlay

    여길 기준으로 업데이트 할 예정이니 참고하세요~

  8. Blog Icon
    학생

    안녕하세요 업데이트된 예제로 진행이 잘되었는데요

    네비게이션뷰에 메뉴 4개를 넣어주셧는데

    해당 메뉴를 클릭할때마다 다른 액티비티로 이동을하고싶은데

    방법이없을까요?ㅜㅜ