Android Navigation Drawer - Replace list with another onClick list

Question

I am trying to implement a simple navigation box in material design, so there is a heading at the top of my box and some text elements (A: CompactHeader Drawer, ...) (see Figure 1). When clicking on the title, you should open the list (B: [e-mail] , ...) and “overwrite” my existing text elements (A) (see Figure 2). If text item (B) is selected, the source list (A) should return to its original location and (B) will no longer be displayed (see Figure 1).

Note. These screenshots were taken from a tutorial, but the code was too confusing. I am looking for a relatively simple solution ... I was thinking about Fragments, but I do not know if this is suitable for solving this problem.

Answer 1

In this case, there is no use of the API, which means that it should be processed manually. Instead of pumping up menu items from resources ( /res/menu ), you should provide your own layout using app:headerLayout , which imitates these menu items: this layout contains both headers and menu sections created using a regular layout .

So, defining the root layout as follows:

 <?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 :

 <?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 :

 <?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=" [e-mail] " 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 action:

 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); } }
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 will get this output:

Provide a layout for the layout files content_1 and content_2 according to your use case.

Answer 2

Thank you very much! Based on the answer of @azizbekian and @Mohsen, I will share my complete solution, which works great and gives the desired result.

So, defining your root layout as follows:

 <?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 :

 <?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=" [e-mail] " 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 action:

  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(" [e-mail] ").setIcon( R.drawable.ic_home); navigationView.getMenu().add(" [e-mail] ").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 the desired result. Thank you for everything!