Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextButton default color in dark theme

Trying to change the default color for all TextButtons in my Android app w/ material. I see that I can style a "materialButtonStyle" and "materialButtonOutlinedStyle". However I do not see an attribute for a text button, possible something like "materialButtonTextStyle"

<style name="AppTheme" parent="Theme.MaterialComponents">
  <item name="materialButtonStyle">@style/myButton</item>
  <item name="materialButtonOutlinedStyle">@style/myButtonOutlined</item>
</style>

Example button:

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:text="Text Button" />

Is it possible to change the style globally for all material text buttons?

EDIT: Tried this from the theming-buttons material docs.

<style name="AppTheme" parent="Theme.MaterialComponents">
  <item name="borderlessButtonStyle">@style/Widget.App.Button.TextButton</item>
</style>

<style name="Widget.App.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
</style>

<style name="ThemeOverlay.App.Button.TextButton" parent="">
    <item name="colorPrimary">@color/md_purple_600</item>
</style>

However still not styling the text color for all text buttons.

like image 893
lostintranslation Avatar asked Jan 19 '26 17:01

lostintranslation


1 Answers

As per the Buttons -Material design documentation the TextButton has a default style theme attribute ?attr/borderlessButtonStyle which can be used in the AppTheme to change the style globally for all material text buttons.

To change the Text Colour globally for all TextButtons:

1.Define the borderlessButtonStyle attribute in the Light and Night AppTheme like the below:

<!-- Base application theme. -->
<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  <item name="borderlessButtonStyle">@style/Widget.App.Button.TextButton</item>
</style>

<!-- For TextButton-->
<style name="Widget.App.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
  <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
</style>

<style name="ThemeOverlay.App.Button.TextButton" parent="">
  <item name="colorPrimary">@android:color/holo_red_dark</item>
</style> 

2.In every TextButton xml layout define the style style="?attr/borderlessButtonStyle" like the below:

<Button
    style="?attr/borderlessButtonStyle"
    android:id="@+id/text_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text Button" />

And the Text colour will be changed globally based to the colorPrimary which is defined in Light/Night Theme.

Following the same way you can achieve the same for the other Material Button Styles like OutlinedButton and the default Button like:

<!-- Base application theme. -->
<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="borderlessButtonStyle">@style/Widget.App.Button.TextButton</item>
    <item name="materialButtonOutlinedStyle">@style/Widget.App.Button.OutlinedButton</item>
    <item name="materialButtonStyle">@style/Widget.App.Button</item>
</style>


<!-- For TextButton-->
<style name="Widget.App.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
</style>

<style name="ThemeOverlay.App.Button.TextButton" parent="">
    <item name="colorPrimary">@android:color/holo_red_dark</item>
</style>

<!-- For OutlinedButton-->
<style name="Widget.App.Button.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.OutlinedButton</item>
</style>

<style name="ThemeOverlay.App.Button.OutlinedButton" parent="">
    <item name="colorPrimary">@android:color/holo_orange_dark</item>
</style>

<!-- For Button -->
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
</style>

<style name="ThemeOverlay.App.Button" parent="">
    <item name="colorPrimary">@android:color/holo_blue_dark</item>
    <item name="colorOnPrimary">@android:color/holo_blue_bright</item>
</style>

And each Button listens to the above global attributes:

<Button
    style="?attr/borderlessButtonStyle"
    android:id="@+id/text_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text Button" />

<Button
    style="?attr/materialButtonOutlinedStyle"
    android:id="@+id/outlined_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined Button" />

<Button
    android:id="@+id/default_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Default Button" />

Below is a sample result for each Button Style in Light mode:

light_mode

And below is a sample result for each Button Style in Night mode:

dark_mode

like image 188
MariosP Avatar answered Jan 23 '26 01:01

MariosP