Develop Reference

Android XML - Apply and use different buttonStyles

At the moment, I feel a little bit stupid.
Here's my problem :
I actually want to apply different styles for some buttons, different from my default button's style.
My styles.xml :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="CustomTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/CustomTheme.ActionBarStyle</item>
<item name="cardViewStyle">#style/CustomTheme.CardViewStyle</item>
<item name="buttonStyle">#style/CustomTheme.StandardButton</item>
</style>
<...>
<style name="CustomTheme.StandardButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="background">#drawable/ripple_button</item>
<item name="android:tint">#color/white</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.ConfirmButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="background">#drawable/ripple_button_confirm</item>
<item name="android:tint">#color/white</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.CancelButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="background">#drawable/ripple_button_cancel</item>
<item name="android:tint">#color/white</item>
<item name="android:elevation">8dp</item>
</style>
</resources>
In fact, I tried a lot of things with inheritance of my CustomTheme.ConfirmButton and CustomTheme.CancelButton.
What's changing from CustomTheme.StandardButton : the shape's color.
The ripple_button.xml is orange.
Then, I created two other ripple buttons, the first one is red (CancelButton), the second one is green (ConfirmButton).
By default, the <item name="buttonStyle">#style/CustomTheme.StandardButton</item> is applied.
But, in my activity, even when I declare a specific theme to my buttons, the default style is the only one applied.
Note : the both buttons are always visible in these activity.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_confirm_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_confirm"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/btn_cancel_reset"
android:layout_marginBottom="8dp"
style="#style/CustomTheme.ConfirmButton"/>
<Button
android:id="#+id/btn_cancel_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_cancel"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/btn_confirm_reset"
android:layout_marginBottom="8dp"
style="#style/CustomTheme.CancelButton"/>
</android.support.constraint.ConstraintLayout>
I tried to apply the "default" StandardButton theme manually for each button (and then by removing the line <item name="buttonStyle">#style/CustomTheme.StandardButton</item> from my styles.xml but I still get the same behavior : all my buttons are always orange (and using StandardButton theme).
So I'm wondering where I fail / what I don't understand, or even if it's possible.
If a peaceful soul has an idea, some tips, I will be grateful (I can thank my hero with a french craft beer).
Have a great day, and thanks for reading.

Update your Button Style as below:
style.xml
<style name="CustomTheme.StandardButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/orange</item>
<item name="android:colorButtonNormal">#color/gray</item>
<item name="android:colorControlHighlight">#color/blue</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.ConfirmButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/orange</item>
<item name="android:colorButtonNormal">#color/gray</item>
<item name="android:colorControlHighlight">#color/blue</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.CancelButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/orange</item>
<item name="android:colorButtonNormal">#color/gray</item>
<item name="android:colorControlHighlight">#color/blue</item>
<item name="android:elevation">8dp</item>
</style>
You missed to append android: in item background.
To set Ripple effect you have to use android:colorControlHighlight because android:backgroundTint will take only color as input and drawable will not work. Here android:colorButtonNormal will give no effect because we have set backgroundTint. If you will remove backgroundTint, it will take color from android:colorButtonNormal
You have to set the theme in Button instead of style.
your_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_confirm_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_confirm"
android:textColor="#color/white"
android:theme="#style/CustomTheme.ConfirmButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/btn_cancel_reset"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_cancel_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_cancel"
android:textColor="#color/white"
android:theme="#style/CustomTheme.CancelButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/btn_confirm_reset"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will work!!

Align all columns in list view

I was wondering how I can manage to align all columns in rows. I am using a ListView, where I display a list of drugs for my game. The columns are different sizes each row. I would like to see that each column has the same width all down to the end of the list, but not have same width overall.
As you can see from the picture, the columns are not aligned. I draw the lines to make it even more obvious what I would like. You can also see that the buttons are to close to the other column. With the arrow on the picture I wanted to make it clear that those buttons should be placed more to the end of the row.
My implementation uses the following styles:
<!-- List style for the drug sell list -->
<style name="traderY.List">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_alignParentTop">true</item>
</style>
<!-- Header style for quantity column -->
<style name="traderY.HeaderQuantityText">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.15</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:padding">4dip</item>
<item name="android:layout_margin">4dip</item>
<item name="android:textColor">#EDEFF0</item>
</style>
<!-- Header style for cost column -->
<style name="traderY.HeaderCostText">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.20</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:padding">4dip</item>
<item name="android:layout_margin">4dip</item>
<item name="android:textColor">#EDEFF0</item>
</style>
<!-- Header style for name column -->
<style name="traderY.HeaderNameText">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.45</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:padding">4dip</item>
<item name="android:layout_margin">4dip</item>
<item name="android:textColor">#EDEFF0</item>
</style>
<!-- Row style for quantity column -->
<style name="traderY.QuantityListText">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.15</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:padding">4dip</item>
<item name="android:layout_margin">4dip</item>
<item name="android:textColor">#000000</item>
</style>
<!-- Row style for cost column -->
<style name="traderY.CostListText">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.20</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:padding">4dip</item>
<item name="android:layout_margin">4dip</item>
<item name="android:textColor">#000000</item>
</style>
<!-- Row style for name column -->
<style name="traderY.NameListText">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.45</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:padding">4dip</item>
<item name="android:layout_margin">4dip</item>
<item name="android:textColor">#000000</item>
</style>
<!-- Row style for button column -->
<style name="traderY.ListButton" parent="#android:style/Widget.Button">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.20</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15dip</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:gravity">center</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">0.6</item>
<item name="android:background">#drawable/custom_btn_black_pearl</item>
<item name="android:padding">4dip</item>
</style>
As you can see I set or I try to set the column width by using those two items:
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">0.20</item>
I was reading that you can set the width by using weight. I basically used the same values I would use to set percentages. If I understand correctly, the weight value represents the ratio between other components. I found this as a solution on a Stack Overflow question and I found it in several tutorials. One of the tutorials I found is this one here.
To share more light, here are also the layouts of the of all the components, starting with the fragment which contains the list view.
Fragment layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<TextView
android:id="#+id/money"
style="#style/traderY.TextCenter" />
<TextView
android:id="#+id/location"
style="#style/traderY.TextCenter" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/junkie_icon"/>
<ListView
android:id="#+id/drug_list"
style="#style/traderY.List"
android:layout_weight="1"/>
<TableRow
style="#style/traderY.ButtonRow">
<Button
android:id="#+id/nothing"
style="#style/traderY.ButtonCenter"
android:text="#string/exit"/>
</TableRow>
</LinearLayout>
Here is the header layout. As you can see I omit the last column for buttons, because there is no need to display a header for it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#000000">
<TextView
android:text="#string/header_quantity"
style="#style/traderY.HeaderQuantityText" />
<TextView
android:text="#string/header_cost"
style="#style/traderY.HeaderCostText" />
<TextView
android:text="#string/header_name"
style="#style/traderY.HeaderNameText" />
</LinearLayout>
And here is the layout for each row I use:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/drug_quantity"
style="#style/traderY.QuantityListText" />
<TextView
android:id="#+id/drug_cost"
style="#style/traderY.CostListText" />
<TextView
android:id="#+id/drug_name"
style="#style/traderY.NameListText" />
<Button
android:id="#+id/drug_sell_btn"
android:text="#string/sell_drugs_action"
style="#style/traderY.ListButton"/>
</LinearLayout>
Those are the style/layouts I use and I do not change any of those properties in the code. So the problem can only be in my XML files.
Does anyone know what am I doing wrong here? Maybe my investigation is wrong and I can not do it. I would appreciate any help or comments to solve this problem. If this is not even possible, then please let me know.

I found out that my solution was correct. The weight property did the job. For some unknown reason gradle did not see the changes when it was building the app. Or maybe it is the emulator. This was not the first time something like this happened. I will have to investigate why this even occur.

Increase weight of style="#style/traderY.QuantityListText". Make 0.2 or 0.3

Wrap your text views in a LinearLayout and set it to fill the parentView. In this way all the buttons will be aligned to the right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/drug_quantity"
style="#style/traderY.QuantityListText" />
<TextView
android:id="#+id/drug_cost"
style="#style/traderY.CostListText" />
<TextView
android:id="#+id/drug_name"
style="#style/traderY.NameListText" />
</LinearLayout>
<Button
android:id="#+id/drug_sell_btn"
android:text="#string/sell_drugs_action"
style="#style/traderY.ListButton"/>
</LinearLayout>

Issues in abstracting ImageView style into themes.xml

Here's my original layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:paddingRight="10dp"
android:src="#drawable/ic_action_refresh"/>
</RelativeLayout>
And I have extracted all but one of the ImageView layout into themes.xml:
<style name="MenuButton" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:layout_alignParentRight">true</item>
<item name="android:paddingRight">10dp</item>
</style>
I then replaced the attributes of the ImageView above to be:
<ImageView
style="#style/MenuButton"
android:src="#drawable/ic_action_refresh"/>
My problems are:
The design preview in Idea complained it couldn't resolve the MenuButton style.
The app deployed and ran just fine on my device, but the android:layout_centerVertical attribute was not applied. The item floated to the top of the container.
I'm new to Android so I'm likely to have missed something fundamental. Any ideas please?

Dont use these attributes in style
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
It may create problems.

Mix Android Style with my own

Thats how my .axml looks like:
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="2dip"
android:paddingBottom="2dip"
android:paddingLeft="5dip"
android:textSize="18dp"
android:text="Kommentare"
style="?android:attr/listSeparatorTextViewStyle" />
As you see I'm accessing a style attribute that's defined in a style theme (?android:attr/listSeparatorTextViewStyle)
Now I would like to separate my own style:
<style name="TextViewTitleBar" parent="android:Theme">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">2dip</item>
<item name="android:paddingBottom">2dip</item>
<item name="android:paddingLeft">5dip</item>
<item name="android:textSize">18dp</item>
</style>
and use it like:
style="#style/TextViewTitleBar" in my .axml , without losing the android defined style with the ? at the beginning.
How to combine/mix these styles?

You can set the parent to
#android:attr/listSeparatorTextViewStyle

Android layout error: "Resource id <res_id> is not of type STYLE (instead attr)"

I'm seeing an error I've never seen before w/ Android that's preventing some of my layout files from rendering in Eclipse. They render fine at runtime.
The error that shows up in the graphical layout editor (and my Error log) is:
"Resouce id 0x1010081 is not of type STYLE (instead attr)"
I've searched for resource id 0x1010081 in my R files, and I can't find it so I'm guessing maybe somehow I have a conflict with a built in Android attr. I've also verified that all of my style attributes below point to actual styles and not attr. Any help appreciated.
Here's my full layout code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bkg_light"
android:padding="#dimen/padding_med" >
<RelativeLayout
android:id="#+id/relativeLayout_activity"
android:layout_width="fill_parent"
android:layout_height="#dimen/button_height"
android:background="#drawable/xml_button"
android:padding="#dimen/padding_med" >
<TextView
style="#style/text_large_bold_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/activity" />
<TextView
android:id="#+id/textView_activity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/margin_med"
android:layout_toLeftOf="#+id/textView_arrow_right_start_date"
android:text="#string/none_selected"/>
<TextView
android:id="#+id/textView_arrow_right_start_date"
style="#style/arrow_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
<!-- kv Duration -->
<RelativeLayout
android:id="#+id/relativeLayout_duration"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/relativeLayout_activity"
android:layout_marginTop="#dimen/margin_large"
android:background="#drawable/xml_button">
<TextView
android:id="#+id/textView_duration"
style="#style/text_large_bold_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/duration_lc"
android:paddingLeft="#dimen/padding_med"/>
<Spinner
android:id="#+id/spinner_duration"
android:layout_width="wrap_content"
android:layout_height="#dimen/button_height"
android:layout_alignParentRight="true"
android:entries="#array/array_durations"
android:prompt="#string/duration_lc"
android:spinnerMode="dropdown"
android:clickable="false"/>
</RelativeLayout>
</RelativeLayout>
And here's my styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="arrow_right">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_xxlarge</item>
<item name="android:text">#string/arrow_right</item>
</style>
<style name="button_blue">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/selector_button_blue</item>
<item name="android:padding">#dimen/padding_med</item>
</style>
<style name="button_blue_small">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/selector_button_blue_small</item>
<item name="android:padding">#dimen/padding_med</item>
</style>
<style name="button_dark">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/selector_button_dark</item>
<item name="android:padding">#dimen/padding_med</item>
</style>
<style name="button_light">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/black</item>
<item name="android:background">#drawable/selector_button_light</item>
<item name="android:padding">#dimen/padding_med</item>
</style>
<style name="button_light_small">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/black</item>
<item name="android:textSize">#dimen/text_small</item>
<item name="android:background">#drawable/selector_button_light</item>
<item name="android:padding">#dimen/padding_small</item>
</style>
<style name="text_small_gray_light">
<item name="android:textSize">#dimen/text_small</item>
<item name="android:textColor">#color/gray_light</item>
</style>
<style name="text_med_bold_gray_light">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_med</item>
<item name="android:textColor">#color/gray_light</item>
</style>
<style name="text_large_bold_white">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_large</item>
</style>
<style name="text_large_bold_black">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_large</item>
<item name="android:textColor">#color/black</item>
</style>
<style name="text_large_bold_gray_dark">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_large</item>
<item name="android:textColor">#color/gray_dark</item>
</style>
<style name="text_large_bold_gray_light">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_large</item>
<item name="android:textColor">#color/gray_light</item>
</style>
<style name="text_large_bold_white">
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_large</item>
<item name="android:textColor">#color/white</item>
</style>
<style name="text_large_white">
<item name="android:textSize">#dimen/text_large</item>
<item name="android:textColor">#color/white</item>
</style>
</resources>
And here's my custom theme.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.P90X" parent="#style/Theme.Sherlock">
<item name="android:textColor">#ffffffff</item>
</style>
</resources>

I also have this problem, with the same resource ID showing up. It disappears when I change android:spinnerMode to "dialog" so I suspect it's not a problem with your code.
The id in question refers to the android attribute spinnerStyle. See the doc for R.attr
I found a workaround, namely replace
android:spinnerMode="dropdown"
with
android:spinnerStyle="#android:style/Widget.Spinner.DropDown".

Have you tried changing the each style property to something like this:
style="?attr/text_large_bold_white"

As JulianSymes says the problem is
android:spinnerMode="dropdown"
His solution (replace for android:spinnerStyle="#android:style/Widget.Spinner.DropDown") runs on my phone but not on my tablet
My solution is more simple: DELETE THE LINE.
spinnerMode="dropdown" is by default, therefore it's unnecesary

Delete all style elements and then add them one after another and always check if it still renders. So you can at least find out which one's to blame.

As Google points to this page for this error, and for the sake of posterity...
In my case, in a whim, I closed and reopened eclipse and boom the error was gone and eclipse had no problem rendering the preview.
Though I strongly believe this may not be the case for all.
If you feel you have done everything right, I guess, it won't hurt restarting eclipse.