I found many solutions for button styling, but I have a small problem about defining multiple button styles. I am coding a calculator and I want to have different button styles for operation buttons and number buttons. So I had to define 2 different button styles. In my styles.xml file, I added following codes:
<resources>
<!-- 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>
<item name="buttonStyle">#style/OperationButtons</item>
<item name="buttonStyle">#style/NumberButtons</item>
</style>
<style name="OperationButtons" parent="android:Widget.Button">
<item name="android:background">#263238</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">15dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">.2</item>
<item name="android:textColor">#fff</item>
<item name="android:layout_margin">10dp</item>
<item name="android:textSize">18sp</item>
</style>
<style name="NumberButtons" parent="android:Widget.Button">
<item name="android:background">#607D8B</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">15dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">.2</item>
<item name="android:textColor">#fff</item>
<item name="android:layout_margin">10dp</item>
<item name="android:textSize">18sp</item>
</style>
</resources>
However, it seems that I'm defining two different button styles and I am getting an error like "Resource entry AppTheme already has bag item buttonStyle."
How can I solve this problem?
The buttonSyle that you define in your AppTheme is the default (so you can have only one).
But you can use the second style in your layouts doing this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/NumberButtons"/>
Don't forget to remove:
<item name="buttonStyle">#style/NumberButtons</item>
Related
I'm using Material components to create a DatePicker. From what I understand, colorPrimary is used to determine the color of the section at the top of the dialog, as well as the colors for the text on the buttons, specifically CANCEL and OK.
Going through the documentation, I can't seem to find a way to change just the color of the buttons at the bottom ? Is it possible to do that ?
current code:
<style name="ThemeOverlay.App.DatePicker" parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorOnPrimary">#android:color/white</item>
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
<item name="shapeAppearanceMediumComponent">#style/ShapeAppearance.App.MediumComponent
</item>
<item name="materialCalendarHeaderTitle">#style/MyHeaderTitle</item>
<item name="colorOnPrimarySurface">#android:color/white</item>
</style>
<style name="MyHeaderTitle" parent="Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">#android:color/white</item>
<item name="iconTint">#android:color/white</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="android:textSize">24sp</item>
<item name="cornerSize">16dp</item>
</style>
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="android:textSize">30sp</item>
<item name="cornerSize">16dp</item>
</style>
You can use:
builder.setTheme(R.style.MaterialCalendarTheme)
and then define:
<style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<!-- Buttons -->
<item name="buttonBarPositiveButtonStyle">#style/TextButton</item>
<item name="buttonBarNegativeButtonStyle">#style/TextButton</item>
</style>
<style name="TextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#color/...</item>
<item name="backgroundTint">#color/...</item>
</style>
I am using a custom Dark Theme in my app. Everything is doing okay, except for the Cut Copy Paste dialog that appears as a solid black square.
Surely there is a style that determines that, but I can't find it, or an answer that addresses this directly. Min API is 16.
<style name="DarkTheme" parent="AppTheme.NoActionBar">
<item name="colorPrimary">#color/blackBackground</item>
<item name="colorPrimaryDark">#color/blackBackground</item>
<item name="colorAccent">#color/yellow</item>
<item name="android:textColor">#color/whiteText</item>
<item name="android:background">#color/blackBackground</item>
<item name="buttonStyle">#style/darkButtonStyle</item>
<item name="spinnerStyle">#style/darkSpinnerStyle</item>
</style>
<style name="darkButtonStyle" parent="#android:style/Widget.Button">
<item name="android:layout_width">fill_parent</item>
<item name="android:textColor">#color/whiteText</item>
<item name="android:textSize">16sp</item>
<item name="android:padding">10dp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#color/darkBackground</item>
<item name="android:gravity">center</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="darkSpinnerStyle" parent="Widget.AppCompat.Spinner">
<item name="android:background">#color/blackBackground</item>
<item name="android:paddingTop">0dp</item>
<item name="android:layout_marginStart">1dp</item>
<item name="android:layout_marginLeft">1dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
</style>
I was having the same issue when regarding to MaterialAlertDialog. I was able to fix it using backgroundTint instead of background in styles. This is how:
Before
<style name="materialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:background">#color/colorPrimaryDark</item>
<item name="materialAlertDialogTitleTextStyle">#style/TitleTextStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
</style>
This will be enough to repropduce the error that you are saying... So what i did was changing background for backgroundTint...
After
<style name="materialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:backgroundTint">#color/colorPrimaryDark</item>
<item name="materialAlertDialogTitleTextStyle">#style/TitleTextStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
</style>
It seems like when you set a background and the dialog is created, the toolbar of copy/paste menu was changing his background in some weird way that i cant explain.
So this is not the exact answer for your problem but it may help you.
Note: Try removing background attr of your style. I have a dark theme and there is no need to use it. Just simple use <style name="AppTheme" parent="Theme.MaterialComponents.DayNight"> instead of <style name="DarkTheme" parent="AppTheme.NoActionBar">.
I have one app theme and many custom styles for different View.
For example, snippet of code:
<!-- styles.xml -->
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light" />
<style name="title">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">22sp</item>
<item name="android:padding">10sp</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:textColor">#color/black</item>
<item name="android:background">#color/background_all_screen</item>
</style>
<style name="label">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/black</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_marginLeft">5dp</item>
</style>
<style name="button">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">2dp</item>
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/blue</item>
</style>
And now I want make many color themes for application. This is mean, that in different color themes custom View was in different colors.
For example, in one color theme button is blue, in another - red.
How can I implement this resources for easy change of theme?
There is a useful tutorial, but what about the custom styles for elements?
UPDATE:
I try it, but this is nor work:
<style name="Button.MyButton" parent="android:style/Widget.Button">
<item name="android:background">#drawable/shape</item>
</style>
<style name ="Button.MyButton.Theme1">
<item name="android:textColor">#000000</item>
</style>
<style name ="Button.MyButton.Theme2">
<item name="android:textColor">#FFFFFF</item>
</style>
<Button
android:id="#+id/save_button"
android:layout_width="0px"
style="#style/Button.MyButton"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/save"/>
This is answer. I just use attributes and after that I can use different colors in different themes.
<!-- values/attributes.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="myCoolColor" format="color" />
</resources>
<!-- styles.xml, define myCoolColor for each theme -->
<style name="Theme.MyApp" parent="#style/Theme.Light">
<item name="myCoolColor">#123456</item>
</style>
<style name="Theme.MyApp.Dark" parent="#style/Theme.Dark">
<item name="myCoolColor">#654321</item>
</style>
Does anyone know the way in which i am meant to code the change i want to make to the color of the ActionBar? I have tried using android:textColor , and android:color , as well as various other things. It seems like a quite a hassle for me. Although there is most probably a simple solution for this. Does anyone have any ideas?
Note: i am trying to make the font color white - from what i can tell, Android does this from the "actionbar.solid.pp" style.
<style name="Theme.Pp" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarItemBackground">#drawable/selectable_background_pp</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Pp</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Pp</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Pp</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_pp</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_pp</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Pp</item>
</style>
<style name="ActionBar.Solid.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#111</item>
<item name="android:color">#FFF</item>
<item name="android:textStyle">bold</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="ActionBar.Transparent.Pp" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/ab_transparent_pp</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="PopupMenu.Pp" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
</style>
<style name="DropDownListView.Pp" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ActionBarTabStyle.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#ffffff</item>
</style>
<style name="DropDownNav.Pp" parent="#android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_background_ab_pp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ProgressBar.Pp" parent="#android:style/Widget.Holo.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_pp</item>
</style>
<style name="ActionButton.CloseMode.Pp" parent="#android:style/Widget.Holo.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_pp</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Pp.Widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
</style>
Changing the action bar's text color is shown on the developer guide Styling the Action Bar
I think you can use this free tool to customize the style:
http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&neutralPressed=1&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100
I have used Android Asset Studio to generate action bar style, however i woul like to do some changes, which I was unable to do in Studio, so I edited generated theme but lot of things was just ignored, and I just can't figure out how things work.
There is example:
`
<style name="Theme.Myactionbar" parent="#style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">#drawable/selectable_background_myactionbar</item>
<item name="popupMenuStyle">#style/PopupMenu.Myactionbar</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Myactionbar</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Myactionbar</item>
<item name="actionDropDownStyle">#style/DropDownNav.Myactionbar</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Myactionbar</item>
<item name="actionModeBackground">#drawable/cab_background_top_myactionbar</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_myactionbar</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Myactionbar</item>
</style>
<style name="ActionBar.Solid.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/ab_solid_myactionbar</item> //THIS IS GREEN
<item name="backgroundStacked">#drawable/ab_solid_myactionbar</item>//THIS IS GREEN
<item name="backgroundSplit">#drawable/ab_bottom_solid_myactionbar</item>//THIS IS GREEN
<item name="progressBarStyle">#style/ProgressBar.Myactionbar</item>
</style>
<style name="ActionBar.Transparent.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="background">#drawable/ab_transparent_myactionbar</item>
<item name="progressBarStyle">#style/ProgressBar.Myactionbar</item>
</style>
<style name="PopupMenu.Myactionbar" parent="#style/Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example </item>
</style>
<style name="DropDownListView.Myactionbar" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_myactionbar</item>
</style>
<style name="ActionBarTabStyle.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_myactionbar</item>
</style>
<style name="DropDownNav.Myactionbar" parent="#style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_myactionbar</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myactionbar</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myactionbar</item>
</style>
<style name="ProgressBar.Myactionbar" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_myactionbar</item>
</style>
<style name="ActionButton.CloseMode.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_myactionbar</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Myactionbar.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Myactionbar</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Myactionbar</item>
</style>
Everything was like in generator, but then i tried the simplest change, that is the color, so I edited style name=ActionBar.Solid.Myactionbar and put there som other drawables from other generated style.
It looked like this :
<style name="Theme.Myactionbar" parent="#style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">#drawable/selectable_background_myactionbar</item>
<item name="popupMenuStyle">#style/PopupMenu.Myactionbar</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Myactionbar</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Myactionbar</item>
<item name="actionDropDownStyle">#style/DropDownNav.Myactionbar</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Myactionbar</item>
<item name="actionModeBackground">#drawable/cab_background_top_myactionbar</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_myactionbar</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Myactionbar</item>
</style>
<style name="ActionBar.Solid.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/ab_solid_example</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_example</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_myactionbar</item>
<item name="progressBarStyle">#style/ProgressBar.Myactionbar</item>
</style>
but nothing happend, and changed drawables supposed to be gray. I was wandering if anybody did this before and why this isnt working? Thank you
Ok I figured it out, there is values-v14 folder for styles for api level 14 and above, so you have to change these values too.