Android - Easy/comfortable way to design DrawerLayout using Android Studio?

Question

In my app I have implementer the DrawerLayout for one of the activities, and added a listView in the center of the activity. In order to add items (Buttons and textView etc..) I add them manually by editing the XML layout file (by adding raw attributes to the page). Is there any way to design the drawer in Android Studio just like you design a simple Activity? I added a screen shot of how it looks in my Studio, all the elements appear on the left of the page, outside of the emulator.

DrawerLayout design AndroidStudio

EDIT: Here is my XML layout:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- The first child in the layout is for the main Activity UI-->

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin"
            tools:context=".MainActivity"
            android:background="#ffffffff">

            <ListView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/listViewChat"
                android:layout_centerHorizontal="true"
                android:choiceMode="multipleChoice" />

        </RelativeLayout>

        <!-- Side navigation drawer UI -->
        <RelativeLayout
            android:id="@+id/drawerContainer"
            android:layout_width="270dp"
            android:layout_height="match_parent"
            android:layout_gravity="left|start"
            android:background="@drawable/splash_background_blur"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:clickable="true">

            <!--this custom view serves as a dimmer for the drawer-->
            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#73000000"
                android:id="@+id/view1"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:focusableInTouchMode="true"/>


            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/editTextUserName"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="160dp"
                android:cursorVisible="false"
                android:textColor="#FFF"
                android:textSize="20sp"
                android:background="@null"
                android:maxLength="15"
                android:inputType="textNoSuggestions"
                android:hint="Enter user name"/>

            <Button
                android:layout_width="220dp"
                android:layout_height="35dp"
                android:text="@string/buttonSelectPhoto"
                android:id="@+id/buttonTakePhoto"
                android:background="@drawable/splash_button"
                android:textColor="#FFF"
                android:layout_marginTop="200dp"
                android:layout_marginLeft="25dp"
                android:layout_marginStart="25dp"/>

            <Button
                android:layout_width="220dp"
                android:layout_height="35dp"
                android:text="@string/buttonTakePhoto"
                android:id="@+id/buttonSelectPhoto"
                android:background="@drawable/splash_button"
                android:textColor="#FFF"
                android:layout_marginTop="250dp"
                android:layout_marginLeft="25dp"
                android:layout_marginStart="25dp"
                android:layout_alignParentStart="true"/>

            <Button
                android:layout_width="220dp"
                android:layout_height="35dp"
                android:text="@string/buttonTakeATour"
                android:id="@+id/buttonTakeTour"
                android:background="@drawable/splash_button"
                android:textColor="#FFF"
                android:layout_marginTop="300dp"
                android:layout_marginLeft="25dp"
                android:layout_marginStart="25dp"/>

            <!-- <ListView
                 android:id="@+id/navList"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"/>
            <LinearLayout android:focusable="true"
                android:focusableInTouchMode="true" android:layout_width="0px"
                android:layout_height="0px" />-->

        </RelativeLayout>

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

EDIT
I split the content of the drawer into a separate xml file and tried to add this content using the <include> tag. When I click on the "hamburger" (open drawer) icon the app crashes with java.lang.IllegalArgumentException: No drawer view found with gravity LEFT error. What is wrong with my layout?

The activity which utilizes the DrawerLayout and includes the new stand alone layout (drawer content):

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- The first child in the layout is for the main Activity UI-->
    <include layout="@layout/drawer_layout_and_content"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity"
        android:background="#ffffffff">

        <ListView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/listViewChat"
            android:layout_centerHorizontal="true"
            android:choiceMode="multipleChoice" />
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

Here's the custom layout which is used as the drawer in the main activity:
(drawer_layout_and_content.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:background="@drawable/splash_background_blur"
    android:id="@+id/drawerContainer">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#73000000"
        android:id="@+id/view1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:focusableInTouchMode="true"/>
    <Button
        android:layout_width="220dp"
        android:layout_height="35dp"
        android:text="@string/buttonSelectPhoto"
        android:id="@+id/buttonTakePhoto"
        android:background="@drawable/splash_button"
        android:textColor="#FFF"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="25dp"
        android:layout_marginStart="25dp"/>
</RelativeLayout>

post your layout xml please – Heshan Sandeepa Apr 08 '15 at 15:42 — Heshan Sandeepa, Apr 08 '15 at 15:42

score 1 · Accepted Answer · answered Apr 12 '15 at 06:46

1

You can use the include key word to do that. First, create a layout file called drawer_content.xml, then do <include layout="@layout/drawer_content">. Then you code drawer_content.xml just like a layout file of an Activity or a Fragment. And if you want to know more details, check here.

answered Apr 12 '15 at 06:46

SilentKnight

13,761
19
49
78

Sounds interesting. You mean, I need to create a `RelativeLayout` as a stand alone xml file, place all my desired content inside it, and then, just `include` it inside the `DrawerLayout` of my choice? – Alex Apr 12 '15 at 06:53
1

@undroid yes, exactly. – SilentKnight Apr 12 '15 at 07:23
Thanks. I tried to separate this into a stand alone `drawer` layout which is included in my main activity, I get an exception `java.lang.IllegalArgumentException: No drawer view found with gravity LEFT`. Could you please take a look at the content i've just added to the original post? – Alex Apr 12 '15 at 07:44
Should this be declared in the Manifest somehow? – Alex Apr 12 '15 at 07:57
1

you should set `android:layout_gravity="left|start"` in the root view of your `drawer_layout_and_content`. – SilentKnight Apr 12 '15 at 12:21

Android - Easy/comfortable way to design DrawerLayout using Android Studio?

1 Answers1