Custom theme breaks spinner apperance - android

I am currently working on dynamically changing themes with a settings option. The themes are very simple and only change background color. After changing theme, the spinners do not look right see image http://imageshack.us/photo/my-images/600/baddropdown.png/
I solved the first issue (the spinner itself) with a custom spinner item that sets the background transparent
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:ellipsize="marquee"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:singleLine="true"
style="?android:attr/spinnerItemStyle"
android:background="#android:color/transparent"
android:id="#android:id/text1" />
I tried the same with a custom spinner_dropdown_item but it did not work. Any ideas what I can try to get the default spinner appearance would be greatly appreciated.
EDIT: I was able to change the spinner_dropdown_item background http://imageshack.us/photo/my-images/10/halfbaddropdown.png/ but the drop down prompt background and separators are the application backgrounds color but I want the default appearance.
NOTE: removed an image link so I could post the newest.
EDIT: Issue has been resolved, acctually ended up being a simple fix. Had to change my custom theme which was
<style name="grey" parent="#android:style/Theme.Light">
<item name="android:background">#EEE9E9</item>
</style>
in styles.xml to
<style name="grey" parent="#android:style/Theme.Light">
<item name="android:windowBackground">#color/converter_grey</item>
</style>
and define the color in colors.xml

Issue has been resolved, acctually ended up being a simple fix. Had to change my custom theme which was
<style name="grey" parent="#android:style/Theme.Light">
<item name="android:background">#EEE9E9</item>
</style>
in styles.xml to
<style name="grey" parent="#android:style/Theme.Light">
<item name="android:windowBackground">#color/converter_grey</item>
</style>
and define the color in colors.xml

Related

Create style that extends from default style set in application theme

I have set the default button style in my application theme, so that it is applied to every button in the app.
There are few buttons that need to have their text capitalized in addition to default style. So what I'm trying to do is something like this
(the following code snippet doesn't work as I cannot set parent="?attr/materialButtonStyle"):
<style name="capitalizedButton" parent="?attr/materialButtonStyle">
<item name="android:textAllCaps">true</item>
</style>
Is it possible to extend a style defined in theme.xml? I don't want to refer to the local style that I'm setting in theme as that can change later, instead I intend to access it using theme attribute.
If the capitalization happens in addition to your custom default button style, there is no need to make the capitalization style a child of ?attr/materialButtonStyle (This cannot be done anyhow, as ?attr references an attribute in the currently applied theme). You can read more about it here.
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="buttonStyle">#style/DefaultButton</item>
</style>
<style name="DefaultButton" parent="Widget.AppCompat.Button">
<item name="android:textColor">#color/white</item>
</style>
<style name="AllCapsButton">
<item name="android:textAllCaps">true</item>
</style>
layout.xml
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:theme="#style/AllCapsButton"/>
In the code above, button gets the DefaultButton style (white text) applied by the theme, and the AllCapsButton style (capitalized text) applied in the layout file.
You can directly pass style to Button widget in you XML like:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="capitalizedButton"/>
Hope you get the answer. If not please explain your question.

How to change the background colour for MaterialCardView using the style.xml file?

I want to change the background colour for MaterialCardView using the style.xml file. It would really help with implementing "Dark mode"in my Android app.
I have tried dynamically doing but would prefer this done using the theme.
Create your custom style for MaterialCardView that extends Widget.MaterialComponents.CardView:
<style name="YourCardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">#color/your_color</item>
</style>
Then you can set this style manually to your single MaterialCardView in xml layout:
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/YourCardView">
<!-- card content -->
</com.google.android.material.card.MaterialCardView>
Or you can set the style for all MaterialCardViews within your custom theme (that extends a theme from MaterialComponents):
<style name="YourTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="materialCardViewStyle">#style/YourCardView</item>
</style>
Actually, I got it working by adding the attribute
app:cardBackgroundColor="#color/colorAccent"
Of course, you have to define the app namespace, that goes by the following:
xmlns:app="http://schemas.android.com/apk/res-auto"
Widget.MaterialComponents.CardView can be styled just alike any other component:
<style name="CustomCardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">?attr/colorSurface</item>
</style>
Changing colorSurface, which defaults to #FFFFFF, might be rather effective for a dark theme.
see the documentation, which also explains how to apply it to all instances.

AppCompat Spinner style background with colorBackground set in AppTheme?

I have a BaseActivity with a theme applied in which i have defined an attribute colorBackground as my app's default background color(say brown).
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorBackground">#color/app_background</item>
</style>
What this does, is it gives the spinner present in one of the fragment loaded on that activity the same color background as my app's background(brown).
like this:
Problem
But I want the style to be default with white background only and not the colorBackground.
To accomplish this i have created a style for Spinner
as
<style name="AppSpinner" parent="Widget.AppCompat.Spinner">
<item name="android:popupBackground">#ffffff</item>
</style>
and i am applying this style as
<Spinner
style="#style/AppSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
this gives me the the white background for the Drop down popup but surrounded by a weird black background.
like this:
tried solution
I tried other attributes also in the AppSpinner like
android:background and android:colorBackground also, but same result.
Why is that? How can i change that.
Or is there any other way of accomplishing the desired effect.
I also had this problem and solved it like this:
1. Make two version of you app theme
The second one has to inherit the first and set the colorBackground attribute (which isn't set in the first version). Something like this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- some theme attributes, for example accent color, etc. -->
</style>
<style name="AppTheme.WithBackground">
<item name="android:colorBackground">#color/app_background</item>
</style>
2. Use the version with background as activity theme
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.WithBackground" ... >
3. Use the version without background as theme in spinner view
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme" />
This worked perfectly for me, even without overdraw warnings.

Change holo spinner text colour

I have a spinner in a Holo theme dialog and am trying to change the text colour because it is very hard to read:
I have looked at android styles.xml, as well as many other answers, and believe that I am setting the custom style correctly; but it's just not getting picked up.
This is an extract from the dialog layout file where the spinner lives:
<Spinner
android:id="#+id/spn_Type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/dose_type_options"
style="#style/DialogSpinner" />
And these are the relevant entries in styles.xml in the values-v14 folder:
<style name="DialogSpinner" parent="#android:style/Widget.Holo.Spinner">
<item name="android:spinnerItemStyle">#style/MySpinnerItem</item>
</style>
<style name="MySpinnerItem" parent="android:Widget.Holo.TextView.SpinnerItem">
<item name="android:textAppearance">#style/MyTextAppearanceSpinnerItem</item>
</style>
<style name="MyTextAppearanceSpinnerItem" parent="android:TextAppearance.Holo.Widget.TextView.SpinnerItem">
<item name="android:textColor">#FFF</item>
</style>
The dialog itself is forced to the Holo dark theme by using:
<style name="FibroDialog" parent="#android:style/Theme.Holo.Dialog">
</style>
Can anyone identify why the spinner text isn't white?
I have looked at other solutions, which suggest changing the colour in code, but this app supports 2.3.* upwards, so for those non-holo versions black text is fine, hence trying to do it by styles.
Thanks
Updated using answer from Woda below
The text colour of the initial value of the spinner is now white, which goes a long way to highlighting that there is a spinner there for the user:
But the text colour of the selectable items is still black. I guess it's not a massive deal, at least the existence of the spinner has been affirmed by getting the initial text changed to white. But I would be interested to know why the items are still black, and how to change them to white.
Have you tried to accept the SpinnerItemStyle to your Theme? So all Spinners in your App would've the same style. I'm using it like this and it works:
theme.xml:
<style name="exampleTheme" parent="android:Theme.Holo.Light">
<item name="android:spinnerItemStyle">#style/SpinnerItem_example</item>
...
</style>
style.xml:
<style name="SpinnerItem_example" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
<item name="android:textColor">#000000</item>
</style>
Update:
Taking a deeper look into the styles.xml brought me this:
<style name="Widget.DropDownItem.Spinner">
<item name="android:checkMark">?android:attr/listChoiceIndicatorSingle</item>
</style>
<style name="Widget.DropDownItem">
<item name="android:textAppearance">#style/TextAppearance.Widget.DropDownItem</item>
<item name="android:paddingStart">#dimen/dropdownitem_text_padding_left</item>
<item name="android:paddingEnd">#dimen/dropdownitem_text_padding_right</item>
<item name="android:gravity">center_vertical</item>
</style>
So you probably need to customize the Widget.DropDownItem and accept it in your theme.
...
<item name="dropDownItemStyle">#android:style/Widget.DropDownItem</item>
...
For customizing my application the following two links helped me a lot to understand the structure of the different views. These two files are part of the android source code. May be it helps you too.
themes.xml
styles.xml
I fixed it by calling
mArrayAdapter.setDropDownViewTheme(mActivity.getTheme());
Hope this helps someone ;)
You can access the internal TextView in code without changing any styles. This is how I handled enabling and disabling Spinners
The .getSelectedView() did not work for me. So I tricked the Spinner to "show" being disabled.
You will need to define your own colors for the "disabled" look.
For Example:
R.color.blue_text //means enabled
R.color.gray_text //means disabled
So to disable my spinner:
((TextView)mySpinner.getChildAt(0)).setTextColor(getResources().getColor(R.color.gray_text));
mySpinner.setEnabled(false);
mySpinner.setFocusable(false);
To enable my spinner:
((TextView)mySpinner.getChildAt(0)).setTextColor(getResources().getColor(R.color.blue_text));
mySpinner.setEnabled(true);
mySpinner.setFocusable(true);
The getChildAt(0) function allows you to access the first item in the spinner, which is what you show on the screen as a TextView.
You don't need to change styles or modify any XML. Just do this in your code, even within event methods, you should be fine.

What theme attributes do I need to override to change the blue highlight color of my dialogs?

I have a theme called "greenhighlight" — this theme was generated using the Android Action Bar Style Generator, and inherits from the default ActionBarSherlock theme. The theme does nothing except change the highlight at the bottom of the ActionBar from blue to green.
To theme all my activities, I just do:
<application android:theme="#style/Theme.greenhighlight"...
This works pretty well for activities (note the green highlight on the bottom of the ActionBar):
However, I'm having difficulty theming my dialogs to match my activities:
My "greenhighlight_Dialog" theme is defined as:
<style name="greenhighlight_Dialog" parent="#style/Theme.Sherlock.Dialog">
<item name="android:progressBarStyleHorizontal">
#style/greenhighlight_ProgressBar
</item>
</style>
I'm inheriting from the default Sherlock dialog theme, and overriding the progress bar using the progress bar style as defined by my generated "greenhighlight" theme — you can see that the progress bar is the correct shade of green in the screenshot above.
To use the theme, I'm running the following code:
ContextThemeWrapper ctw =
new ContextThemeWrapper(this, R.style.greenhighlight_Dialog);
AlertDialog.Builder builder = new AlertDialog.Builder(ctw);
...
ProgressDialog pd = new ProgressDialog(this, R.style.greenhighlight_Dialog);
...
My problem is that I have no idea what attributes I need to override. I've been looking through styles.xml and themes.xml as recommended by the Styles and Themes doco (which notes that "the R.style reference, however, is not well documented and does not thoroughly describe the styles") — but there are a lot of styles defined on Theme.Dialog and I'm unsure as to which ones I need to override to get the change I want.
What attributes to I need to override for my dialogs to have green title text, a green highlight bar underneath the title and green check marks for checked list items?
I went digging around the source and came across the alert_dialog_holo.xml layout file. This is the divider view:
<View android:id="#+id/titleDivider"
android:layout_width="match_parent"
android:layout_height="2dip"
android:visibility="gone"
android:background="#android:color/holo_blue_light" />
In the AlertController class, it's visibility is set to VISIBLE if there is a title present. Since the color is hardcoded, there's not going to be a way to overwrite this with a style attribute.
This is the title view:
<com.android.internal.widget.DialogTitle android:id="#+id/alertTitle"
style="?android:attr/windowTitleStyle"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
So it uses the windowTitleStyle. It took a lot of chasing, but I eventually found the style that uses:
<style name="TextAppearance.Holo.DialogWindowTitle">
<item name="android:textSize">22sp</item>
<item name="android:textColor">#android:color/holo_blue_light</item>
</style>
Following the parent styles back, I was able to change the text color only via styles:
<style name="AppTheme" parent="#android:style/Theme.Holo">
<item name="android:alertDialogTheme">#style/AlertDialogStyle</item>
</style>
<style name="AlertDialogStyle" parent="#android:style/Theme.Holo.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
<item name="android:windowTitleStyle">#style/DialogWindowTitle</item>
</style>
<style name="DialogWindowTitle">
<item name="android:maxLines">1</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:textAppearance">#style/DialogWindowTitleAppearance</item>
</style>
<style name="DialogWindowTitleAppearance" parent="#android:style/TextAppearance.Holo.DialogWindowTitle">
<item name="android:textColor">#00ff00</item>
</style>
Now for the divider, you can't change it via styles, but since you know the id, you can extend the AlertDialog class and intercept it when it creates its layout (onCreate) and change it's color. Though this is handled in the private AlertController class, so I'm unsure how much luck you'll have. I'll look into this more and come back if I come up with anything.
I found a solution to remove the divider: just add the following line in your custom alert dialog style (please refer to AlertDialogStyle in Jason Robinson's answer):
<item name="android:divider">#null</item>"
Then the divider will gone.
If you still want to add a custom divider, you can add it in your custom content layout.

Categories

Resources