I have a simple Button style, like
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="android:textColor">#color/white</item>
</style>
at this point the output is as this
it seems that the style is not applied and the colors are not set correctly. When I change the style to something like this
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">#color/colorPrimary</item>
<item name="android:textColor">#color/white</item>
</style>
I get something like this
Thw Button looks insane, but the style is applied.
How can I retain the Button shape as shiwn in the first picture and apply my styles correctly?
Ok I've found a way to get the Job done quite promisingly
style.xml
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/btn_ripple</item>
<item name="android:textColor">#color/white</item>
<item name="android:padding">10dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:layout_margin">3dp</item>
<item name="android:elevation">1dp</item>
<item name="android:translationZ">1dp</item>
</style>
and last the btn_ripple.xml is
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/btn_press">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</ripple>
and the result is
Regards
I think the problem may be located in the parent.
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
I belive the second snippet sets the button style, overriding the parent. Try to remove the parent, and see what happens.
<style name="AppTheme.Button">
<item name="android:background">#color/colorPrimary</item>
<item name="android:textColor">#color/white</item>
</style>
Related
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.
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 am using support preference library and every PreferenceCategory fill the whole screen with blank space and then show the preferences that it contains. I have tried changing PreferenceCategory style attribute - layout_height to wrap_content and it didn't work.
My preference styles:
<style name="PreferenceThemeOverlay">
<item name="preferenceScreenStyle">#style/Preference.PreferenceScreen</item>
<item name="preferenceFragmentStyle">#style/PreferenceFragment</item>
<item name="preferenceCategoryStyle">#style/Preference.Category</item>
<item name="preferenceStyle">#style/Preference</item>
<item name="preferenceInformationStyle">#style/Preference.Information</item>
<item name="checkBoxPreferenceStyle">#style/Preference.CheckBoxPreference</item>
<item name="switchPreferenceCompatStyle">#style/Preference.SwitchPreferenceCompat</item>
<item name="dialogPreferenceStyle">#style/Preference.DialogPreference</item>
<item name="editTextPreferenceStyle">#style/Preference.DialogPreference.EditTextPreference</item>
<item name="preferenceFragmentListStyle">#style/PreferenceFragmentList</item>
<item name="android:subtitleTextStyle">#color/dark_gray</item>
</style>
My prefernce xml:
<android.support.v7.preference.PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.v7.preference.PreferenceCategory
android:key="pref_user_settings"
android:title="#string/pref_group_user">
<android.support.v7.preference.ListPreference
android:defaultValue="Publisher"
android:entries="#array/pref_user_types"
android:entryValues="#array/pref_user_types"
android:key="pref_user_type"
android:title="#string/pref_title_user_type" />
</android.support.v7.preference.PreferenceCategory>
This is how it looks:
The way i solved it out is customing the preference category file.
Solution:
Create a new layout xml file called custom_preference_category:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:paddingTop="8dp"
android:id="#android:id/title" />
Then add this to your styles file:
<style name="Preference.Category">
<item name="android:layout">#layout/custom_preference_category</item>
<item name="android:shouldDisableView">false</item>
<item name="android:selectable">false</item>
</style>
<style name="PreferenceThemeOverlay">
<item name="preferenceScreenStyle">#style/Preference.PreferenceScreen</item>
<item name="preferenceFragmentStyle">#style/PreferenceFragment</item>
<item name="preferenceCategoryStyle">#style/Preference.Category</item>
<item name="preferenceStyle">#style/Preference</item>
<item name="preferenceInformationStyle">#style/Preference.Information</item>
<item name="checkBoxPreferenceStyle">#style/Preference.CheckBoxPreference</item>
<item name="switchPreferenceCompatStyle">#style/Preference.SwitchPreferenceCompat</item>
<item name="dialogPreferenceStyle">#style/Preference.DialogPreference</item>
<item name="editTextPreferenceStyle">#style/Preference.DialogPreference.EditTextPreference
</item>
<item name="preferenceFragmentListStyle">#style/PreferenceFragmentList</item>
</style>
And then use this style in your main app theme:
<item name="preferenceTheme">#style/PreferenceThemeOverlay</item>
I did it a lot of time ago so I'm not sure if this all I've done, so give me a feedback if something is missing.
My menu layout looks like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_change_pin"
android:title="#string/action_change_pin"
android:textColor="#000000"
android:orderInCategory="100"
app:showAsAction="never" />
<item android:id="#+id/action_logout"
android:title="#string/action_logout"
android:orderInCategory="100"
app:showAsAction="never" />
I want to change these two items' text color to white from black. How can i do that?
I think u need to change the style:
try this :
put this in your theme
<item name="android:itemTextAppearance">#style/myCustomMenuTextApearance</item>
and in your styles.xml:
<style name="myCustomMenuTextApearance" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#color/your_color</item>
</style>
should help u out
In your theme.xml
<style name="LightTheme" parent="#style/Theme.AppCompat.Light">
<item name="actionMenuTextColor">#FFF</item>
<item name="android:actionMenuTextColor">#FFF</item>
</style>
Try this:
<style name="ThemeName" parent="#style/Theme.Sherlock.Light">
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
</style>
this is my code in the styles.xml file;
<style name= "digado" parent="TextAppearance.ShowcaseView.Title">
<item name="android:textColor">#FFF</item>
<item name="android:textSize">32sp</item>
</style>
<style name="Transparencia" parent="ShowcaseView.Light">
<item name="sv_backgroundColor">#000</item>
<item name="sv_showcaseColor">#000</item>
<item name="sv_titleTextAppearance">#style/digado</item>
</style>
I want to know where it says digado, if there is any way I could put like a border settings so that within the text that shows it has border around it.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#android:color/white" />
</shape>
Define this drawable and then set it as background to your text view.