I am testing first time an App with the new Navigation Drawer with the Material Design library.
My problem is, that when I select an item, then the whole selected item inclusive the icon are fully overlayed, like in the pictures shown below.
What can be my mistake here? I have tried several things, whitout success.
This is the XML with the Navigation Drawer:
<?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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
/>
</android.support.v4.widget.DrawerLayout>
<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="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:divider="#FFFFFF"
android:fitsSystemWindows="true"
android:background="#drawable/side_nav_bar"
app:itemTextColor="#FFFFFF"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
app:itemBackground="#drawable/drawer_item_background"
/>
in #layout/nav_header_main you can create your xml file contains header part for navigation drawer.
for drawer_item_background--
create xml file in drawable folder and paste below code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#48607B" />
</shape>
</item>
</layer-list>
app:menu contains menu item contained in navigation drawer.
this may be look like this:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_dashboard"
android:title="Dashboard" />
<item
android:id="#+id/nav_my_m3_account"
android:title="#string/my_account_fragment" />
<item
android:id="#+id/nav_notification_settings"
android:title="Notification Settings" />
<item
android:id="#+id/nav_faq"
android:title="FAQ" />
<item
android:id="#+id/nav_terms_condition"
android:title="Terms & Conditions" />
<item
android:id="#+id/nav_privacy_policy"
android:title="Privacy Policy" />
<item
android:id="#+id/nav_logout"
android:title="Log Out" />
</group>
</menu>
After try to reduce the External Libraries, I found out that this library was the problem:
it.sephiroth.android.library.targettooltip
But I dont know how to repair it. So I will remove this lib.
Related
Can I know why the texts inside the navigation drawer are not the same?
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.MainActivity"
tools:openDrawer="start">
...
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_navigation_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
----------
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Other">
<menu>
<item
android:icon="#drawable/ic_star"
android:title="Rate the app" />
<item
android:icon="#drawable/ic_share"
android:title="Share the app" />
<item
android:icon="#drawable/ic_shield"
android:title="Privacy policy" />
<item
android:icon="#drawable/ic_document"
android:title="Terms of services" />
</menu>
</item>
</menu>
Notice some items have bold texts and some items have regular texts.
Why is that happening?
I'm using Material Design 3.
The solution
<style name="styleName" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">#font/font_regular</item>
</style>
Then add this inside NavigationView
app:itemTextAppearance="#style/styleName"
I am trying to set a background color of Navigation bar. I tried all the methods but none of method is working. I also found simmilar posts and applied those changes also.
My XML file
<com.google.android.material.navigation.NavigationView
android:id="#+id/viewnav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
android:theme="#style/navigationTheme"
app:headerLayout="#layout/menu_header"
app:elevation="2dp"
app:itemTextColor="#color/md_blue_100"
app:menu="#menu/main_menu" />
I also tried in setting style.xml
<style name="navigationTheme" parent="Widget.MaterialComponents.NavigationView" >
<item name="colorPrimary">
#color/md_purple_500
</item>
<item name="colorControlHighlight">
#color/md_white_1000
</item>
<item name="android:background">
#color/md_white_1000
</item>
</style>
Any idea how can i change the color?
It's looking like below even after applying suggested changes.
enter image description here
My Activity.xml is:
<androidx.drawerlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start"
tools:context=".Home"
android:id="#+id/drwnav">
<com.google.android.material.navigation.NavigationView
android:id="#+id/viewnav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#drawable/navigation_background"
android:theme="#style/navigationTheme"
app:elevation="2dp"
app:headerLayout="#layout/menu_header"
app:itemTextColor="#color/md_blue_100"
app:menu="#menu/main_menu" />
<LinearLayout..... some other content
</LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>
app:headerLayout="#layout/menu_header"
Change #layout/menu_header background color to #android:color/transparent. or change color what you want to #layout/menu_header
Create a new empty drawable file and named it as "navigation_background" and then
paste this code in it:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<gradient
android:endColor="#FFFF"
android:startColor="#FFFF"
android:type="linear" />
<corners
android:bottomRightRadius="15dp"
android:topRightRadius="15dp" />
and then in your activity_main.xml :
<com.google.android.material.navigation.NavigationView
android:id="#+id/viewnav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#drawable/navigation_background"
android:theme="#style/navigationTheme"
app:headerLayout="#layout/menu_header"
app:elevation="2dp"
app:itemTextColor="#color/md_blue_100"
app:menu="#menu/main_menu" />
This is solved. It's my mobile dark mode Settings which was getting applied.
I am trying to add 5 icons on the bottom of the navigation bar. and this is what it came out like pic1. When I click on the bottom, other icons would show up only one at a time, shown in pic2. I need to make it look like the this picture, pic3.
Does anyone have any idea on what's wrong with the code?
These are the libraries that I am using:
implementation 'com.android.support:support-core-utils:27.1.1'
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'
Here is my bottom navigation layout view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavViewBar"
android:background="#drawable/white_grey_border_top"
app:menu="#menu/bottom_navigation_menu">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
Here is white_grey_border_top drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:top="1dp"
android:right="-1dp"
android:left="-1dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/grey" />
<solid
android:color="#color/white" />
</shape>
</item>
Here is my bottom_navigation_menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_house"
android:icon="#drawable/ic_house"
android:title="">
</item>
<item
android:id="#+id/ic_search"
android:icon="#drawable/ic_search"
android:title="">
</item>
<item
android:id="#+id/ic_circle"
android:icon="#drawable/ic_circle"
android:title="">
</item>
<item
android:id="#+id/ic_alert"
android:icon="#drawable/ic_alert"
android:title="">
</item>
<item
android:id="#+id/ic_android"
android:icon="#drawable/ic_android"
android:title="">
</item>
update:
when I add android:backgroundTint="#1091BF" to my bottom navigation layout view, then it works but the background is blue (pic4). Also, I notice that if I just change the android:color="#color/white" in my white_grey_border_top drawable file to any other color then all the icon would show up.
Try using the following inside your bottom navigation layout view.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:backgroundTint="#1091BF"
app:itemIconTint="#fff"
app:itemTextColor="#fff"
app:menu="#menu/navigation"/>
</android.support.constraint.ConstraintLayout>
Make sure to add dependency
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
How do you underline menu items in navigation drawer?
expectation:
reality:
#menu/activity_navigation_drawer:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_open_account"
android:title="#string/na_navigate_open_account" />
<item
android:id="#+id/nav_login"
android:title="#string/na_navigate_login" />
<item
android:id="#+id/nav_stock_signals"
android:title="#string/na_navigate_stock_signals" />
...
</group>
navigation drawer activity 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="end">
<include
layout="#layout/app_bar_navigation"
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="end"
android:fitsSystemWindows="true"
android:background="#color/primary_asphalt_dark"
app:headerLayout="#layout/nav_header_navigation"
app:menu="#menu/activity_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Tell me if some more code needed.
Each group ends with a line separator. Consequently, if each item in your menu has its own group you will achieve the desired graphical output:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/nav_open_account_group"
android:checkableBehavior="single">
<item
android:id="#+id/nav_open_account"
android:title="#string/na_navigate_open_account" />
</group>
<group android:id="#+id/nav_login_group"
android:checkableBehavior="single">
<item
android:id="#+id/nav_login"
android:title="#string/na_navigate_login" />
</group>
<group android:id="#+id/nav_stock_signals_group"
android:checkableBehavior="single">
<item
android:id="#+id/nav_stock_signals"
android:title="#string/na_navigate_stock_signals" />
</group>
...
</menu>
Note that the different ids for each group are required for this to work.
Press twice Shift
Open file design_navigation_menu_item.xml from com.android.support:design-26.1.0
Copy the file design_navigation_menu_item.xml into \app\src\main\res\layout to override it
Add android:paddingStart="#dimen/design_navigation_icon_padding" to CheckedTextView, make the file looks like this:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<CheckedTextView
android:id="#+id/design_menu_item_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawablePadding="#dimen/design_navigation_icon_padding"
android:paddingStart="#dimen/design_navigation_icon_padding"
android:gravity="center_vertical|start"
android:maxLines="1"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"/>
<ViewStub
android:id="#+id/design_menu_item_action_area_stub"
android:inflatedId="#+id/design_menu_item_action_area"
android:layout="#layout/design_menu_item_action_area"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</merge>
In your activity_main.xml add to your NavigationView app:itemBackground="#drawable/drawer_item_background_selector", it should be like this:
<android.support.design.widget.NavigationView
...
app:itemBackground="#drawable/drawer_item_background_selector"
.../>
Create drawable/drawer_item_background_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/drawer_item_background_selected" android:state_pressed="true" />
<item android:drawable="#color/drawer_item_background_selected" android:state_checked="true" />
<item android:drawable="#color/drawer_item_background_selected" android:state_focused="true" />
<item android:drawable="#color/drawer_item_background_selected" android:state_activated="true" />
<item android:drawable="#drawable/drawer_item_background_default" />
</selector>
Create drawable/drawer_item_background_default.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/drawer_transparent" />
<stroke
android:width="1dp"
android:color="#color/appGrayLight" />
<padding
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp" />
</shape>
In my app i want to change the navigation view menu background, but i dont know how to do this. All posts i have watched explains how to change each menu item background, but all i need is to change the entire background of the menu.
This is what i want to change, the entire white background:
activity_main_drawer.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="#+id/nav_camara" android:icon="#android:drawable/ic_menu_camera"
android:title="Import" />
<item android:id="#+id/nav_gallery" android:icon="#android:drawable/ic_menu_gallery"
android:title="Gallery" />
<item android:id="#+id/nav_slideshow" android:icon="#android:drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item android:id="#+id/nav_manage" android:icon="#android:drawable/ic_menu_manage"
android:title="Tools" />
</group>
<item android:title="Communicate">
<menu>
<item android:id="#+id/nav_share" android:icon="#android:drawable/ic_menu_share"
android:title="Share" />
<item android:id="#+id/nav_send" android:icon="#android:drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
Is there anyway to change the white background from the activity_main_drawer layout?
activity_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="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>
Thanks in advance.
You can set background to your NavigationView to change its color like below (set to app_white ) & for header set any color as a background of drawer_header_layout.
<android.support.design.widget.NavigationView
android:id="#+id/adcl_navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/app_white"
app:headerLayout="#layout/drawer_header_layout"
app:itemIconTint="#color/app_secondary_text"
app:itemTextColor="#color/app_secondary_text"
app:menu="#menu/menu_drawer"
app:theme="#style/ThemeOverlay.AppCompat.Light" />
just add android:background="#color/yourColor" to the <android.support.design.widget.NavigationView.