CODEWITHSUNDEEP
androidandroid-layoutandroid-xml
Viewed
Viewed

Reputation: 1413

How to change background color of button MaterialToolbar?

How to change color of button MaterialToolbar when it pass to state pressed?

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        app:menu="@menu/webview_toolbar"
        app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_up_24" />

On screenshot pressed state is round figure

enter image description here

I tried to use ColorStateList, it does not work with MaterialToolbar. But worked with LinearLayout.

android:background="@drawable/selector_state_list"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/pressed_toolbox_item"  android:state_pressed="true" />
</selector>

Upvotes: 3

Views: 1186

Answers (3)

PineapplePie
PineapplePie

Reputation: 953

If you want to change only the color of the icon and not remove the rounded figure (it's selectableItemBackgroundBorderless and it would be a waaay harder to get rid off it, you'll need to play with overflow attributes, take a look here, section Overflow menu attributes ), then you can go in your fragment/activity with:

mainToolbar.overflowIcon = ContextCompat.getDrawable(this, R.drawable.selector_state_list)

And your selector should contain two drawables (not color as in your file) for pressed and non-pressed states with different tint colors. Just in case, if you don't know how to generate vectors: tap on the drawable folder, new -> vector asset -> clip art.

Upvotes: 1

Heshan Sandeepa
Heshan Sandeepa

Reputation: 3687

If you are using vector drawables as navigation icons, You can easily set the color directly into the vector.

<vector
 ...
 android:tint="@color/design_default_color_primary_dark"> // if you are using themes then ?attr/colorControlNormal or whatever as you prefer

     <path />
</vector>

Read here material app bar

Or

If you are using, pngs as navigation icons, you could use "iconTint" property as follows,

    <item android:id="@+id/action_one"
    android:icon="@drawable/ic_action_icon"
    app:iconTint="@color/design_default_color_error"
    android:title="@string/action_one"
    app:showAsAction="ifRoom" />

For the sake of best practices, it's better to create a style & apply that style as the toolBar style or set it directly in the ap theme as below

    <style name="Theme.MyApptheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="iconTint">@color/purple_500</item>
    <item name="colorPrimary">@color/purple_200</item>
    .
    .
</style>

Upvotes: 0

Sayooj
Sayooj

Reputation: 842

Try this way, change the button color with a MaterialToolbar or (androidx and a Material theme):

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/main_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_up_24"/>

And create a drawable file _state.xml, add the following code. Here there are two images which are the different required ones.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

   <item android:drawable="@drawable/ic_baseline_add_24"  android:state_pressed="true" />
   <item android:drawable="@drawable/ic_baseline_add_24_press" android:state_pressed="false" />

</selector>

In the activity.java file, add the following code

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    MaterialToolbar toolbar = findViewById(R.id.main_toolbar);
    toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.state));
    setSupportActionBar(toolbar);
    Objects.requireNonNull(getSupportActionBar()).setDisplayShowHomeEnabled(true);
}

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.webview_toolbar, menu);
    return true;
}

Upvotes: 0

Related Questions