CURRENT STATE: NavigationDrawer with a NavigationHeader and NavigationMenu items. The items are large in number so scrolling is required in order to access the items towards the bottom.
REQUIREMENT: When scrolling down to the bottom, the NavigationHeader should stay fixed
Here's my activity_main layout file
<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:fitsSystemWindows="true"
android:background="#00000000"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
/>
</android.support.v4.widget.DrawerLayout>
Here's my navigation_header_main layout file
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#3d3b3b"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#drawable/categories"
android:padding="1dp"
/>
</RelativeLayout>
P.S I am new to android dev. Please ask for more resources if required
Found a workaround. Definitely not the most efficient one. Please suggest if anything could be done from here.
<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:fitsSystemWindows="true"
android:background="#00000000"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer">
<include layout="#layout/nav_header_main"
<android.support.design.widget.NavigationView>
Definitely works. But the header layout is redundant
I know its too old question but i sharing a solution that's working for me:
1. PLACE nav_header_main inside NavigationView
<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"
app:menu="#menu/activity_main_drawer" >
<include layout="#layout/nav_header_main"/>
</android.support.design.widget.NavigationView>
2. ADD some empty item as suitable for your header height in #menu/activity_main_drawer file
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:enabled="false"
android:title=" " />
<item android:enabled="false"
android:title=" " />
<group android:checkableBehavior="single">
<item
android:id="#+id/home"
android:title="#string/home" />
......
</group>
</menu>
Hey guys I've come up with a solution for the nav_drawer and how we can implement the static nav_drawer without writing any extra coding.
I'm sharing git link of the project that I'm currently working on.
Thanks !!
Below is the activity_main.xml file and I've used Navigation View Menu
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_main_bg_shape"
android:orientation="vertical">
<Button
android:id="#+id/whats_cool"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="260dp"
android:layout_marginTop="400dp"
android:background="#drawable/buttonshape"
android:fontFamily="#font/delius_unicase"
android:shadowColor="#362802"
android:shadowDx="4"
android:shadowDy="3"
android:shadowRadius="10"
android:text="What's Cool"
android:textColor="#003931"
android:textSize="12sp" />
</LinearLayout>
<android.support.design.widget.NavigationView
app:headerLayout="#layout/nav_header"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/gray_white"
app:menu="#menu/nav_drawer"
android:layout_gravity="start"
app:itemTextColor="#color/darkBlue"
app:itemIconTint="#color/darkBlue"
>
<include layout="#layout/nav_header"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
And you don't need to make any changes into your header layout and nav_drawer.
Just wrap the navigation view into a linear layout
<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"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header_main"/>
<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="#00000000"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer"/>
</LinearLayout>
Remove orientation from RelativeLayout. It doesn't support it
Set android:gravity="bottom" for parent RelativeLayout of header view.
My mistake, It will still scroll. You need to have custom recycler view for your navigation menu. So it scrolls in it's own container
<com.google.android.material.navigation.NavigationView
android:id="#+id/NavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_rectangle"
app:itemTextColor="#color/white"
app:headerLayout="#layout/hidder_layout"
app:itemIconTint="#color/purple_700"
android:layout_gravity="start"
app:menu="#menu/navigation_menu" >
<include
layout="#layout/hidder_layout"/>
</com.google.android.material.navigation.NavigationView>
Related
I have a menu drawer with several items, and for some reason the items don't take the whole width of the drawer, even though layout_width is match parent.
Here's the drawer_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/drawer_user_current"
android:title=""
app:actionLayout="#layout/nav_drawer_current_user_profile" />
</menu>
Here is nav_drawer_current_user_profile.xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/img_chat_room_icon"
android:layout_width="#dimen/size_large"
android:layout_height="#dimen/size_large"
android:src="#drawable/ic_person_avatar_blue_24dp" />
<TextView
android:id="#+id/txt_user_profile_nav_drawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="Current user"
android:textColor="#color/light_blue"
android:textSize="#dimen/nav_drawer_font_size" />
</LinearLayout>
The drawer itself is in this file base_layout.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"
tools:openDrawer="start">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_menu_chat"/>
And this is how the menu is rendered
How can I make the item to be in the right, and to take all the width of the drawer?
try
android:title="#null"
in menu item
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
app:menu="#menu/drawer_menu_chat"/>
I have an issue with my activity_main.xml in which the bottombar as shown in my layout below appears to cut off the bottom of my main fragment container and is layered on top of it instead of appearing below it.
The bottombar should appear below the main conatiner instead of layering above it.
Can someone please help me as I have tried everything.
<?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_new"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/my_toolbar"
layout="#layout/toolbar">
</include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fragmentContainerNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/bottomBar" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBarNew"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="#xml/bottombar_tabs" />
</RelativeLayout>
</LinearLayout>
<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"
app:menu="#menu/activity_main_drawer" />
bottom part of activity_main
You forgot to add proper id #+id/bottomBarNew, Change your value:
<FrameLayout
android:id="#+id/fragmentContainerNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/bottomBarNew" /> //<---here
i am new with navigation drawer. I want to Create layout for my mainactivity, but why overlap so my main layout not visible, may you help me. Thanks for answer
This is my activity_main.xml layout :
<?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"
android:background="#drawable/splashscreen">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jaakkk"
android:textColor="#ffffff" />
</FrameLayout>
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
How can I do to change that?
So, your problem is drawer layout overlapping the linear layout below. Use
u can add this line in
<android.support.design.widget.NavigationView
android:layout_below="#id/drawer_layout"/>
I have used two color: light color #607D8B for app bar and dark color #455A64 for above appbar. But problem is, navigation drawer display two different color other then I mentioned. I don't know why the different color come to the navigation drawer. So, what can be done to solve this issue ?
content_main.xml
<?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="wrap_content" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="80dp"
android:background="#455A64"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/ex_list_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:childDivider="#00000000"
android:divider="#null"
android:groupIndicator="#null" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The app works good, except for the fact that when I enter some notes, the first note disappears behind the app bar.
How can I start that part from under the app bar?
3 notes, only 2 visible
xml:
<?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">
<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"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<ListView
android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".Notities">
<at.markushi.ui.CircleButton
android:layout_width="64dp"
android:layout_height="wrap_content"
app:cb_color="#color/primary"
app:cb_pressedRingWidth="8dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_add"
android:onClick="openEditorForNewNote"
android:minWidth="64dp"
android:minHeight="64dp" />
</RelativeLayout>
<include
layout="#layout/app_bar_notities"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--<Button-->
<!--android:id="#+id/button"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_alignParentBottom="true"-->
<!--android:layout_alignParentEnd="true"-->
<!--android:layout_alignParentRight="true"-->
<!--android:onClick="openEditorForNewNote"-->
<!--android:text="New note" />-->
</android.support.v4.widget.DrawerLayout>
The DrawerLayout and AppBar both seem to be set up incorrectly. Your DrawerLayout should only contain two children, one for the main content and one for the drawer content. The drawer content should be below the main content in your XML, and the layout_width for the drawer content should probably be a set dimension, usually 240dp. Something like this:
<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 android:id="#+id/content_frame" layout="#layout/content_frame"/>
<android.support.design.widget.NavigationView android:id="#+id/nav_drawer"
android:layout_width="#dimen/width_nav_drawer" android:layout_height="match_parent"
android:layout_gravity="start" android:choiceMode="singleChoice"
app:headerLayout="#layout/nav_header_main" app:menu="#menu/drawer_main"/>
</android.support.v4.widget.DrawerLayout>
Then your AppBar should be placed in a CoordinatorLayout in your content_frame, with your main content (your ListView) placed below:
<android.support.design.widget.CoordinatorLayout xmlsn: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.AppBarLayout android:id="#+id/app_bar"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="#+id/toobar"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:backgroud="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<include android:id="#+id/content_main" layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
And finally your ListView (or RecyclerView) can be placed in any kind of layout you choose (I chose a FrameLayout here):
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" android:id="#+id/layout_main"
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ListView android:id="#+id/list"
android:layout_width="match_parent" android:layout_height="match_parent"/>
</FrameLayout>
Also, if you noticed, I included the attribute app:layout_behavior="#string/appbar_scrolling_view_behavior" in my FrameLayout. This is important as it sets the behavior of the AppBarLayout and how it should react to your FrameLayout. Basically, it makes it so the view is below the AppBar, and can scroll if necessary.
Side Note:
I also noticed you are using the at.markushi.ui.CircleButton from an external library. This library was created before Google introduced the support library including the Floating Action Button, and is now deprecated. Since Google has introduced the new FloatingActionButton, you can use it in your CoordinatorLayout as the last element:
<android.support.design.widget.FloatingActionButton android:id="#+id/btn_action"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_standard" android:layout_gravity="end|bottom"
android:src="#drawable/ic_camera_white_24dp"
android:onClick="openEditorForNewNote"/>
You have to wrap the ToolBar and ListView in a RelativeLayout and give layout_below property to the ListView so that it comes below the ToolBar.
Something like this,
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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">
<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"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".Notities">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar_notities"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/android:list"
android:layout_below="#id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<at.markushi.ui.CircleButton
android:layout_width="64dp"
android:layout_height="wrap_content"
app:cb_color="#color/primary"
app:cb_pressedRingWidth="8dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_add"
android:onClick="openEditorForNewNote"
android:minWidth="64dp"
android:minHeight="64dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>