Fragments in Drawers

Fragments used as a navigation drawer is very efficient as you can change value and layout dynamically for the drawer. It helps you as on click of any option in the drawer you can change drawer content to show new value, especially updating of listview items is very easy.

So for adding fragment, just add the container to the drawer layout you can add the <fragment> as well but then you can’t cahnge the layout and here we are changing layout on click of a button.

<android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context=".BaseActivity">

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white_smoke"/>

        <FrameLayout
            android:id="@+id/left_frame"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"/>

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

<android.support.v4.widget.DrawerLayout

android:id="@+id/drawer"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".BaseActivity">

<FrameLayout

android:id="@+id/content_frame"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white_smoke"/>

<FrameLayout

android:id="@+id/left_frame"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"/>

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

Now prepare two fragment classes and there layout as you require

layout_one.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:facebook="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="190dp"
        android:background="@color/tan2">


        <TextView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="4dp"
            android:textColor="#FFF"
            android:textSize="@dimen/text_size_large"
            android:textStyle="bold"
            android:text="Welcome"
            android:gravity="center_horizontal|center_vertical"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"/>

        <TextView
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:gravity="center_horizontal"
            android:textColor="#fff"
            android:textSize="14sp"
            android:text="Please login for more sevices"
            android:layout_below="@+id/text1"/>

    </RelativeLayout>

    <ScrollView
        android:id="@+id/my_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header"
        android:padding="15dp">

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

               <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@color/turquoise4"
                    android:layout_margin="10dp"
                    android:onClick="login
                    <em>android:text="@string/login"</em>/>
               
           
            </LinearLayout>
    </ScrollView>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:facebook="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

<RelativeLayout

android:id="@+id/header"

android:layout_width="match_parent"

android:layout_height="190dp"

android:background="@color/tan2">

<TextView

android:id="@+id/text1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingBottom="4dp"

android:textColor="#FFF"

android:textSize="@dimen/text_size_large"

android:textStyle="bold"

android:text="Welcome"

android:gravity="center_horizontal|center_vertical"

android:layout_centerVertical="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"/>

<TextView

android:id="@+id/text2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:gravity="center_horizontal"

android:textColor="#fff"

android:textSize="14sp"

android:text="Please login for more sevices"

android:layout_below="@+id/text1"/>

</RelativeLayout>

<ScrollView

android:id="@+id/my_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/header"

android:padding="15dp">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@color/turquoise4"

android:layout_margin="10dp"

android:onClick="login

<em>android:text="@string/login"</em>/>

</LinearLayout>

</ScrollView>

</RelativeLayout>

layout_two.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:background="@color/white">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="190dp"
        android:background="@color/deep_sky_blue">

        <ImageView
            android:id="@+id/profile_image"
            android:layout_width="76dp"
            android:layout_height="76dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:background="@color/white"/>

        <TextView
            android:id="@+id/username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/email"
            android:layout_alignLeft="@id/profile_image"
            android:layout_alignStart="@id/profile_image"
            android:gravity="start"
            android:paddingBottom="4dp"
            android:textColor="#FFF"
            android:textSize="14sp"
            android:textStyle="bold"
            tools:text="Username"/>

        <TextView
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/username"
            android:layout_alignParentBottom="true"
            android:layout_alignStart="@id/username"
            android:layout_marginBottom="8dp"
            android:gravity="start"
            android:textColor="#fff"
            android:textSize="14sp"
            tools:text="User Email"/>

    </RelativeLayout>

    <ScrollView
        android:id="@+id/my_account_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header"
        android:padding="15dp">

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

            <TextView
                android:id="@+id/textview1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
               <em> android:onClick="onClicktextview1"</em>
                android:text="textview1"
                android:textColor="@color/black"
                android:textSize="@dimen/text_size_medium"
                android:clickable="true"
                />

            <TextView
                android:id="@+id/textview2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:text="textview2"
                android:textColor="@color/black"
                android:textSize="@dimen/text_size_medium"
                />

            <TextView
                android:id="@+id/textview3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:text="textview3"
                android:textColor="@color/black"
                android:textSize="@dimen/text_size_medium"
                />

        </LinearLayout>
    </ScrollView>
</RelativeLayout>

<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:background="@color/white">

<RelativeLayout

android:id="@+id/header"

android:layout_width="match_parent"

android:layout_height="190dp"

android:background="@color/deep_sky_blue">

<ImageView

android:id="@+id/profile_image"

android:layout_width="76dp"

android:layout_height="76dp"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_marginStart="20dp"

android:background="@color/white"/>

<TextView

android:id="@+id/username"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/email"

android:layout_alignLeft="@id/profile_image"

android:layout_alignStart="@id/profile_image"

android:gravity="start"

android:paddingBottom="4dp"

android:textColor="#FFF"

android:textSize="14sp"

android:textStyle="bold"

tools:text="Username"/>

<TextView

android:id="@+id/email"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@id/username"

android:layout_alignParentBottom="true"

android:layout_alignStart="@id/username"

android:layout_marginBottom="8dp"

android:gravity="start"

android:textColor="#fff"

android:textSize="14sp"

tools:text="User Email"/>

</RelativeLayout>

<ScrollView

android:id="@+id/my_account_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/header"

android:padding="15dp">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView

android:id="@+id/textview1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

<em> android:onClick="onClicktextview1"</em>

android:text="textview1"

android:textColor="@color/black"

android:textSize="@dimen/text_size_medium"

android:clickable="true"

<TextView

android:id="@+id/textview2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:text="textview2"

android:textColor="@color/black"

android:textSize="@dimen/text_size_medium"

<TextView

android:id="@+id/textview3"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:text="textview3"

android:textColor="@color/black"

android:textSize="@dimen/text_size_medium"

</LinearLayout>

</ScrollView>

</RelativeLayout>

Now make the fragment classes for both the layouts and in main activity dont forget to change the fragment on click of buttons and text.

public void login(View v) {
  Fragment_two f2 = new Fragment_two();
  getFragmentManager().beginTransaction().replace(R.id.right_frame, f2).commit();
}

public void onClicktextview1(View v){
 Fragment_one f1 = new Fragment_one();
 getFragmentManager().beginTransaction().replace(R.id.right_frame, f1).commit();
}

public void login(View v) {

Fragment_two f2 = new Fragment_two();

getFragmentManager().beginTransaction().replace(R.id.right_frame, f2).commit();

}

public void onClicktextview1(View v){

Fragment_one f1 = new Fragment_one();

getFragmentManager().beginTransaction().replace(R.id.right_frame, f1).commit();

}

And your layout will be changed with the onClick actions.

Aastha 15 December 2016

. . .

Fragments in Drawers

Leave a Comment Cancel Reply

Message Sent!