Android Navigation Drawer – Replace List with other List onClick

Question

I'm trying to implement a simple navigation drawer in material design, so there is a header at the top of my drawer and some text-items (A: CompactHeader Drawer, ...) (see picture 1). When the header-image is clicked, there should open a list (B: [email protected], ...) and "overwrite" my existing text-items (A) (see picture 2). If a text-item (B) is selected the original list (A) should be back at its original place and (B) is not visible anymore (see picture 1).

Note: These screenshots come from a tutorial, but the code was way too confusing. I'm looking for a relatively simple solution... I was thinking about Fragments, but I don't know if this is the right way to attack this problem.

Answer 1

There does not exist an API for this use case, which means, that it should be handled manually. Instead of inflating menu items from resources (/res/menu), you should provide your custom layout via app:headerLayout, which simulates those menu items: this layout contains both header sections and menu items sections constructed with ordinary layout.

So, having defined your root layout like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#7e25d1" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_view" />

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

Where navigation_view.xml is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/include"
        layout="@layout/header"
        android:layout_width="match_parent"
        android:layout_height="190dp" />

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

And header.xml is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="190dp"
    android:background="@drawable/background_material">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="60dp"
        android:layout_height="0dp"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="40dp"
        android:src="@drawable/profile"
        app:civ_border_color="#FF000000"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="4dp"
        android:text="John Doe"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/email"
        app:layout_constraintLeft_toLeftOf="@+id/profile_image"
        app:layout_constraintStart_toStartOf="@+id/profile_image" />

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="[email protected]"
        android:textColor="#fff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/username"
        app:layout_constraintStart_toStartOf="@+id/username" />

    <ImageButton
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:background="?selectableItemBackgroundBorderless"
        android:src="@drawable/ic_arrow_drop_down_black_24dp"
        android:tint="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

Then in activity:

    public class MainActivity extends AppCompatActivity {

        boolean initial = true;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
            View headerView = navigationView.getHeaderView(0);
            ImageButton arrow = headerView.findViewById(R.id.arrow);
            ViewGroup frame = headerView.findViewById(R.id.frame);
            frame.setOnClickListener(v -> toggle(arrow, frame));
            changeContent(frame);
            arrow.setOnClickListener(v -> toggle(arrow, frame));
        }

        private void toggle(ImageButton arrow, ViewGroup frame) {
            initial = !initial;
            arrow.setImageDrawable(ContextCompat.getDrawable(MainActivity.this, initial ? R.drawable.ic_arrow_drop_down_black_24dp : R.drawable.ic_arrow_drop_up_black_24dp));
            changeContent(frame);
        }

        private void changeContent(ViewGroup frame) {
            frame.removeAllViews();
            getLayoutInflater().inflate(initial ? R.layout.content1 : R.layout.content2, frame);
        }

    }

You'll get this output:

Provide your layout for content_1 and content_2 layout files to fit your use case.

Answer 2

Thank you a lot ! Based on answer @azizbekian and @Mohsen I will share my total solution which works perfectly and gives desired result.

So, having defined my root layout like this:

<?xml version="1.0" encoding="utf-8"?>
<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:openDrawer="start">


    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorFlatWhite"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:itemIconTint="@color/colorFlatDarkerGray"
        app:itemTextColor="@color/colorFlatDarkerGray"
        app:menu="@menu/navigation" />


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

Where nav_header_main.xml is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@color/colorFlatBlue"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">


    <android.support.v7.widget.CardView
        android:id="@+id/profile_image"
        android:layout_width="70dp"
        android:layout_height="0dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="40dp"
        android:shape="ring"
        app:cardCornerRadius="35dp"
        app:cardElevation="0dp"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/img_profile"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="15dp"
            android:src="@drawable/ic_home"
            android:tint="@color/colorFlatFontColorBlack" />
    </android.support.v7.widget.CardView>


    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="4dp"
        android:text="John Doe"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/email"
        app:layout_constraintLeft_toLeftOf="@+id/profile_image"
        app:layout_constraintStart_toStartOf="@+id/profile_image" />

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="[email protected]"
        android:textColor="#fff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/username"
        app:layout_constraintStart_toStartOf="@+id/username" />

    <ImageButton
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:background="?selectableItemBackgroundBorderless"
        android:tint="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_arrow_downward_black_24dp" />


</android.support.constraint.ConstraintLayout>

Then in activity:

    NavigationView navigationView;
     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        navigationView = (NavigationView) findViewById(R.id.nav_view);
        View headerView = navigationView.getHeaderView(0);
        final ImageButton arrow = (ImageButton) headerView.findViewById(R.id.arrow);
        arrow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                toggle(arrow);
            }
        });
    }

    boolean initial=true;
    private void toggle(ImageButton arrow) {
        initial = !initial;
        arrow.setImageDrawable(ContextCompat.getDrawable(MainActivity.this, initial ? R.drawable.ic_arrow_downward_black_24dp : R.drawable.ic_arrow_upward_black_24dp));
        if(initial)
        {
            navigationView.getMenu().clear();
            navigationView.inflateMenu(R.menu.navigation);
            SetLeftMenuNavLabels();

        }else
        {
            navigationView.getMenu().clear();
            navigationView.getMenu().add("[email protected]").setIcon(  R.drawable.ic_home);
            navigationView.getMenu().add("[email protected]").setIcon(  R.drawable.ic_home);
            navigationView.getMenu().add("Add New Account").setIcon(  R.drawable.ic_add);
            navigationView.getMenu().add("Manage Accounts").setIcon(  R.drawable.ic_settings);
        }
    }

And this is desired output. Thank you to all!