How to merge android View with DrawerLayout in XML

Question

I'm trying to do a sliding menu for my app which is activated when pushing a button but I don't have so big idea about how to achieve that. At the moment, I'm following this tutorial.

My problem at the moment is that I'm trying to merge the DrawerLayout with my Activity because I wanna launch the slide menu over the Activity that I already have. Here is the merged XML:

 <RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/pantallaPrincipalGenerarBackgroundView">

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/scrollView"

        android:fillViewport="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true">


        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Seleccione dificultad"
                android:id="@+id/textView"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:gravity="center_horizontal"
                android:layout_gravity="center_horizontal" />

            <RadioGroup

                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView"
                android:gravity="top|center"
                android:id="@+id/linearLayout"
                android:layout_gravity="bottom">

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Facil"
                    android:id="@+id/FacilButton"

                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="20dp" />

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Medio"
                    android:id="@+id/MedioButton2"
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="20dp" />

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Difícil"
                    android:id="@+id/DifícilButton"

                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="20dp" />


            </RadioGroup>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/linearLayout"
                    android:id="@+id/linearLayout2"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:weightSum="1">

                    <EditText
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:inputType="number"
                        android:id="@+id/longitudText"
                        android:hint="Introduce longitud"
                        android:singleLine="true"
                        android:layout_weight="0.45" />

                    <Button
                        android:layout_marginTop="0dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Generar"
                        android:id="@+id/Generarbutton"
                        android:layout_marginLeft="20dp" />
                </LinearLayout>

            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Pass"
                android:id="@+id/contraseniaActual"
                android:layout_below="@+id/linearLayout2"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:textColor="#ff1024ff"
                android:textSize="15dp"
                android:singleLine="true"
                android:shadowColor="#ff69ff00"
                android:layout_gravity="center_horizontal" />

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Usuario"
                    android:id="@+id/textView2"
                    android:layout_below="@+id/passwordText"
                    android:layout_centerHorizontal="true"
                    android:layout_gravity="center_horizontal" />

                <EditText
                    android:layout_width="229dp"
                    android:layout_height="wrap_content"
                    android:id="@+id/nombreUsuarioTextView"
                    android:layout_below="@+id/textView2"
                    android:layout_centerHorizontal="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentRight="true"
                    android:hint="Introduzca usuario"
                    android:layout_margin="7dp"
                    android:singleLine="true"
                    android:layout_gravity="center_horizontal" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Seleccione el servicio"
                    android:id="@+id/textView3"
                    android:layout_below="@+id/newUserText"
                    android:layout_centerHorizontal="true"
                    android:layout_gravity="center_horizontal" />

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center_horizontal">

                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Servicios"
                        android:drawableLeft="@drawable/flechaizquierda"
                        android:id="@+id/abrirListaServiciosButton"
                        android:layout_above="@+id/guardarButton"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true" />

                    <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_toEndOf="@+id/abrirListaServiciosButton"
                        android:gravity="center"
                        android:weightSum="1"
                        android:layout_alignTop="@+id/abrirListaServiciosButton"
                        android:layout_toRightOf="@+id/abrirListaServiciosButton"
                        android:layout_marginTop="0dp"
                        android:layout_alignRight="@+id/newUserText"
                        android:layout_alignEnd="@+id/newUserText">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textAppearance="?android:attr/textAppearanceMedium"
                            android:text="SERVICIOTEST0"
                            android:id="@+id/textoMostrarServicioSeleccionado"
                            android:textColor="#ff000000"
                            android:maxLength="13"
                            android:maxLines="1" />

                        <ImageView
                            android:layout_width="80dp"
                            android:layout_height="match_parent"
                            android:id="@+id/imageMostrarServicioSeleccionado"
                            android:layout_gravity="right" />
                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:layout_width="200dp"
                    android:layout_height="100dp"
                    android:text="Guardar"
                    android:id="@+id/guardarButton"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true" />

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_toEndOf="@+id/guardarButton"
                    android:id="@+id/linearLayout5"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"
                    android:layout_gravity="center_horizontal">

                    <Button
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:text="Salir"
                        android:id="@+id/salirycerrarPantallaGenerarButton"
                        android:layout_alignBottom="@+id/guardarButton"
                        android:layout_alignLeft="@+id/goToSegundabutton"
                        android:layout_alignStart="@+id/goToSegundabutton"
                        android:layout_margin="1dp"
                        android:layout_gravity="center_horizontal" />

                    <Button
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:text="Cancelar"
                        android:id="@+id/goToSegundabutton"
                        android:layout_alignTop="@+id/guardarButton"
                        android:layout_centerHorizontal="true"
                        android:layout_marginBottom="0dp"
                        android:layout_gravity="center_horizontal" />
                </LinearLayout>
            </LinearLayout>


        </LinearLayout>
    </ScrollView>

    <!-- Slide menu code, supuestamente. -->
    <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 to display Fragments -->
        <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Listview to display slider menu -->
        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp"
            android:listSelector="@drawable/list_selector"
            android:background="@color/list_background"/>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

As you can see at the bottom of the file, I just added out of all my activity but inside the parent RelativeLayout their DrawerLayout. Now the problem I'm getting is when addressing it from the java code.

When I do mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); it says that they are inconvertable types, cannot cast from android.view.View to android.support.v4.widget.DrawerLayout.

Any idea how could I do that?? I don't care about changing my code, but I want this menu to come over my activity, not over an empty one. I just didn't find any good tutorial or video tutorial over the internet.

Thank you so much :)

Answer 1

I suggest you to take a look at Google IO source code. You have there pretty good example of using DrawerLayout.

And it's easy.

First of all.

It's good to have DrawerLayout on top.

For example. MapActivity - activity_map.xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ui.phone.MapActivity">

    <com.google.samples.apps.iosched.ui.widget.ScrimInsetsFrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/capture_insets_frame_layout"
        app:insetForeground="@color/translucent_statusbar_background"
        android:fitsSystemWindows="true">

        <!-- Main layout -->
        <FrameLayout
            android:id="@+id/fragment_container_map"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <include layout="@layout/toolbar_actionbar_translucent" />

        <android.support.v7.widget.CardView
            android:id="@+id/fragment_container_popup"
            android:visibility="gone"
            android:clickable="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </com.google.samples.apps.iosched.ui.widget.ScrimInsetsFrameLayout>

    <!-- Nav drawer -->
    <include layout="@layout/navdrawer" />

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

And as you can see you have NavDrawer include at the end.

nadrawer.xml

<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/chosen_account_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/navdrawer_chosen_account_height"
        android:foreground="?photoItemForeground">

        <ImageView android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/default_cover"
            android:tint="@color/session_photo_scrim"
            android:id="@+id/profile_cover_image" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/keyline_1"
            android:paddingRight="@dimen/keyline_1"
            android:paddingTop="@dimen/keyline_1"
            android:id="@+id/chosen_account_content_view">

            <com.google.samples.apps.iosched.ui.widget.BezelImageView
                android:id="@+id/profile_image"
                android:layout_width="@dimen/navdrawer_profile_image_size"
                android:layout_height="@dimen/navdrawer_profile_image_size"
                android:src="@drawable/person_image_empty"
                android:scaleType="centerCrop"
                app:maskDrawable="@drawable/circle_mask" />

            <ImageView
                android:id="@+id/expand_account_box_indicator"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:visibility="gone"
                android:layout_marginLeft="16dp"
                android:paddingBottom="16dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentBottom="true"
                android:scaleType="center"
                android:src="@drawable/ic_drawer_accounts_expand" />

            <TextView
                android:id="@+id/profile_email_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/profile_image"
                android:layout_toLeftOf="@id/expand_account_box_indicator"
                android:layout_alignParentBottom="true"
                android:paddingBottom="16dp"
                android:textSize="@dimen/text_size_medium"
                android:textColor="@color/body_text_2_inverse"
                android:maxLines="1"
                android:singleLine="true"
                android:ellipsize="end" />

            <TextView
                android:id="@+id/profile_name_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@id/profile_email_text"
                android:layout_alignLeft="@id/profile_image"
                android:layout_toLeftOf="@id/expand_account_box_indicator"
                android:textSize="@dimen/text_size_large"
                android:textColor="@color/body_text_1_inverse"
                android:maxLines="1"
                android:singleLine="true"
                android:ellipsize="end" />

        </RelativeLayout>

    </FrameLayout>

    <FrameLayout android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- Account items -->
        <LinearLayout
            android:id="@+id/account_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="vertical"
            android:visibility="invisible" />

        <!-- Drawer items -->
        <LinearLayout
            android:id="@+id/navdrawer_items_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:orientation="vertical" />
    </FrameLayout>
</LinearLayout>

You'll find whole project here: https://github.com/google/iosched