Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to properly design/style a Android Navigation Drawer [closed]

Tags:

Im having trouble find any resources on how to properly design a standard Navigation Drawer. I've got the below XML and am looking for ways to Populate multiple listviews, change font of text in listview etc.

Im trying to design similar to some of the following designs.

enter image description here

Im looking to find documents, Guides, code, examples or some direction besides referencing me to the Design doc . Im looking for more actual code on how to properly adapt this new Android Design pattern not just idea's of how they could look.

NavDrawer

 <android.support.v4.widget.DrawerLayout         xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent">  <FrameLayout     android:id="@+id/content_frame"     android:layout_width="match_parent"     android:layout_height="match_parent" />  <ListView     android:id="@+id/left_drawer"     android:layout_width="240dp"     android:layout_height="match_parent"     android:layout_gravity="start"     android:choiceMode="singleChoice"     android:divider="@android:color/transparent"     android:dividerHeight="0dp"     android:background="#ffffff"/>  </android.support.v4.widget.DrawerLayout> 

TextView

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:attr/activatedBackgroundIndicator" android:gravity="center_vertical" android:minHeight="?android:attr/listPreferredItemHeightSmall" android:paddingLeft="16dp" android:paddingRight="16dp" android:text="Loading Content ..." android:textAppearance="?android:attr/textAppearanceListItem" android:textColor="#000000" /> 
like image 852
Jaison Brooks Avatar asked Aug 13 '13 06:08

Jaison Brooks


People also ask

How do I customize my navigation drawer?

Android App Development for BeginnersStep 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Step 3 − Add the following code to res/layout/nav_header_main.

Which layout is used for navigation drawer?

The drawer icon is displayed on all top-level destinations that use a DrawerLayout . To add a navigation drawer, first declare a DrawerLayout as the root view. Inside the DrawerLayout , add a layout for the main UI content and another view that contains the contents of the navigation drawer.

Why do we use the navigation drawer in Android app?

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon. Navigation drawers are recommended for: Apps with five or more top-level destinations.


1 Answers

You can use any ViewGroup like a LinearLayout for your Drawer. It is not limited to a ListView and a FrameLayout. Because of this you can style your Drawer View like any other layout of an Activity for example. The only thing you should keep in mind is that the NavigationDrawer can have only two childs. The first is your layout for the Activity and the second is the Drawer. Feel free to style them as you like!

<android.support.v4.widget.DrawerLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent">  <FrameLayout     android:id="@+id/content_frame"     android:layout_width="match_parent"     android:layout_height="match_parent" />  <!-- YOUR DRAWER --> <LinearLayout     android:id="@+id/drawer_view"     android:layout_width="240dp"     android:layout_height="match_parent"     android:orientation="vertical"     android:layout_gravity="start">      <!-- Use any Views you like -->     <ListView         android:id="@+id/left_drawer"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:choiceMode="singleChoice"         android:divider="@android:color/transparent"         android:dividerHeight="0dp"         android:background="#ffffff"/> </LinearLayout> </android.support.v4.widget.DrawerLayout> 
like image 139
Steve Benett Avatar answered Oct 16 '22 16:10

Steve Benett