How to integrate expandable list view inside navigation drawer? - android

I created a project for my expandable list view. Also, in my other main project, I created a navigation drawer. Everything works fine as it is own. Unfortunately, I want to show this expandable list view inside my navigation drawer and I don't know where to start. I feel like there should be minor additions (already have adapter and stuff) but seriously I have no idea about how to implement the layout inside the drawer. I searched about this topic and all examples and answers are not so clear to me.
Can you please point me to the right direction?

You can do it by adding ExpandableListView in NavigationDrawer like below:
You can create it using custom ListView.
See the code below activity_navigation_view.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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="match_parent"
android:fitsSystemWindows="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<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:fitsSystemWindows="true">
<ExpandableListView
android:id="#+id/navigationmenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="192dp"
android:background="#android:color/white">
</ExpandableListView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
And Simply create adapter for it and use it like a normal ExpandableListView.

Make a custom Layout to use custom navigation view as given below in (layout_nav_bar.xml):-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<include
android:id="#+id/nav_header"
layout="#layout/nav_header_main"
/>
<ExpandableListView
android:id="#+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:overScrollMode="never"
android:background="#android:color/white"
android:divider="#null"
android:groupIndicator="#null" />
</LinearLayout>
Add this to your DrawerLayout
<include
android:id="#+id/nav_view"
layout="#layout/layout_nav_bar"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:layout_width="match_parent"/>

Related

Spinner can be clicked on top of Navigation menu

I have a navigation menu with some items. The problem that I am facing is the Spinner items and other UI elements which is underneath the menu when it is open remains clickable even when the menu is on top of those, as explained in the figure.
Here is my activity layout files.(activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner
android:id="#+id/delivery_area_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:background="#android:color/transparent"
android:gravity="center"
android:spinnerMode="dropdown" />
<include layout="#layout/layout_drawer_navigation" />
</RelativeLayout>
This is my navigation drawer layout.
<?xml version="1.0" encoding="utf-8"?>
<merge 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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true">
<android.support.v4.widget.DrawerLayout
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="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/layout_main_navigation_header"
app:menu="#menu/main_drawer_menu" />
</android.support.v4.widget.DrawerLayout>
I tried to look for solutions and found that for many people setting android:clickable="true" does the trick but in my case that is also not working.'

NavigationView with ExpandableListView not scrolling

I have a problem within my NavigationView.
I created the view from the standard forms in Android Studio and then changed it so that it looks as i want , but i have 2 problems.
While working on it i saw that i cannot use the standard menu items because i need custom layouts in my menu items. So i implemented that as ExpandableListView.
When i expand the ExpandableListView (quite standard with own
adapter) the image blow is overlapping my list items.
The second issue is that if i expand all, but not all child are shown
and the scrolling doesn't work.
Does someone have a hint how i can accomplish this ?
Here's my code:
<?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_dash_board"
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="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_dash_board">
<!--app:menu="#menu/activity_dash_board_drawer">-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/navigationmenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="192dp"
android:background="#android:color/white"
android:groupIndicator="#null"
android:soundEffectsEnabled="false">
</ExpandableListView>
</LinearLayout>
<ImageView
android:id="#+id/img_logo"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="bottom|center"
android:contentDescription="#string/its_just_a_logo"
app:srcCompat="#drawable/logo" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

How can i create Grid like view using Menu Item in android NavigationView

I have an android application with navigation drawer. It has list of menu like Gmail application 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"
tools:openDrawer="left">
<include
layout="#layout/app_bar_dashboard"
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"
app:headerLayout="#layout/nav_header_dashboard"
app:menu="#menu/activity_dashboard_drawer" />
I want that menu list to be a grid like view. how can i achieve that?
Instead of NavigationView you can use your custom layout. create a layout file with Grid design and include it here in this file instead of NavigationView
<LinearLayout
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
android:orientation="vertical">
<include layout="#layout/layout_grid_left" />
</LinearLayout>
and create layout_grid_left with your left View

Two scroll views for two-sided navigation drawer hides toggle

I have spent a lot of hours trying to find the problem with ActionBarDrawerToggle, but the problem is in my main layout.
Let me show what the problem is.
Here is example, how it looks like initally after application start.
As you can see hamburger is present but not shown right now.
Than if swipe drawer menu it appears.
It looks as it should look like, but it can disappear suddenly, when for example invalidateOptionsMenu() was called.
So I have tried to find the problem with toggle, but it is in my layout
Here is my layout xml file.
<?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/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear_layout_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:visibility="gone"
app:theme="#style/MainAppTheme.ToolbarMain"
app:titleTextAppearance="#style/MainAppTheme.Toolbar.Title" />
</LinearLayout>
<ViewStub
android:id="#+id/stub_progress_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inflatedId="#+id/progress_bar_buttons"
android:layout="#layout/view_stub_progressbar_bg" />
</FrameLayout>
<ScrollView
android:id="#+id/frame_layout_drawer_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fillViewport="true">
</ScrollView>
<ScrollView
android:id="#+id/frame_layout_drawer_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:fillViewport="true" />
</android.support.v4.widget.DrawerLayout>
The problem is in the last ScrollView, without last/right scroll view everything works fine. By the way this layout works fine with two drawers, but only hamburger is missed in this case.
I guess the problem is that navigation drawer toogle conflicts with two navgiation drawer view.
Because it doesn't matter what kind of view is with gravity end, it will not show hamburger in this case (if view with gravity end is present)
Please help to solve this problem, cause I have no idea how to deal with it, I need two drawers anyway.
Any help will be highly appreciated, thanks.
This is a pretty interesting issue but I think I have a solution. Well 2 solutions,
Have you creating a Frame Layout that houses two separate android.support.v4.widget.DrawerLayout layouts?
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--your content -->
<ScrollView
android:id="#+id/frame_layout_drawer_left"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/frame_layout_drawer_right"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
the imbed the second drawer layout inside of the root
android.support.v4.widget.DrawerLayout.
sample xml
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--your content -->
<ScrollView
android:id="#+id/frame_layout_drawer_left"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/frame_layout_drawer_right"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</android.support.v4.widget.DrawerLayout>

How to add other layout within NavigationView

I'm trying to add Expandlistview within my NavigationView but it fails.
Can I add layout below header?
activity_main layout
<android.support.v4.widget.DrawerLayout
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="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header">
<ExpandableListView
android:id="#+id/expanded_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
My solution would be .. if you are using header layout with specific height, for ex 200dp.. then in activity_main.xml include margin top 0f 210dp for expandable listview tag.. I hope you are not using menu for navigation view
<android.support.v4.widget.DrawerLayout
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="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header">
<ExpandableListView
android:id="#+id/expanded_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="210dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
you can use listview in navigation drawer list and append header view to the list which contains expandable listview. I am not sure but you can check it

Categories

Resources