I'm developing an Android application with the Android Studio template "Navigation Drawer Activity" but if I open the navigation drawer on a phone with Notch/display Cutouts the bigger status bar cover the top of the Navigation Drawer header.
How could I fix this?
Here are the Activity layout 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:background="#color/colorPrimaryDark">
<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>
And the navigation drawer header layout:
<LinearLayout 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="#drawable/navbar_size_edit"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin_bar_bottom"
android:paddingLeft="#dimen/activity_horizontal_margin_bar"
android:paddingRight="#dimen/activity_horizontal_margin_bar"
android:paddingTop="#dimen/activity_vertical_margin_bar"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/nav_header_desc"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:paddingBottom="#dimen/activity_vertical_margin_bar_bottom"
app:srcCompat="#mipmap/avatar_me_round" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:text="#string/app_name"
android:textStyle="bold"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_version" />
</LinearLayout>
Change the attribute of android:fitsSystemWindows="true" to android:fitsSystemWindows="false". This is what worked for me.
To be more specific than Adarsha Nayak V, set android:fitsSystemWindows to false in your NavigationView:
<androidx.drawerlayout.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!-- Other elements... -->
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:headerLayout="#layout/navigation_drawer_header"
app:menu="#menu/navigation_drawer"/>
</androidx.drawerlayout.widget.DrawerLayout>
Related
I am using a custom Toolbar for my Android App So that I can style my app title and while doing so I have noticed that the alignment of the title and the side navigation panel icon are not in an order and I am unable to figure out how to resolve this
This is the code of the xml layout
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/drawer"
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"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Theme.AppCompat.DayNight.DarkActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:title=" "
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="#font/satisfy_regular"
android:text="CodeRem"
android:textColor="#3C4A63"
android:textSize="35sp"
/>
</androidx.appcompat.widget.Toolbar>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/frag"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.coderem.Home"
/>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
I am using navigation drawer in my app, i have a requirement to add chevron at the end of each row like following
Following is my code.
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:fitsSystemWindows="true"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
android:background="#color/nav_base_color"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemTextAppearance="#style/navigationFontStyle"
app:headerLayout="#layout/nav_header_layout"
app:menu="#menu/navigation" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:fitsSystemWindows="true"
android:visibility="visible"
app:headerLayout="#layout/nav_header_sample_drawer"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#212121">
then here is nav_header_sample_drawe
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:paddingTop="20dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<include
android:id="#+id/drawer_layout"
layout="#layout/navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
</LinearLayout>
</layout>
And Then in layout="#layout/navigation_drawer"
you can add your custom layout
I am creating an app, and I want to have a Navigation Drawer and a Bottom Bar in the app.
I think that I am going for a good way, but I Can do that the Navigation Drawer when I display it, this is not above the Bottom Bar, it is behind, so How can I do it? I need the Navigation Drawer up of the Bottom Bar.
This is my code, I hope you can help me, thanks n.n
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.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">
<include
layout="#layout/include_list_viewpager" />-
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="300dp"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorPrimaryRed"
app:itemTextColor="#drawable/nav_item_color_state"
app:itemIconTint="#drawable/nav_item_color_state"
app:menu="#menu/navigation" />
</RelativeLayout>
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
----- text showing -----/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
app:itemTextColor="#color/colorAccent"
app:itemIconTint="#color/colorWhite"
app:menu="#menu/bottom_navigation_item"/>
</RelativeLayout>
<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" />
You could try
<?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:context="com.example.chuks.vibefmbenin.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<!-- The main content that loads the fragments -->
<FrameLayout
android:id="#+id/frament_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Setting the corodinator layout inorder to pull the bottom
navigation view down to the bottom-->
<android.support.design.widget.CoordinatorLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"> <!--The bottom navigation -->
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/navigation_bottom"/>
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/navigation_menu"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
There are two possible solutions to your problem.
It's quite easy. Give your BottomNavigationView a certain height, let's say 56dp and then give this as marginBottom of NavigationView.
Keep it as it is. Just assign your DrawerLayout's property layout_above="#+id/bottom_navigation.
for me the bottom navigation fails to be positioned at bottom until I try this 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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="#color/bgBottomNavigation"
android:foreground="?attr/selectableItemBackground"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/navigation" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:menu="#menu/drawer_view" />
So you can give it try!
and great thanks to
TechTree
for his answer
How can I add a footer to a NavigationView? In my case the NavigationView items are inflated by menu resource. Initially I tried to add a LinearLayout as a footer, but the NavigationView is not scrollable and the footer gets overlapped by the navigation menu items. I want to implement a Google Play rating segment as a footer exactly like this image:
navigation_drawer.xml:
<LinearLayout
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:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/app_name" />
<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_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/drawerLayout">
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/containerView">
</FrameLayout>
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/shitstuff"
app:itemTextColor="#color/green"
app:menu="#menu/drawermenu"
app:headerLayout="#layout/drawer_header"
android:layout_marginTop="-24dp">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
It's really simple:
just wrap the desired footer in your NavigationView. You can use mine as an example - works like a charm!
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/navigation_header"
app:itemTextColor="#android:color/black"
app:menu="#menu/drawer_view">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="#+id/nav_footer_textview"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Your Footer Text Here" />
</LinearLayout>
</android.support.design.widget.NavigationView>
You can use any (more or less complex) layout that way.
(Afaik this footer won't scroll and will be fixed).
You can use NavigationView
<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/layout_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<!-- Activity content goes here -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="top"
app:menu="#menu/menu_navigation_drawer" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/menu_navigation_drawer_bottom" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
http://answermega.livedoor.biz/archives/1038944871.html
https://github.com/mikepenz/MaterialDrawer
https://github.com/rudsonlive/NavigationDrawer-MaterialDesign
<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:itemIconTint="#color/colorAccent"
app:menu="#menu/activity_main_drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="#+id/nav_footer_textview"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Your Footer Text Here" />
</LinearLayout>
</android.support.design.widget.NavigationView>
And for performing click on it:
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
TextView footerTV = (TextView) navigationView.findViewById(R.id.nav_footer_textview);
footerTV.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "Footer is clicked", Toast.LENGTH_SHORT).show();
}
});
I have a problem making a Navigation Drawer in my App:
In the Screenshot below you can see the darker area in the Navigation View...
Can anybody tell me how to remove this darker area?
The second issue: Why does the Margin-Top not work?
You see that the "Large Text" isn't shown correctly!
Here's my code:
-main_activity:
<?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"
android:id="#+id/drawer_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/nav_view"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav_drawer_menu" />
</android.support.v4.widget.DrawerLayout>
-nav_header
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/txvAccountname"
android:paddingLeft="10dp"
android:paddingTop="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/txvAccountemail"
android:paddingLeft="10dp"
android:paddingTop="5dp" />
</LinearLayout>
To change the background color on navigation drawer interactions, use this method:
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.setScrimColor(Color.TRANSPARENT);
//or you can use Color.parseColor("#00FFFFFF"); too
Need xml layout code for the other question.
Can anybody tell me how to remove this darker area?
Remove this line in the XML
android:background="#color/colorAccent"
Also, see if this looks any better. Not sure if you need the Toolbar, but it looks like you are using the AppCompatActivity.
<LinearLayout
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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Real content goes here -->
<include
layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<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"
app:menu="#menu/nav_drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>