I need to change SwitchCompat's track color.
I've tried this, but it didn't worked for me.
This is code of my XML file
<android.support.v7.widget.SwitchCompat
android:id="#+id/sc_push"
style="#style/switchStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:theme="#style/switchStyle"
app:theme="#style/switchStyle" />
and this is my style.xml file
<style name="switchStyle">
<item name="colorControlActivated">#color/red</item>
<item name="android:colorForeground">#color/gray</item>
</style>
What seems the problem?
In addition, I can't change the activity's color or base application's color. I have to change color for this single view.
Try this code.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<!-- Active thumb color & Active track color(30% transparency) -->
<item name="colorControlActivated">#color/theme</item>
<!-- Inactive thumb color -->
<item name="colorSwitchThumbNormal">#color/grey300</item>
<!-- Inactive track color(30% transparency) -->
<item name="android:colorForeground">#color/grey600</item>
...
</style>
The better way to do it would be,
Create new resource file as below, switch_track_color.xml, using selector tag.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#15A215" android:state_checked="true"/>
<item android:color="#BAC7CB" android:state_checked="false"/>
</selector>
Use this in style for SwitchCompat.
<style name="SwitchStyle">
<item name="thumbTint">#ffffff</item>
<item name="trackTint">#color/switch_track_color</item>
</style>
Related
I am migrating from M2 to M3 and my basic materialThemeOverlay no longer works. I follow the code at the bottom of the doc closely, it matched pretty much what I had for M2:
styles.xml
<style name="SecondaryThemeOverlay" parent="">
<item name="colorPrimary">#color/md_theme_light_secondary</item>
<item name="colorOnPrimary">#color/md_theme_light_onSecondary</item>
</style>
<style name="Widget.Button.Secondary" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/SecondaryThemeOverlay</item>
</style>
layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard Button" />
<Button
style="#style/Widget.Button.Secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard Button Secondary" />
lib version is com.google.android.material:material:1.6.0-beta01, and the Activity is an AppCompatActivity.
App theme parent is Theme.Material3.DayNight.NoActionBar.
Also note that setting the backgroundTint works fine.
You should use ThemeOverlay on materialThemeOverlay like this.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Button style on both light and night mode -->
<style name="AppButtonStyle" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<!-- Button with text style on both light and night mode -->
<style name="AppButtonTextStyle" parent="Widget.Material3.Button.TextButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.TextButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<!-- Button outline style on both light and night mode -->
<style name="AppOutlinedButtonStyle" parent="Widget.Material3.Button.OutlinedButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.OutlinedButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="ThemeOverlay.App.Button" parent="ThemeOverlay.Material3.Button">
<!-- Background color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorOnPrimary">#android:color/white</item>
</style>
<style name="ThemeOverlay.App.Button.TextButton" parent="ThemeOverlay.Material3.Button.TextButton">
<!-- Background color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorOnSurface">#android:color/white</item>
</style>
<style name="ThemeOverlay.App.Button.OutlinedButton" parent="ThemeOverlay.Material3.Button">
<!-- Background color -->
<item name="colorOnSurface">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">sans-serif-medium</item>
<item name="android:fontFamily">sans-serif-medium</item>
</style>
</resources>
Use it like this in you main theme.
<item name="materialButtonStyle">#style/AppButtonStyle</item>
Unfortunately the sample in the documentation seems incorrect as always.
I'm trying to style a TextInputLayout:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">#color/text_input_layout_outlined_box_stroke</item>
</style>
And that's the color selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/green_2" android:state_focused="true" />
<item android:color="#color/green_2" android:state_hovered="true" />
<item android:color="#color/green_2" android:state_enabled="false" />
<item android:color="#color/green_2" />
</selector>
And that's my View:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:hint="#string/surname">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Why this works as expected applying to the view:
style="#style/AppTheme.TextInputLayout.OutlinedBox"
And theme is not working:
android:theme="#style/AppTheme.TextInputLayout.OutlinedBox"
I'm not getting the differences between these two...
EDIT: maybe I've found this to avoid repeating for each view:
<item name="textInputStyle">#style/AppTheme.TextInputLayout.OutlinedBox</item>
You can define a style:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">#color/text_input_layout_outlined_box_stroke</item>
</style>
and apply it to a view with:
<com.google.android.material.textfield.TextInputLayout
style="#style/AppTheme.TextInputLayout.OutlinedBox"
..>
At the same time you can define:
<style name="textInputPrimaryColor" parent="">
<item name="colorPrimary">#color/.....</item>
</style>
and then use it with the android:theme attribute:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:theme="#style/textInputPrimaryColor"
..>
In this way you can modify the theme attributes for that view and any child views, which is useful for overriding theme color palettes in a specific portion of your interface.
More info here.
In this way you are overriding the colorPrimary attribute in the style Widget.MaterialComponents.TextInputLayout.OutlinedBox.
For example it is the default selector used by the boxStrokeColor.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
Using the android:theme="#style/textInputPrimaryColor" you can are changing the colorPrimary for this view without extending the style.
You can achieve the same behavior using the materialThemeOverlay attribute in your style:
<style name="My.OutlinedBox" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/ThemeOverlay.My.OutlinedBox</item>
</style>
with:
<style name="ThemeOverlay.My.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/......</item>
</style>
and then apply it to your view:
<com.google.android.material.textfield.TextInputLayout
style="#style/My.OutlinedBox"
..>
I want all my items with style OutlinedBox to have the box green colored"? I'd like to avoid repeating theme and style for every view...I mean a "global" style that inherit from AppTheme, which is already applied to the whole application in the manifest
Currently there isn't an attribute to define a style only for the TextInputLayout with an OutlinedBox style.
You can only assign a global style for all TextInputLayout views in your app using the textInputStyle attribute in your app theme:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...
<item name="textInputStyle">#style/My.OutlinedBox</item>
</style>
Note: it requires the version 1.1.0 of the Material Components Library.
The following screenshot shows my problem:
The text selection handles have a white background and overlay other UI elements. How can I make the background transparent?
Or the better question is actually: what could I possibly have done to make the background white?
Here is the style applied to the EditText:
<style name="TextInputLayout" parent="AppTheme">
<item name="android:background">#color/grey_50</item>
<item name="colorControlNormal">#color/grey_500</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="backgroundTint">#color/grey_900</item>
<item name="colorAccent">#color/grey_900</item>
<item name="colorPrimary">#color/grey_900</item>
<item name="android:textCursorDrawable">#null</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/grey_500</item>
<item name="colorPrimaryDark">#color/grey_500</item>
<item name="colorAccent">#color/grey_700</item>
<item name="android:colorBackground">#color/grey_50</item>
<item name="android:colorForeground">#color/grey_900</item>
<item name="android:textColorPrimary">#color/grey_900</item>
<item name="android:textColorPrimaryInverse">#color/grey_50</item>
<item name="android:textColorSecondary">#color/grey_900</item>
<item name="android:textColorSecondaryInverse">#color/grey_50</item>
<item name="android:windowBackground">#color/grey_50</item>
<item name="android:textColorHint">#color/grey_700</item>
<item name="android:colorActivatedHighlight">#color/grey_900</item>
<item name="colorControlNormal">#color/grey_700</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="android:textColorHighlight">#color/grey_500</item>
<item name="android:colorControlNormal" tools:targetApi="lollipop">#color/grey_700</item>
<item name="android:colorControlActivated" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:colorControlHighlight" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:stateListAnimator" tools:targetApi="lollipop">#null</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:navigationBarColor" tools:targetApi="lollipop">#color/grey_900</item>
</style>
Edit #1
The EditText's XML (note that I see the same behaviour with EditTexts and AppCompatEditTexts):
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_home_autocomplete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin_small"
android:layout_marginTop="#dimen/activity_horizontal_margin_small"
android:layout_weight="3.5"
android:background="#null"
android:hint="#string/location"
android:padding="#dimen/activity_vertical_margin_medium"
android:theme="#style/TextInputLayout"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:hintTextAppearance="#style/TextAppearance.TextInputLayout">
<AutoCompleteTextView
android:id="#+id/user_home_autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:dropDownWidth="match_parent"
android:inputType="textAutoComplete"
android:maxLines="1"
android:paddingTop="#dimen/activity_horizontal_margin_small" />
</android.support.design.widget.TextInputLayout>
The Phone I used for the screenshot runs Android 6.0.1 with OxygenOS 3.2.7
Getting rid of all #null elements did not work.
This could happen if you set a background color in your main theme , something like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:background">#color/white</item>
...
</style>
remove this property solve this issue for me , if you want to setup a background for all your screens set windowBackground instead.
<item name="android:windowBackground">#color/white</item>
As per the android docs, the theme is applied to views used in the layouts of entire activity or application. For individual views in the layout , we need to apply styles.
Ref: https://developer.android.com/guide/topics/ui/themes.html
The theme is applied as a common style for all the views in an activity or application.
Remove this from your theme <item name="android:popupBackground">????</item>
This happens because you set the background as part of the style, and declare android:theme="#style/TextInputLayout" as theme and not as style.
This makes that the children views of that view have the same behaviour including the text selection handler.
Move this line <item name="android:background">#color/grey_50</item> out of the style.
please set the background for the view :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="YOUR_CUSTOM_COLOR" />
<item android:state_selected="true" android:color="#80000000" />
<item android:color="YOUR_CUSTOM_COLOR" />
</selector>
try this may help you
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed State -->
<item android:state_pressed="true"
android:color="#FFFFFF" />
<!-- Focused State -->
<item android:state_focused="true"
android:color="#FFFFFF" /> <!-- use background color here -->
<!-- Default State -->
<item android:color="#000000" />
</selector>
set this property as background to your edit-text
I style a theme using Android asset studio. and i set my app theme in my manifest file.
here my all layouts background color is white i want to change that into some other color. i need to mention my all layout background color in my Style.xml...
how we can do that...
<style name="Theme.Jwellers" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarItemBackground">#drawable/selectable_background</item>
<item name="android:popupMenuStyle">#style/PopupMenu.</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="android:actionDropDownStyle">#style/DropDownNav</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid</item>
<item name="android:actionModeBackground">#drawable/cab_background_top</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.</item>
<!-- Light.DarkActionBar specific -->
<item name="android:actionBarWidgetTheme">#style/Theme.mytheme.Widget</item>
</style>
If you have the color saved as a drawable just add
<item name="android:background">#drawable/drawableNameOfColor</item>
That should make the background color whatever you have assigned to the drawable drawableNameOfColor
I'm trying to get my android app a bit more stylish and have made some progress but the spinner dropdown are giving me trouble. I've got a screenshot to show you the problem:
What I want is the white box in the background to be transparent, as in the same grey overlay over the back screen as the rest of the screen outside the dropdown.
Android 4.0, API 15 if I recall correctly.
As requested here's how I do it so far. These are snippets I think are relevant but I might have missed something.
Here's the xml for spinner:
<Spinner
android:id="#+id/edit_countrySpinner"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/edit_countryArray"
android:gravity="center"
android:prompt="#string/country_prompt" />
In my values/style.xml. If I change the color of the background here the background in the dialog do change, but all the rest of the backgrounds as well. I haven't figure out how to jus change the background in the dropdown dialog.
<style name="appcin" parent="#android:style/Theme.NoTitleBar.Fullscreen">
<item name="android:spinnerStyle">#style/spinnerStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item> -->
<item name="android:background">#FFFFFF</item>
</style>
<style name="spinnerStyle">
<item name="android:background">#drawable/pink_white_dropdown</item>
<item name="android:clickable">true</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/pink_white_dropdown</item>
<item name="android:maxHeight">10dip</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#FFFFFF</item>
</style>
I've tried adding this to the app theme but none of them made any difference, the background was still white.
<...theme....>
<item name="android:dropDownListViewStyle">#style/DropDownStyle</item>
<item name="android:dropDownSpinnerStyle">#style/DropDownStyle</item>
<item name="android:dropDownSelector">#style/DropDownStyle</item>
</... theme ...>
<style name="DropDownStyle">
<item name="android:background">#FFF000</item>
<item name="android:popupBackground">#FFF000</item>
<item name="android:cacheColorHint">#FFF000</item>
</style>
In drawable/pink_white_dropdown, just showing the same image for all the cases. pink_white_arrow is a 9patch image I've made. There are lots of guides, here's one I found by 30sec on google.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_pressed="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_pressed="false"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_focused="true"
android:drawable="#drawable/pink_white_arrow"/>
<item
android:drawable="#drawable/pink_white_arrow"/>
</selector>
Somewhere in these files I figure something should be made transparent, but I don't know where.
Remove the SpinnerStyle background attribute.
Remove this:
<style name="spinnerStyle">
<item name="android:background">#drawable/whitish_rectangle</item>
</style>
which is what draws the background white rectangle.
Building on the code in your question, here is a basic example on how you can style your Spinner:
The styles.xml file sets styles for the SpinnerItem and SpinnerDropDownItem:
<resources>
<style name="customtheme" parent="#android:style/Theme.Light">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/my_rectangle</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/my_rectangle</item>
</style>
</resources>
For testing, I've created a bright-colored drawable shape, called my_rectangle.xml. Replace this with your own drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ff0000" />
<stroke
android:width="1dp"
android:color="#888888" />
</shape>
Add the Spinner to the Activity's layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dip">
<Spinner
android:id="#+id/edit_countrySpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/location_names"/>
</LinearLayout>
This produces:
with no white square in the background.
add
<item name="android:popupBackground">#null</item>
to your spinner style.
style android spinner
Spinner Widget requires two different custom layouts, one for the view to be displayed and another for the drop down list!
In this example blog on Custom Spinner Android, we will guide you how to create a custom spinner in android studio which will have:
Customized Background for Selected Item
Custom Selected Item Text Color
Text Color for Dropdown
Background for Drop down List
Spinner Animation
Link here: https://androiddvlpr.com/custom-spinner-android/
I had the same problem, and the below code worked for me:
<item name="android:popupBackground">#null</item>