T'm using the newest Android Studio Version to code my app and I can't change the button style.
It seems like when generating a new project, it already has some default styles for buttons which I can't seem to be able to override.
Everytime I place just a plane button it already has some background color ("colorPrimary") and if I'm trying to apply a style, it only changes the text of the button, but not the shape or the color.
This is my style:
<style name="buttonStartStyle">
<item name="android:background">#drawable/button_style1</item>
<item name="android:layout_margin">20dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
and my button_style1.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp"/>
<solid android:color="#color/smoothWhite"/>
<size android:height="50dp"/>
<gradient android:startColor="#color/green_card" android:endColor="#color/green_main"/>
</shape>
</item>
The button already looks like this when I place it right from the pallete:
My xml code for the button:
<Button
android:id="#+id/button"
style="#style/buttonStartStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="121dp"
tools:layout_editor_absoluteY="244dp" />
This is how the button looks with the style applied:
Here is my themes.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.B_app" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/green_dark</item>
<item name="colorPrimaryVariant">#color/black</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. -->
</style>
<style name="Theme.B_app.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.B_app.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.B_app.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="buttonStartStyle">
<item name="android:background">#drawable/button_style1</item>
<item name="android:layout_margin">20dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="testStyle">
<item name="android:background">#drawable/button_style2</item>
<item name="android:layout_margin">20dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="FlatButton" parent="Theme.AppCompat.Light">
<item name="android:textColor">#color/grey_dark</item>
<item name="colorControlHighlight">#color/white</item>
</style>
I see two possibilites:
You might not have the right parent for your Button. Try:
<style name="buttonStartStyle" parent ="android:Widget.Button">
attributes might be changed along the way in your program. Try setting the needed attributes to null before applying the style.
The problem here is likely with the parent style in themes.xml.
If the parent theme is one of the Material Components ones for example:
<style name="Theme.StyleDemo2" 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. -->
</style>
This overrides any style changes you might make to give your button the material theme with a tint color defined by the colorPrimary item in the theme (they are also not standard buttons in this instance but some funky sub class replaced quietly). To overcome this issue change the parent theme to something such as:
parent="Theme.AppCompat.Light"
This one is much more customizable and your button styles will take effect.
Related
I'm trying to change the colour of the selected icon in the bottom navigation bar. I already have a selector, that changes the colour of the selected icon. My problem is, that if the App theme changes, the colours won't change.
How can I change the selector colour, based on the App theme?
This is the selector I already have:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/standardThemeAccentSelected" android:state_checked="true" />
<item android:color="#color/standardThemeAccentNonSelected" />
</selector>
Those are my themes/styles:
<resources>
<!-- Base application theme. -->
<style name="baseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/standardThemePrimaryColor</item>
<item name="colorPrimaryDark">#color/standardThemePrimaryDark</item>
<item name="android:textColor">#color/standardThemeAccentText</item>
<item name="android:windowBackground">#color/standardThemeAccentBackground</item>
<item name="itemIconTint">#color/standardThemeAccentNonSelected</item>
<item name="itemTextColor">#color/standardThemeAccentNonSelected</item>
<item name="colorAccent">#color/standardThemeAccentContent</item>
<item name="drawableTint">#color/standardThemeAccentText</item>
<item name="bottomNavigationStyle">#style/baseThemeNav</item>
<!--Navigation-->
<item name="android:navigationBarColor">#color/standardThemePrimaryColor</item>
</style>
<!--Base Theme Nav-->
<style name="baseThemeNav" parent="Widget.Design.BottomNavigationView">
<item name="android:background">#color/standardThemePrimaryColor</item>
</style>
<!--Black Theme-->
<style name="blackTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/blackThemePrimaryColor</item>
<item name="colorPrimaryDark">#color/blackThemePrimaryDark</item>
<item name="android:textColor">#color/blackThemeAccentText</item>
<item name="android:windowBackground">#color/blackThemeAccentBackground</item>
<item name="itemIconTint">#color/blackThemeAccentNonSelected</item>
<item name="itemTextColor">#color/blackThemeAccentNonSelected</item>
<item name="colorAccent">#color/blackThemeAccentContent</item>
<item name="drawableTint">#color/blackThemeAccentNonSelected</item>
<item name="bottomNavigationStyle">#style/blackThemeNav</item>
<!--Navigation Style-->
<item name="android:navigationBarColor">#color/blackThemePrimaryColor</item>
</style>
<!--Black Theme nav-->
<style name="blackThemeNav" parent="Widget.Design.BottomNavigationView">
<item name="android:background">#color/blackThemePrimaryColor</item>
</style>
</resources>
The two buttons at the bottom will not show the labels. This is how I am instantiating the date picker new DatePickerDialog(classname.this, date, myCalendar
.get(Calendar.YEAR), myCalendar.get(Calendar.MONTH),
myCalendar.get(Calendar.DAY_OF_MONTH)).show();
I am running Android Studio 3.2 Canary and target sdk of 28.
You can use this to apply material button style :
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:buttonBarPositiveButtonStyle">#style/Widget.MaterialComponents.Button</item>
<item name="android:buttonBarNegativeButtonStyle">#style/Widget.MaterialComponents.Button.TextButton</item>
<item name="android:buttonBarNeutralButtonStyle">#style/Widget.MaterialComponents.Button</item>
</style>
Result : materialDatePicker
Check for <item name="colorAccent">#color/colorAccent</item> in your styles.xml, button text color will be same as value of colorAccent in colors.xml.
Edit:-
Update your style as following, It will work:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.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="android:buttonBarPositiveButtonStyle">#style/DialogButtonStyled</item>
<item name="android:buttonBarNegativeButtonStyle">#style/DialogButtonStyled</item>
<item name="android:buttonBarNeutralButtonStyle">#style/DialogButtonStyled</item>
</style>
<style name="DialogButtonStyled" parent="Theme.MaterialComponents.Light">
<item name="android:textColor">#color/colorWhite</item>
</style>
When I click item in the first picture I get something that you can see in the second picture. And as you can see I get white item. Does anyone know how to change its color?
https://i.stack.imgur.com/nkoNV.jpg
https://i.stack.imgur.com/JHQKO.jpg
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/tools"
android:title="123123" >
<group
android:checkableBehavior="all">
<menu >
<item
android:id="#+id/action_sort_az"
android:title="#string/sort_az"
android:checked="true"
app:showAsAction="never"
app:actionViewClass="android.widget.CheckBox" />
....
<item android:id="#+id/action_sort_id_asc"
android:title="#string/snachala_novye"
app:actionViewClass="android.widget.CheckBox" />
</menu>
</group>
</item>
</menu>
style.xml
<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>
</style>
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#E9E2BF</item>
<item name="colorControlActivated">#E9E2BF</item>
<item name="colorControlHighlight">#E9E2BF</item>
</style>
<style name="customTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="android:itemBackground">#424242</item>
<item name="android:textColor">#E9E2BF</item>
<item name="colorPrimaryDark">#1b1b1b</item>
<item name="android:itemTextAppearance">#style/MyTextAppearance</item>
<item name="android:windowBackground">#color/mycolor</item>
</style>
...
</resources>
I see you have already modified the background colors of your menu items, which I also achieved by adding to my Style
<item name="android:itemBackground">#drawable/myColors</item> and then you have the issue with the Header of the SubMenu which is White or being really precise is <color name="material_grey_50">#fffafafa</color> applied automatically by the parent theme you are using Theme.AppCompat.DayNight.DarkActionBar.
To change the color of the header title of the submenu you will need your style.xml to have actionBarPopupTheme attribute and have the custom MyStyle style that I have written as below:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:itemBackground">#drawable/popup</item>
<item name="actionBarPopupTheme">#style/MyStyle</item>
</style>
<style name="MyStyle" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#color/colorAccent</item>
</style>
</resources>
Add a custom style to your style.xml file with parent parent="#style/Widget.AppCompat.PopupMenu" and give it a popupBackground attribute
I don't know how I changed in my app the default color for the different elements of the layout out such as RadioButton, Checkbox, etc. The now saw white and I have a white background. In normal layouts I can hack this by setting "buttonTint" of the element to the color I want, but in the preferences.xml (with PreferenceScreen layout) I can't do that.
This is what happens (See here = white checkbox):
I don't know what I've changed but I can't rollback. This is my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorControlNormal">#color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:itemBackground">#color/white</item> <!-- Menu background color -->
<item name="android:itemTextAppearance">#style/myCustomMenuTextAppearance</item>
</style>
<!-- Menu text color -->
<style name="myCustomMenuTextAppearance" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#000</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AnalyzeForeground" parent="android:Theme.Holo.Dialog">
<item name="android:alertDialogStyle">#style/CustomAlertDialogStyle</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">12sp</item>
</style>
<style name="CustomAlertDialogStyle">
<item name="android:bottomBright">#android:color/transparent</item>
<item name="android:bottomDark">#android:color/transparent</item>
<item name="android:bottomMedium">#android:color/transparent</item>
<item name="android:centerBright">#android:color/transparent</item>
<item name="android:centerDark">#android:color/transparent</item>
<item name="android:centerMedium">#android:color/transparent</item>
<item name="android:fullBright">#android:color/transparent</item>
<item name="android:fullDark">#android:color/transparent</item>
<item name="android:topBright">#android:color/transparent</item>
<item name="android:topDark">#android:color/transparent</item>
</style>
Edit
I add the color.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#0098D6</color>
<color name="colorPrimaryDark">#006e99</color>
<color name="colorAccent">#0098D6</color>
<color name="transparent_white_90">#F2FFFFFF</color>
<color name="rating7">#ff6666</color>
<color name="rating8">#ff0000</color>
<color name="rating9">#990000</color>
<color name="rating10">#800080</color>
<color name="white">#FFF</color>
<color name="background_transparent">#585858</color>
</resources>
Problem is you have used colorControlNormal as white color and it overrides the control blue color that you have defined as colorAccent.
SOLUTION:
Remove item colorControlNormal from style or give colorControlNormal a different color.
<item name="colorControlNormal">#color/colorAccent</item>
For details, see documentation:
colorControlNormal: The color applied to framework controls in their normal state.
Hope this will help~
You can use simple color resources, specified usually inside res/values/colors.xml.
<color name="red">#ffff0000</color>
and use via
android:background="ffff0000"
I've tried many things to change the text color when i click the "three dot" menu button but it always reverts back to the toolbar (android:theme) theme and not the android:popupTheme. I want the text to be black but it always shows up white.
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
</style>
<style name="MaterialWorkout_theme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColorSecondary">#48FFFFFF</item>
</style>
<style name="Popup_theme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColorSecondary">#38000000</item>
</style>
app_bar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:id="#+id/app_bar"
android:theme="#style/MaterialWorkout_theme"
android:popupTheme="#style/Popup_theme"
>
Here is what it looks like:
http://imgur.com/svRuuHK
Solved it. changed my toolbar.xml file to this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/primaryColor"
android:id="#+id/tool_bar"
android:theme="#style/MaterialWorkout_theme"
app:popupTheme="#style/Popup_theme">
notice the implementation of:
xmlns:app="http://schemas.android.com/apk/res-auto"
and
app:popupTheme="#style/Popup_theme"
these two lines solved my problem!
You need to define your popup menu theme in your style, not you Toolbar.
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="popupMenuStyle">#style/Popup_theme</item>
</style>
Use below code .I hope this will solve your problem.You can change both background color and textcolor.
<style name="AppFullScreenThemeNight" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<!-- if using android.support.v7.widget.PopupMenu -->
<item name="popupMenuStyle">#style/PopupMenu</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
</style>
<style name="PopupMenu" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:popupBackground">#color/button_color</item>
</style>
<style name="TextAppearance">
<item name="android:textColor">#android:color/holo_red_dark</item>
</style>