1

I'm having trouble with styling buttons in my app, I've tried using selectors, themes but none of that has worked for me (or worked but not as intended), any ideas what should I change to set it up correctly?

code:

one of buttons (the dark theme one (should swap colors from black to violet(when activated))

        <Button
            android:id="@+id/dark_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:theme="@style/buttonDark"
            android:text="dark"
            app:icon="@drawable/ic_moon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

style:

    <style name="buttonDark" >
        <item name="android:state_active">@color/black</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:state_pressed">@color/violet</item>
    </style>

representation of the both light mode and dark mode (and the buttons in both):

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
icecube
  • 111
  • 2
  • 16

1 Answers1

1

You can define a custom style:

    <Button
        style="@style/App.Button"

with:

<style name="App.Button" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/mtrl_btn_bg_custom_selector</item>
    <item name="android:textColor">@color/mtrl_btn_text_custom_color_selector</item>
    <item name="rippleColor">@color/mtrl_btn_custom_ripple_color</item>
</style>

The background tint selector define the background color:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_enabled="true"/>
    <item android:alpha="0.12" android:color="...."/> <!-- disabled -->
</selector>

The text color selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true"/>
    <item android:alpha="0.38" android:color="...."/> <!-- disabled -->
</selector>

The ripple selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:color="@color/violet500" android:state_pressed="true"/>
    <item android:color="@color/..." android:state_focused="true" android:state_hovered="true"/>
    <item android:color="@color/..." android:state_focused="true"/>
    <item  android:color="@color/..." android:state_hovered="true"/>
    <item  android:color="@color/..."/>
</selector>
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • I have no idea why, but It doesn't give any results either (even though I've added "theme" to one of the buttons and tweaked with the code you've provided) – icecube Apr 05 '21 at 21:22
  • @icecube It is a style. Apply it to a button using `style="@style/App.Button"` – Gabriele Mariotti Apr 05 '21 at 21:28
  • yea, I've done that but it didn't work, however I might have found the solution here: [link](https://stackoverflow.com/questions/31858374/android-button-background-color-not-changing) and I think I will be able to set it up – icecube Apr 05 '21 at 21:33
  • @icecube what is the issue? I've tried it and it works. – Gabriele Mariotti Apr 07 '21 at 05:43
  • I've been using "Theme.MaterialComponents.DayNight.DarkActionBar" instead of "Theme.AppCompat.Light.NoActionBar" and the buttons did not change styles because of that – icecube Apr 07 '21 at 09:26
  • @icecube The answer is based on a material components theme. – Gabriele Mariotti Apr 07 '21 at 09:28
  • I haven't really used that solution but it has led me to the correct solution so I will accept it – icecube Apr 07 '21 at 10:32