Can I use one Button and Multiple Styles Throughout my App?

Question

I am relatively new to android styling techniques and I am trying to wrap my head around reusable components. My app has many buttons scattered throughout its' view hierarchy and they are all almost exactly the same (variable font color and button color). Is it possible to define one button drawable that can then have different styles applied to it such that, a button has one drawable definition that is applied as a background to a Button xml attribute like so <Button> android:background="@drawable/basic_btn"</Button> and then customize lets say the button color through styling, something like

<Button
style="@style/Button.Green"
android:background="@drawable/basic_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

then if I want a blue button using the same drawable I can set something like:

<Button
style="@style/Button.Blue"
android:background="@drawable/basic_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

is this possible? I currently do not get the result I want when trying this.

Edit with answer:

Looking back on my post, I don't believe I described my initial issue well enough and I appreciate everyone who has responded in between. My initial problem was attempting to apply different <styles> to a drawable to achieve different background colors, was not in fact changing the background color. My solution that I went with goes like this.

Define the drawable shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="3dp" />

Next, assign the drawable as a background

<Button style="@style/Button.basic
android:background="@drawable/btn_basic"
/>

Now for the heart of the trick:

<Button style="@style/Button.basic
android:background="@drawable/btn_basic"
android:backgroundTint="@color/seafoam"
/>

backgroundTint by default seems to add the color tint on top of the drawable. This allowed me to define one shape but apply any color to it when used in an xml file. backgroundTint

Possible duplicate of [Android Material Design Button Styles](https://stackoverflow.com/questions/26346727/android-material-design-button-styles) — Joaquim Ley, Sep 07 '18 at 14:32
There are already countless tutorials on how to achieve this, I had to flag this question, but providing you some value. You should think the other way around, you have your `@style/MyButtonStyle` where you set the common properties (Rounded corners, elevation, textColor etc.). And now on each of your buttons, you can set `background="@color/my_button_color"` — Joaquim Ley, Sep 07 '18 at 14:34
@JoaquimLey I can define radius in the style tags? Basically every button in my app needs to be borderless with a 3dp corner radius. All that changes is the Text color or background color. Should I avoid making a drawable button entirely? — Murph_Fish, Sep 07 '18 at 14:39
@JoaquimLey I have referred to your posted answer and it gets me 90% there, but I still can't set the corner radius in the style definition. Anytime I define radius it never rounds the corner. Thanks for the help btw. — Murph_Fish, Sep 07 '18 at 15:14

score 0 · Answer 1 · answered Sep 07 '18 at 14:34

Use TextView Like This:-

<TextView
                android:id="@+id/reviewsTitleTxt"
                style="@style/txt_style_16sp_white_color_ffffff"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAllCaps="true"
                android:gravity="center"
                android:text="@string/reviews_txt"
                android:layout_gravity="center_vertical"/>

Where Style file is:-
Define style in style file

 <style name="txt_style_16sp_white_color_ffffff">
        <item name="android:textSize">@dimen/txt_size_16sp</item>
        <item name="android:textColor">@color/white_color_ffffff</item>
    </style>

score 0 · Answer 2 · answered Sep 08 '18 at 09:35

Since we were commenting and you weren't able to solve this via the posted answer I'm going to try to help you out.

First, you should define all the common attributes on a @style/ .xml
Secondly, define a @drawable/ as your background for each button:

Background drawable:

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" 
        android:shape="rectangle">
  <corners android:radius="@dimen/button_round_radius"/>
  <solid android:color="@color/background_color"/>
</shape>

The bad thing about this is you'll have to create a new drawable with somewhat the same properties just to change the color.

Also look into the already created themes/style that might help you on the reference of this answer.

Now on your button's XML declaration:

<Button
style="@style/YourCommonAttributesStyling"
android:background="@drawable/a_drawable_shape_like_the_above"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

Reference: Android Material Design Button Styles

Thanks for fleshing out that answer, I forgot to click the link at the top to mark your link as proper solution. What I ended up doing was creating the drawble and then in my layout on the button element I can set the attribute `android:backgroundTint` and this allows me to change the color of the button without losing any of the additional styling provided by my style definition or my button drawable. — Murph_Fish, Sep 10 '18 at 12:31
Hi Murph. You can still 'VOTE UP' and 'MARK AS ACCEPTED' now with no issues, hope this helped you out :). — Joaquim Ley, Sep 12 '18 at 07:24

Can I use one Button and Multiple Styles Throughout my App?

2 Answers2