Styling theme buttons android (xml)

Issue

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):

Solution

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>

Answered By - Gabriele Mariotti