애플리케이션에 머티리얼 디자인을 적용하다 보면, 이전에 사용하던 아이콘과 궁합이 맞지 않는 경우가 많습니다. 디자이너가 있는 앱이라면 새로 아이콘을 제작하면 되지만, 디자이너 없이 개인 개발자 한 명 만으로 만드는 앱의 경우 새로운 아이콘을 제작한다는 것이 보통 쉬운 일이 아닙니다. 이러한 고충을 덜어 주기 위한 것인지, 구글에서는 2014년 머티리얼 디자인을 발표한 이후 이에 어울리는 여러 아이콘들을 Github 저장소를 통해 제공했습니다. 당시엔 단순히 제공되는 아이콘들의 모양과 이름만 조회할 수 있었는데요, 최근 구글 I/O 2015 이후 해당 페이지가 개편되어 아이콘을 조회하는 것 뿐 아니라 색상, 크기별로 바로 다운로드 할 수 있는 기능이 추가되었습니다. 업데이트된 페이지는 아래 링크에서 확인할..

네비게이션 드로어는 꽤 오래 전부터 널리 사용되던 패턴 중 하나입니다. 그러다 보니, 공식 버전의 네비게이션 드로어가 없을 때부터 시작하여 현재 널리 사용되는 AppCompat 버전의 네비게이션 드로어까지 생각보다 다양한 종류의 구현이 있습니다. 하지만, 지금까지 네비게이션 드로어에 대한 정확한 가이드라인은 없었습니다. 때문에, 같은 패턴임에도 불구하고 다른 동작과 외형을 보여주게 되어 사용자들에게 혼란을 주기도 했습니다. 이 문제를 구글에서도 인식했는지, 안드로이드 5.0과 함께 발표된 '머티리얼 디자인'의 가이드라인에서는 네비게이션 드로어가 어떻게 표시되어야 하는지 명확하게 제시하고 있습니다. 다음 그림을 통해 휴대폰과 태블릿에서 네비게이션 드로어가 어떻게 표현되어야 하는지 확인할 수 있습니다. (그..

안드로이드 5.0이 공개된 이후, 구글 앱들에 머티리얼 디자인이 속속히 적용되기 시작했습니다. 그 중 대표적인 예가 플레이 스토어 앱인데요, 머티리얼 디자인이 적용된 것 외에 네비게이션 드로어 상태 버튼이 빙글빙글 돌아가는 애니메이션이 추가되었습니다. 머티리얼 디자인이 적용된 네비게이션 드로어. (출처: http://chrisrenke.com/drawerarrowdrawable/) 적용하는 방법은 크게 다음과 같이 정리할 수 있습니다. targetSdkVersion=21compile 'com.android.support:appcompat-v7:21.0.0'import android.support.v7.app.ActionBarDrawerToggle 간단한 예제를 통해 적용 절차를 알아보겠습니다. 프로젝트 ..

지금까지 네비게이션 드로어와 프래그먼트를 연동하여 사용하는 방법에 대해 알아 보았는데요, 앞에서 만든 예제들은 '탄탄한 애플리케이션'을 위한 대비가 제대로 되어 있지 않습니다. 바로, '액티비티 생애주기'를 고려하고 있지 않습니다. 안드로이드 애플리케이션에서 화면을 표시하는 역할을 담당하는 액티비티는 동작 모습에 따라 여러 상태를 가지며, 각 상태가 변경될 때마다 그에 맞는 콜백 메서드가 호출되어 개발자가 각 상태에 알맞는 작업을 할 수 있게끔 구성되어 있습니다. 그런데, 액티비티는 별도의 예외 처리를 하지 않는 한 시스템 환경이 변할 때 새로 생성됩니다. 즉, 처음부터 다시 생애주기 메서드가 호출되므로 이전의 액티비티 상태 정보를 잃게 됩니다. 그러므로, 액티비티 상태가 변하더라도 기존에 사용하던 액티..

네비게이션 드로어와 프래그먼트를 사용하다 보면, 현재 사용중인 프래그먼트에 해당하는 메뉴(액션 아이템)을 표시해야 할 때가 있습니다. (사실, 앱을 만들다 보면 아주 간단한 앱이 아닌 이상 프래그먼트 별로 각각 다른 메뉴를 제공하는 것이 일반적이죠) 이번 포스트에서는 네비게이션 드로어와 프래그먼트를 사용하면서, 프래그먼트에 포함된 메뉴를 처리하는 방법을 알아보겠습니다.이전 포스트 (2014/06/02 - 네비게이션 드로어 활용 - (1) 프래그먼트와 연동하기)에 이어서 진행되는 내용이므로, 이전 포스트에서 구현한 내용은 추가로 설명하지 않습니다. 궁금하신 분들은 이전 포스트를 참고해 주세요. 프래그먼트에 메뉴 구현하기 프래그먼트가 소개되지 않았던 예전에는 액티비티에 직접 메뉴를 구현했습니다. 하지만, 프..

네비게이션 드로어(Navigation drawer)는 최근 출시되는 대다수의 안드로이드 애플리케이션에서 사용하고 있는 UI 구성 요소입니다. 이전 포스트(2013/11/05 - 네비게이션 드로어(Navigation Drawer) 사용하기)에선 네비에게이션 드로어 자체에 대한 내용을 주로 다루었는데, 이번 포스트에서는 프래그먼트와 네비게이션 드로어를 함께 사용하여 실제 애플리케이션에 적용하는 방법에 대해 알아보겠습니다. 화면에 표시할 프래그먼트 생성 예제 프로젝트에선 다음 두 프래그먼트를 네비게이션 드로어와 연결하여 사용할 것입니다. TextFragment (문자열을 표시하는 프래그먼트)ImageFragment (이미지를 표시하는 프래그먼트) 텍스트를 표시하는 프래그먼트인 TextFragment를 먼저 생..

네비게이션 드로어(Navigation drawer)는 액션바와, 프래그먼트와 함께 애플리케이션의 깊이(Depth)를 크게 줄이고,사용자에게 조금 더 직관적인 UI를 제공할 수 있는 UI 요소입니다. 네비게이션 드로어의 주요 구성요소 및 주된 상호작용 방법을 그림으로 요약하면 다음과 같습니다. 네비게이션 드로어를 구성하기 위한 절차는 크게 다음과 같습니다. 1. 레이아웃 구성2. 드로어 내 메뉴 리스너 구현하기3. 액션바 토글 구현하기 (드로어 열림/닫힘 상태 감지 및 앱 아이콘을 이용한 열기/닫기 지원) 레이아웃 구성 네비게이션 드로어를 사용하려면 DrawerLayout을 최상위 뷰로 사용해야 합니다. DrawerLayout은 안드로이드 표준 플랫폼이 아닌 Support Library v4에 포함된 클래..

구글 플레이 스토어와 같이 三 이렇게 생긴 버튼을 클릭하거나, 왼쪽 부분을 가운데로 드래그 하면 navigation drawer가 나타납니다. 아래는 해당 예제 스크린샷입니다.

activity_main.xml MainActivity.java @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mTabHost = (TabHost) findViewById(android.R.id.tabhost); setupTab(new TextView(this), "Tab 1"); setupTab(new TextView(this), "Tab 2"); setupTab(new TextView(this), "Tab 3"); } private void setupTab(final View view, final String tag) { ..