Issue
My Settings: minSdkVersion 19 && compileSdkVersion 30
I tried below code. I expected the button's background to be colored as colorAccent
, but it was colored as colorPrimary
. When I change colorPrimary
value to another color, the button's background color changes accordingly.
This is contrary to what I learned. (Button's background should be colored by colorAccent
when style is "@style/Widget.AppCompat.Button.Colored"). I encountered this problem while following the Google Android fundamental tutorial (https://developer.android.com/codelabs/kotlin-android-training-interactivity/index.html#4).
I am getting confused, please help.
// activity_main.xml
<Button
style="@style/Widget.AppCompat.Button.Colored"
android:id="@+id/done_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/done" />
// themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.AboutMe" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
// colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorAccent">#880000</color>
</resources>
Solution
Since you are using a Material Components Theme, your Button
is replaced at runtime by a MaterialButton
.
The MaterialButton
uses as background tint the ?attr/colorPrimary
.
The style Widget.AppCompat.Button.Colored
applies a background drawable which is overridden by the MaterialShapeDrawable
provided by the MaterialButton
.
Use a Material Components style in your Button
as Widget.MaterialComponents.Button
and the app:backgroundTint
to apply a different color in your background:
<Button
style="@style/Widget.MaterialComponents.Button"
app:backgroundTint="@color/....."
../>
or:
<Button
style="@style/Widget.MaterialComponents.Button"
android:theme="@style/ButtonThemeOverlayPrimaryColor"
../>
<style name="ButtonThemeOverlayPrimaryColor">
<item name="colorPrimary">@color/....</item>
</style>
or if you want to use an AppCompat
style use a AppCompatButton
.
<androidx.appcompat.widget.AppCompatButton
style="@style/Widget.AppCompat.Button.Colored"/>
Answered By - Gabriele Mariotti
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.