Styling a Spinner, appcompat, material - android

So my app theme extends from AppCompat's Material Light theme with Dark Action Bar.
I applied an accent color.
Now I am trying to use a Spinner on a dark backround and because of the theme, the spinner has a dark gray arrow which changes to accent color when pressed.
How can I make this spinner's arrow white so that it is prominent on a dark background?
Here's the image of the Spinner:

If you want to apply same spinner style app wide, then in your values/styles.xml, override spinnerStyle with your custom style, which derives from an appcompat type and override android:background:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:spinnerStyle">#style/AppSpinner</item>
</style>
<style name="AppSpinner" parent="Widget.AppCompat.Spinner">
<item name="android:background">#drawable/your_spinner_background</item>
</style>
If you need a quick way to generate a spinner background, try android-holo-colors, choose Colored Spinner and supply your accent color.

So the support library 22.1 enables use of android:theme attribute on views. That should help here.

with android:background you can specify your own background resource. I find the arrow rather useless (tapping the spinner brings dropdown menu even without arrow) so if you don't want to draw a custom arrow image, just leave the background black or transparent.

Related

Getting toolBar elevation in dark mode with material styles (PrimarySurface)

According to Material documents you could use "PrimarySurface" styles for components like toolbar and tab layout to switch their background color between color Primary and Surface in light mode and dark mode for android 10 and higher. This is my styles xml file.
<style name="AppTheme" parent="LightCustomFontStyle">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryDark</item>
<item name="colorSecondary">#color/colorAccent</item>
<item name="toolbarStyle">#style/toolbarStyle</item>
</style>
<style name="toolbarStyle" parent="Widget.MaterialComponents.Toolbar.PrimarySurface"/>
And dark mode elevation is supposed to be displayed with lighter colors but the thing is that colorSurface and colorBackground have the same value(#121212) and so in dark mode if you use these two at the same time, your toolbar won't display any elevation in relation to your activity.
It will look like this but I need it to look like the toolbar in Material docs. Also setting elevation for the toolbar doesn't work.
Is there anyway to get the elevated toolbar(lighter color) with Material and google styles or I should just set the lighter colors manually?
You can check the doc:
in a dark theme the elevation overlays are semi-transparent white (colorOnSurface) overlays that are conceptually placed on top of the surface color.
The overlay is based on the colorOnSurface defined in the app theme.
You can change this color adding in the app theme:
<item name="elevationOverlayColor">#color/...</item>

Android how to set color of a view to that of another view programmatically at runtime?

In my app you can change the theme from Light to Dark and vice versa. What this is doing setting the theme to either Theme.AppCompat.Light.DarkActionBar or Theme.AppCompat and finishing and starting the activity for the layout to load again.
I want to be able to change the color of those three purple lines dividing the settings to the same color of another view in the layout (for example the text). When I switch to dark theme, I want the lines color to change to the exact same color of the text and vice versa for when I switch to light theme. Light theme => dark lines, Dark theme => light lines. I need to be able to do this programatically to whatever the text color is because it is a different shade in different API levels. This is why setting the colors to hard coded values won't work.
You could redefine the dark and light themes for the android:divider item by adding the following line to both the theme styles.
<item name="android:divider">your_color</item>
An example of dark theme style would be:
<style name="MyDesign" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimaryDark">yourcolor</item>
<item name="colorPrimary">yourcolor</item>
<item name="colorAccent">yourcolor</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="android:textColorSecondary">#color/textColorSecondary</item>
<item name="android:divider">yourcolor</item>
<item name="android:windowBackground">#color/window_background</item>
</style>

Actionbar and colorControlHilight

I'm using Actionbar in my app and I want to change its style. Specifically I want to change the color of the ripple when touching the different components of the actionbar.
What I want is to style the action bar to have :
Texts with light colors.
Light Highlight colors for actionbar icons (white circle ripple).
Dark Highlight colors for the dropDown window of the searchView.
What I achieved so far :
I've set the colors of the text to Light colors.
I've changed the Highlight color of the actionbar icons to Light color.
But this Light Highlight color is also propagated to the dropdown window, which I don't want...
Here's the style I created for my actionbar :
<style name="AppTheme.Base.Theme4.ActionBar.Theme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:windowBackground">#color/background_material_light</item>
<item name="colorControlHighlight">#color/ripple_material_dark</item>
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="android:textColorPrimaryDisableOnly">#color/abc_primary_text_disable_only_material_dark</item>
<item name="android:textColorHint">#color/hint_foreground_material_dark</item>
<item name="colorControlNormal">#fff</item>
</style>
Is there any way to put different Highlight colors for the icons and the dropdown window ?
try to use the sherlock action bar library it will convenient to modify action bar as you want. you can download this library from given link-
http://actionbarsherlock.com/download.html

Android spinner dropdown menu background color change

I want to change a spinner's dropdown menu background color without changing the background color of the spinner itself (it's transparent). Is it possible?
Yep, it's possible. Use android:popupBackground on the Spinner in your XML or setPopupBackgroundResource(int) in code.
To change the background color of the drop-down list, add android:colorBackground parameter to the theme in your styles.xml
Code:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:colorBackground">#ff0000</item>
</style>
Thus, the overall style is preserved: the effect when pressed, rounded corners, etc.
Screenshot:
When using Material Design 3 responsible attribute is:
<item name="colorSurface">#color/foo</item>

Is it possible to make the Android options menu background non-translucent?

The options menu has a translucent background and I would like to make it solid and non-transparent. Is there a way?
Try this:
<style name="MyTheme" parent="android:Theme">
<item name="android:panelFullBackground">{your color or drawable}</item>
</style>
Also, see:
http://code.google.com/p/android/issues/detail?id=4441
How to change the background color of the options menu?
Completely overriding menu panel: Android MenuItem Toggle Button
set android:theme="myTheme", and define your own theme with whatever colours you want. Read up about Styles, and look at the android themes.xml.
Try this for android 4.0:
<style name="MyTheme" parent="#android:style/Theme.DeviceDefault">
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
</style>
<style name="MyPopupMenu" parent="#android:style/Widget.DeviceDefault.ListPopupWindow">
<item name="android:popupBackground">{your color or drawable}</item>
</style>
Also, the following site generate Action Bar Style :
http://jgilfelt.github.com/android-actionbarstylegenerator/
If you don't want to style a whole theme and just change the options menu background then set the panelFullBackground property to a DRAWABLE RESOURCE of your liking. Setting it to a color directly doesn't work so either make one coloured - 9patch, if you want to save in size -image and set it to that or make a couple and make a selector drawable with an image for each state.
I put my definition in a style that i use for all the activities in my project using:
#drawable/optionsmenu_back
optionsmenu_back being a 9patch image with a solid colour...

Categories

Resources