I am trying to add a background as shown in the image, to the menu item in the android bottom navigation.
I have used the following selector as item background (selector_bottom_nav.xml)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp" android:left="-6dp" android:right="-6dp" android:drawable="#color/blue_light" android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#color/blue_light"/>
<size android:width="2dp" android:height="6dp"/>
</shape>
</item>
<item android:drawable="#color/blue"/>
</selector>
And included in the bottom navigation like
<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="#drawable/selector_bottom_nav"
android:foreground="?attr/selectableItemBackground"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/bottom_navigation" />
But I end up getting like this.
Related
I am trying to create a border on top of the selected bottom navigation view.
Activity.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="60sp"
app:itemBackground="#drawable/bottom_navigation_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu"
/>
bottom_navigation_border.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="line">
<stroke android:width="6dp" android:color="#color/red_700"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>
This is the current output of the code. I tried adding padding but it didn't work. Is there any to make it to the top of the navigation bar.
for this case 9patch image would be an optimal resolution, check out how to draw such image in HERE
I'm going to set round ripple shape of tablayout's tab. The TabLayout is linked to viewpager. I tried to define selector XML and set tabbackground attribute of tablayout with the selector xml.
So it has been set round. But the issue is that it works after I click it first. So that means the ripple of every tab doesn't work at the first click. What's the reason?
Thanks.
This is my code.
<com.google.android.material.tabs.TabLayout
android:id="#+id/unit_categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabBackground="#drawable/unit_category_selector_tab_background"
app:tabGravity="center"
app:tabIndicator="#drawable/unit_category_tab_indicator"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="center"
app:tabIndicatorHeight="40dp"
app:tabMode="scrollable"
app:tabRippleColor="#android:color/transparent"
app:tabUnboundedRipple="false" />
This is unit_category_selector_tab_background.xml
<?xml version="1.0" encoding="utf-8"?>
<item android:state_pressed="true" android:state_selected="false" android:drawable="#drawable/unit_category_tab_ripple"/>
</selector>
This is unit_category_tab_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#9BB3B1">
<item>
<shape
android:shape="rectangle"
>
<solid android:color="#FFFEFE" />
<corners
android:radius="40dp" />
</shape>
</item>
</ripple>
<com.google.android.material.tabs.TabLayout
android:id="#+id/unit_categories"
android:layout_width="match_parent"
android:layout_height="#dimen/unit_category_tab_height"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
app:tabGravity="center"
app:tabIndicator="#drawable/unit_category_tab_indicator"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="center"
app:tabIndicatorHeight="#dimen/unit_category_tab_height"
app:tabMode="scrollable"
app:tabRippleColor="#android:color/transparent"
app:tabTextColor="#color/unit_calc_text_color"
app:tabUnboundedRipple="false" />
tab_indicator.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#D584D5">
<item>
<shape
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners
android:radius="#dimen/unit_category_tab_height"/>
<!-- color of the selected tab -->
<solid android:color="#android:color/transparent"/>
<stroke android:width="1dp" android:color="#color/tab_indicator_color"/>
</shape>
</item>
</ripple>
tab_background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="0" android:exitFadeDuration="1500">
<item android:state_pressed="true" android:state_selected="false" android:drawable="#drawable/unit_category_tab_ripple"/>
</selector>
I set background by the code when the tab changes
tab_riple.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#C1DCD9">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/calculator_primary_color" />
<corners android:radius="#dimen/unit_category_tab_height" />
<stroke android:width="2dp" android:color="#android:color/transparent"/>
</shape>
</item>
</ripple>
I'm trying to create a ripple with rounded corners for the Drawer items. However, I can't figure out how to achieve that. I tried to create a custom ripple and assign it to the NavigationView through app:itemBackground property as follows:
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.MaterialComponents.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_navigation"
app:itemBackground="#drawable/custom_ripple"/>
custom_ripple
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:drawable="#drawable/rounded_corner" />
</ripple>
rounded_corner
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorAccentTransparent" />
<corners android:radius="6dp" />
</shape>
However, this doesn't work as expected. There seem to be two ripples: a rectangle and a ripple with rounded corners as you can see below.
Output
Have you any idea how to solve this? Thanks
Here's what I have done. It removed the rectangular ripple for me. Give it a try and let me know if it's helpful.
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation_view"
android:theme="#style/NavigationItemNoRipple"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_navigation"
app:itemBackground="#drawable/custom_ripple"/>
styles.xml:
<style name="NavigationItemNoRipple">
<item name="android:colorControlHighlight">#android:color/transparent</item>
</style>
I'm trying to add a section separator for Navigation Drawer with this code which is working but I want to customize it like this example :
example
xml code :
<group
android:id="#+id/menu_center"
android:checkableBehavior="none">
<item
android:id="#+id/Fragment_R"
android:icon="#mipmap/r"
android:title="#string/r" />
<item
android:id="#+id/Fragment_t"
android:icon="#mipmap/t"
android:title="#string/t" />
<item
android:id="#+id/Fragment_Re"
android:icon="#mipmap/real"
android:title="#string/Real" />
</group>
You Needs To Create A Drawable Resource File Like This.
drawer_items_bg
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#363636" />
</shape>
</item>
<item android:top="2dp" android:right="-2dp" android:left="-2dp" android:bottom="-2dp" >
<shape>
<solid android:color="#363636" />
<stroke
android:width="1dp"
android:color="#777776" />
</shape>
android:dashGap="10px"
android:dashWidth="10px"
</item>
</layer-list>
Then Add It In Your NavigationView
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:background="#drawable/side_nav_bar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextColor="#FFF"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
app:itemBackground="#drawable/drawer_item_bg" //you need to add as background here
app:itemIconTint="#FFF"
android:textSize="22sp"/>
Hope That will works great!
I am running into an issue when setting the app:itemBackground for the NavigationView. I am trying to create a custom background for the selected menu item. The custom background works, but when I use it, it seems to kill the start padding of the menu items.
Without the background(default)
With the custom background
You can see that the menu items are flush to the left of the menu when the itemBackground is set.
Here is the relevant xml...
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:id="#+id/DrawerLayout"
android:fitsSystemWindows="false">
<!-- your content layout -->
<include
layout="#layout/MainLayout" />
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/primary_color"
android:id="#+id/NavigationView"
app:itemTextColor="?android:textColorPrimary"
app:headerLayout="#layout/navigationheaderlayout"
app:itemBackground="#drawable/navigation_item_selector"
app:menu="#menu/navigation_menu" />
</android.support.v4.widget.DrawerLayout>
selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/navigation_item_selected_background" android:state_selected="true" />
<item android:drawable="#drawable/navigation_item_selected_background" android:state_pressed="true" />
<item android:drawable="#drawable/navigation_item_selected_background" android:state_checked="true" />
<item android:drawable="#drawable/navigation_item_not_selected_background" />
</selector>
selected backgroud
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="0dp"
android:right="2dp"
android:drawable="#color/accent_color" />
<item
android:left="2dp"
android:right="2dp"
android:drawable="#color/navigation_selected_item_color" />
</layer-list>
not selected background
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
Has anybody run into something like this before?
Please note below solution will work for pre-lollipop versions. But will add extra padding in lollipop and above. Please apply different theme for different versions to avoid this.
After setting app:theme, padding left issue is fixed.
<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="false"
android:background="#drawable/your_menu_bg"
app:itemBackground="#drawable/your_menu_item_bg"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
app:theme="#style/NavigationDrawerStyle"
app:itemIconTint="#color/your_color"
app:itemTextColor="#android:color/white"
app:itemTextAppearance="?android:attr/textAppearanceLarge"/>
This is my custom theme.
<style name="NavigationDrawerStyle">
<item name="android:paddingLeft">20dp</item>
</style>
How to apply different themes for different versions? Check the other link below.
Change theme according to android version
Add for Android 4 versions a padding at the end of the layer-list in your drawable.
Like this way:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="0dp"
android:right="2dp"
android:drawable="#color/accent_color" />
<item
android:left="2dp"
android:right="2dp"
android:drawable="#color/navigation_selected_item_color" />
<item>
<shape android:shape="rectangle" >
<padding android:left="12dp" android:right="12dp"/>
</shape>
</item>
</layer-list>