Develop Reference

How should I change the color of the icons and title in the top toolbar using material design? -NoActionBar theme - Android Material Design

I started using material design and am not to familiar with the guidelines (I'm following the tutorial from https://material.io/components/app-bars-top/android#contextual-action-bar). While following the example, my title and their default overflow menu icon (the 3 vertical dots) were coming out a different shade of white compared to by other icons (back navigation and edit icon), I don't know if this is how it should be but I don't think so.
Moreover, if I use `android:tint="?attr/colorControlNormal">' in the xml file for the vector like they show in the tutorial, they come out a light color and i want it close to black so it looks better with my toolbar background. I can't edit the color for their default overflow menu icon (the 3 vertical dots) from white.
My solution: I made my own more options icon (3 vertical dots) will get the color from colors.xml file, then add a spinner to the more options icon.
Here's a screenshot with light theme icons to the left of the default material design more options icon (3 vertical dots). Title not pictured here but that's not a problem for me.:
My theme:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
Here's the activity in which I have the toolbar:
<androidx.coordinatorlayout.widget.CoordinatorLayout
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="#color/colorPrimary"
tools:context=".ui.main.view.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="?attr/colorControlNormal"
app:menu="#menu/top_app_bar"
app:navigationIcon="#drawable/ic_navigation_24dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
style="#style/Widget.MaterialComponents.Toolbar.Primary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="gone" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here's my top_app_bar menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/edit"
android:icon="#drawable/ic_edit_24dp"
android:title="#string/appbar_edit"
app:showAsAction="ifRoom"/>
<item
android:id="more_options"
android:icon="#drawable/ic_more_options_24dp"
android:title="More Options"
app:showAsAction="ifRoom"/>
<item
android:id="#+id/place_holder"
android:title="#string/appbar_more_place_holder"
app:showAsAction="never" />
Here's my 'edit' vector item:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal"
android:alpha="0.8">
<path
android:fillColor="#FF000000"
android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>
</vector>
Is there a better way of changing the icon colors using material design? Also, is there a specific color these should be (I have the feeling the standard is a shade of black or white, no other colors)?

This solution only works on Android versions Lollipop and above, which is most likely fine. On devices outside of this range, the icon will just be a different color.
Make your own more options icon and in your activity kotlin/java class, set the icon programmatically: topAppBar.overflowIcon = getDrawable(R.drawable.ic_more_options_24dp)
A downside to this approach is as #Mohammed Abdul Bari says, "...when the project gets larger, this approach can become tedious to maintain."

How to change a specific icon image from Bottom Navigation View

I need to implement a Bottom Navigation View in my android app. The middle icon needs to be an image, the company logo. But when I run the app it appears only a grey filled rounded icon. The images above show what I want and what I'm getting.
What I want:
What I get:
I already tried others questions in this website, but every answer tells to change the iconTintList from XML with a drawable, but the center icon is a vector with more than one color.
When I tried to set null to setIconTintList method, works for the middle icon but the others icons change to original color too.
//This doesn't work to other icons, only for the middle one
mBottomNav.setItemIconTintList(null);
I also tried to get the menu and set the icon tint list only for the middle one, like the code above, but doesn't work too.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
mBottomNav.getMenu().findItem(R.id.nav_buy).setIconTintList(null);
}
This is the XML implementation:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/kmv_background"
app:itemIconTint="#drawable/bottom_nav_item_color"
app:itemTextColor="#drawable/bottom_nav_item_color"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation" />
This is the java implementation:
mBottomNav = findViewById(R.id.bottomNavigationView);
mBottomNav.setOnNavigationItemSelectedListener(this);
Thanks for any help!

I don't think there's a short way. Use this first:
mBottomNav.setItemIconTintList(null);
Then do the designs yourself. Don't forget to separate the buttons as clicked and not clicked.
Example Home Button XML
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--Clicked-->
<item android:drawable="#drawable/homeclicked" android:state_checked="true" />
<!--Not Clicked-->
<item android:drawable="#drawable/homenotclicked" android:state_checked="false" />
</selector>
And add them to the view:
Example bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/homebuttons"
android:icon="#drawable/homebuttonxml />
<!--Other Buttons...-->
</menu>
And finally, Link view to bottomnavigationview
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:labelVisibilityMode="unlabeled"
app:elevation="0dp"
app:menu="#menu/bottom_navigation">
</com.google.android.material.bottomnavigation.BottomNavigationView>

For a particlar icon, this can be used:
MenuItemCompat.setIconTintMode(binding.bottomNav.menu.getItem(3), null);

Changing the color of selected tab [duplicate]

This question already has answers here:
Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space
(4 answers)
Closed 5 years ago.
I am using tabLayout to use tabs in my app. I want to change the background color & text color of selected tab. I am changing the background color of entire tabLayout by doing this
android:background="#color/colorAccent"
and changing textcolor and selectedtextcolor
app:tabTextColor="#000000"
app:tabSelectedTextColor="#color/colorAccent"
but all i want to do now is to change the background color of that specific tab when it is selected ? How to do that ?
Thanks in advance :)

you can do it like this in your tab layout widget
<android.support.design.widget.TabLayout
app:tabBackground="#drawable/selector"
/>
and define your selector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/tab_selected_color"
android:state_selected="true"/>
<item
android:drawable="#color/tab_unselected_color"
android:state_selected="false"/>
</selector>

Change the background colour of tab in TabLayout is fairly simple
using the design support library that Android provides. You can simply
change the background of the whole TabLayout using the
app:tabBackground property and you can change the tab indicator colour
using the app:tabIndicatorColor property, but there are better ways if
you want more functionality. A better way to change the tab-layout
colour is using selectors, using selectors you can have different
background for different sates of tab i.e selected, unselected etc.
Please follow the below steps:
1. Create a drawable, tab_selected_background, that will be use as the background for the selected tab
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorPrimary" />
<corners android:radius="4dp" />
</shape>
2. Create a selector, tab_selector that will be used as the background for tab layout:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_selected_background" android:state_selected="true"/>
<item android:drawable="#color/tab_background_unselected"/>
</selector>
3. Now finally create the tab layout and use the selector that we've just create as the background of the tabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/subChordTabs"
android:layout_width="match_parent"
android:layout_height="56dp"
app:tabGravity="center"
app:tabMode="scrollable"
app:tabBackground="#drawable/tab_selector"
app:tabIndicatorColor="#color/tabIndicator"
android:padding="8dp"
app:tabIndicatorHeight="2dp"/>
You gotta the result like below,

Android Transparent Button with Color Splash

So I have a transparent button I've defined like so:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:textSize="18sp"
android:background="#drawable/ripple"
android:id="#+id/button_login"
android:layout_centerHorizontal="true" />
And I have a ripple background defined like so:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
Finally my color highlight and primary are defined like so:
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorControlHighlight">#000000</item>
This works to make my button transparent, and if I change the primary color to say green, then I get a black color splash when pressing the button.
However when I set it to transparent it seems like the splash maintains the alpha. Am I doing something wrong or else, what do I need to do to make my transparent button have a splash of color?

The simplest answer would be: Do not specify the item drawable property in your ripple definition.
Change to following:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight"
>
</ripple>
The ripple effect will be in big circular form. Hope you are not bothered about it

How to change blue color of CardView on click events on pre-Lollipop phones

I set CardView and inside of it I put RelativeLayout.
Layout looks something like this:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_basket_list_card_view"
android:orientation="horizontal"
android:layout_width="match_parent"
android:clickable="true"
android:layout_margin="5dp"
card_view:cardCornerRadius="#dimen/basket_list_cardview_corner_radius"
card_view:cardElevation="#dimen/basket_list_cardview_elevation"
card_view:cardUseCompatPadding="true"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/selectableItemBackground">
...
When I click on CardView on Lollipop phones, I get a nice ripple effect and everyone is happy. But, when I click on that CardView on pre-Lollipop phones, it only gets colored with some blue semi-transparent color. It looks ok with me, but I would like to change that color.
How can I do that?
Best,
Deveti

You can use
android:background="?attr/selectableItemBackground"
to get a light grey color instead of a blue one. It then uses the App's theme, which is probably the AppCompat theme in your case.
If you want to have full control I'm afraid you have to create your own state list and override selectableItemBackground or create a new item.
Example from the link:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
The drawable can also be a RippleDrawable. You can use the folder "drawable" for the default selection drawable and "drawable-21" for the ripple effect drawable. See this answer for a good overview.
If you use android:foreground it behaves like an overlay, so a transparent black color like #20000000 gives a grey tint.