Develop Reference

Navigation Drawer item divider with selected background color

I have a navigation drawer in my android app. Here's the code:
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
android:background="#color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu"
app:itemTextColor="#color/drawer_item"
app:itemIconTint="#color/drawer_item"
app:itemBackground="#drawable/nav_divider"/>
I've used one the answer to this post to add dividers between the items. Here's the nav_divider drawable that I'm using as itemBackground in my NavigationView:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="#dimen/activity_horizontal_margin">
<shape android:shape="rectangle">
<solid android:color="#color/light_gray"/>
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item>
</layer-list>
Now, the question is how do I change the background color of the selected item. I know how to do that without the divider, but with the divider, it's more complicated.
UPDATE:
Here's what I've tried:
I created another drawable called nav_divider_selected which is exactly like the nav_divider above except with different colors.
Then, I created a drawer_item_background drawable like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/nav_divider_selected" android:state_selected="true"/>
<item android:drawable="#drawable/nav_divider"/>
</selector>
And, replaced the itemBackground of the NavigationView with this new selector (app:itemBackground="#drawable/drawer_item_background"). But, it didn't work. The items all look black, for some reason.

I got it. It was a simple issue. I was just using the wrong state. So, here's the solution. I created two different layer lists (to add the divider to the navigation items):
nav_divider:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="#dimen/activity_horizontal_margin">
<shape android:shape="rectangle">
<solid android:color="#color/light_gray"/>
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item>
</layer-list>
nav_divider_selected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="#dimen/activity_horizontal_margin">
<shape android:shape="rectangle">
<solid android:color="#color/light_gray"/>
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/light_blue"/>
</shape>
</item>
</layer-list>
Then, created a drawer_item_background drawable like this (state_checked should be used not state_selected):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/nav_divider_selected" android:state_checked="true"/>
<item android:drawable="#drawable/nav_divider"/>
</selector>
And, then I used this drawable as itemBackground in my NavigationView:
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
android:background="#color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu"
app:itemTextColor="#color/drawer_item"
app:itemIconTint="#color/drawer_item"
app:itemBackground="#drawable/drawer_item_background"/>

Also if in-case you do not want to use a selector to achieve that you can do so like this
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="#string/menu_share" />
</group>
By wrapping the element under <group android:checkableBehavior="single"> we get a selected background.

Try the below item_background.xml in
app:itemBackground="#drawable/item_background" for NavigationView
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/rgb_red" android:state_checked="true" />
<item android:drawable="#color/rgb_red" android:state_activated="true" />
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/rgb_white" />
<item android:start="-2dp"
android:top="-2dp"
android:end="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#color/rgb_pale_gray"/>
</shape>
</item>
</layer-list>
</item>
</selector>
hope it will help you

Bottom navigation item menu custom background

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.

Set color to unselected tab indicator in tab layout

I am using tablayout provided by google and everything is working fine except the color of the unselected tab indicator. I am unable to set the unselected tab indicator color.
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>

**1.app:**
tabBackground="#drawable/tablayout_selector"
**2.tablayout_selector.xml**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/shl_common_default_color" />
</shape>
</item>
<item>
<inset android:insetBottom="1.5dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</inset>
</item>
</layer-list>
or
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
<item android:gravity="bottom">
<shape android:shape="rectangle">
<solid android:color="#color/shl_common_default_color" />
<size android:height="1.5dp" />
</shape>
</item>
</layer-list>

try this changing the color as you wish:
Create this file in drawable folder
tab_indicator_color.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
<layer-list>
<!-- Bottom indicator color for the UNSELECTED tab state -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#65acee" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
and after set your .xml file in app:tabBackground like this:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
app:tabBackground="#drawable/tab_indicator_color" />

ic_tab_indicator_default.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" />
</item>
<item android:gravity="bottom">
<shape android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#color/steel_blue" />
</shape>
</item>
</layer-list>
ic_tab_indicator_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" />
</item>
<item android:gravity="bottom">
<shape android:shape="rectangle">
<size android:height="3dp" />
<solid android:color="#color/congress_blue" />
</shape>
</item>
</layer-list>
selector_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_tab_indicator_selected" android:state_selected="true" />
<item android:drawable="#drawable/ic_tab_indicator_default" />
</selector>
TabLayout
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicator="#android:color/transparent"
app:tabBackground="#drawable/selector_tab_indicator">

For people using the new com.google.android.material.tabs.TabLayout if you apply the solution given as the correct answer in this post would get corners on all four sides of the tab
To fix that use the following "hack"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom indicator color for the UNSELECTED tab state -->
<item android:top="-10dp" android:left="-1000dp" android:right="-1000dp">
<shape android:shape="rectangle" >
<stroke android:color="#4cffffff" android:width="1dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>

If your TabLayout don't need title, but need indicator for unselected color.
You can do like
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="10dp"
app:tabBackground="#drawable/tab_normal"
app:tabIndicator="#drawable/tab_indicator"
app:tabIndicatorColor="#null"
app:tabIndicatorHeight="10dp" />
The workaround here is
Using both tabBackground and tabIndicator
Indicator height equals to TabLayout height
tab_normal.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#aaaaaa" />
<corners android:radius="5dp" />
</shape>
tab_indicator.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000" />
<corners android:radius="5dp" />
</shape>
If you need a padding between indicator, you can use layer-list drawable with some padding (instead of using shape)
If you just only need a color for tab indicator, no need to define shape drawable, can use
app:tabBackground="#color/gray"
app:tabIndicatorColor="#color/red"

NavigationView - Setting `app:itemBackground` causes menu items to lose start padding

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>

Spinner with arrow in left

I'm developing an app for RTL language and want to change the position of arrow to the left of Spinner !
Is there anyway to do this without creating a custom spinner ?

You must write a custom spinner.
Sample code is below. You can edit as you wish.
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap content"
/>
#style/spinner_style:
<style name="spinner_style">
<item name="android:background">#drawable/background_spinner</item>
</style>
#drawable/background_spinner
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<padding android:left="8dp"/>
</shape></item>
<item><bitmap android:gravity="left"
android:src="#drawable/ic_arrow_drop_down_grey600_36dp"/>
</item>
</layer-list></item>
</selector>

An easy and simple way to set arrow in left side is,You must create .xml file in drawable folder for that as written below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
</shape>
</item>
<item
android:drawable="#drawable/ic_arrow_drop_down_black_24dp"
android:right="320dp"/>
</layer-list>
You can adjust above code as your need.
And set this file as background of a spinner widget as below:
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/layout_spinner"
android:background="#drawable/arrow_left"
android:elevation="5dp"/>

This worked in my case. I have English and Arabic languages in my app
<Spinner
android:textDirection="locale"
android:id="#+id/spnGender"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/array_gender"/>
This attribute is important.
android:textDirection="locale"
NOTE : I have used the default spinner without any customizations.

Create a .xml in drawable folder : #drawable/spinner_arrow.xml
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#ECF0F1" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:width="24dp" android:height="24dp" android:gravity="end|center_vertical" android:drawable="#drawable/ic_keyboard_arrow_down_black_24dp" />
</layer-list>
</item>
- Then add it to the styles.xml
<style name="spinner_style">
<item name="android:background">#drawable/spinner_arrow</item>
</style>
then add it to the spinner
style="#style/spinner_style"

dummy.xml (drawable should be of very low size-24dp)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list android:opacity="transparent">
<item android:width="100dp" android:end="300dp">
<bitmap android:src="#drawable/down_button_dummy_dummy" android:gravity="center"/>
</item>
</layer-list>
</item>
</selector>
layout file snippet
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="5dp"
>
<Spinner
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/dummy">
</Spinner>
</android.support.v7.widget.CardView>
Click here for rendered layout

What about this ?
First of all make sure that you enabled rtl support in AndroidManifest.xml
<application
...
android:supportsRtl="true"
...>
after that use this in your Spinner definition :
android:layoutDirection="rtl"
android:textDirection="rtl"

The easiest way: set in Spinner 'layoutDirection'= 'rtl'