For Theme.AppCompat, one can use android:buttonStyle and android:imageButtonStyle to style Button and ImageButton respectively for all activities. They do not seem to work for Theme.MaterialComponents. If not, what is the equivalent for Theme.MaterialComponents?
Could anyone shed some light on this?
The old theme example:
<style name="OnviferThemeStyle" parent="Theme.AppCompat">
...
<item name="android:buttonStyle">#style/fooButton</item>
<item name="buttonStyle">#style/fooButton</item>
<item name="android:imageButtonStyle">#style/fooImageButton</item>
<item name="imageButtonStyle">#style/fooImageButton</item>
</style>
With the MaterialComponents theme you can use the materialButtonStyle attribute.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="materialButtonStyle">#style/....</item>
</style>
For the ImageButton currently there isn't a Material Components. You can still use the ImageButton component and the imageButtonStyle attribute.
Related
Is it possible to style the new com.google.android.material.textfield.TextInputEditText component without setting it for each component extra?
For example:
For the new TextInputLayout I can set the style globally in the following way:
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
.
.
.
<item name="textInputStyle">#style/MyTextInputLayoutStyle</item>
</style>
I expect for the TextInputEditText a similar way for example:
<item name="editTextStyle">#style/MyTextInputEditTextStyle</item>
but it's not working.
Here is a similar post but only for the old design support components.
The TextInputLayout overrides the editTextStyle attribute using the materialThemeOverlay attribute.
For example the Widget.MaterialComponents.TextInputLayout.FilledBox has this default style:
<style name="Widget.MaterialComponents.TextInputLayout.FilledBox" parent="Base.Widget.MaterialComponents.TextInputLayout">
<item name="materialThemeOverlay">
#style/ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox
</item>
....
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
<item name="editTextStyle">#style/Widget.MaterialComponents.TextInputEditText.FilledBox</item>
</style>
To globally define you have to define a style for the TextInputLayout extending one of the material themes.
Then you have to use the new materialThemeOverlay attribute. It allows you to override app theme attributes and you can change the editTextStyle attribute.
Something like:
<style name="MyCustomOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayOutlined</item>
</style>
In this way you can change the editTextStyle (app theme attribute) only for this component style.
<style name="MyThemeOverlayOutlined">
<item name="editTextStyle">#style/MyTextInputEditText_outlinedBox</item>
</style>
<style name="MyTextInputEditText_outlinedBox" parent="#style/Widget.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
....
</style>
Finally you can assign the MyCustomOutlined to a specific TextInputLayout in the layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/MyCustomOutlined"
.../>
or assign globally in your app theme using:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
....
<item name="textInputStyle">#style/MyCustomOutlined</item>
</style>
According to this comment, editTextStyle is the correct attribute to set.
https://github.com/material-components/material-components-android/blob/6c70169e8d4ae77429a9c57785e443b2a18b4aa3/lib/java/com/google/android/material/theme/res/values/attrs.xml#L85
See example usage in these styles:
https://github.com/material-components/material-components-android/blob/6c70169e8d4ae77429a9c57785e443b2a18b4aa3/lib/java/com/google/android/material/textfield/res/values/styles.xml#L141
Updated:
Please Set #style/ThemeOverlay.MaterialComponents.TextInputEditText inside your custom TextInputLayoutStyle.
My main app theme parent is MaterialComponents theme. I changed the colors, but material components (MaterialButton, InputLayout, EditText) are not using my accent color (they are using some blue color, my declared Accent color is Teal)
What is the issue? How is the best way to deal with theming Material Components?
My main theme:
<style name="AppTheme" parent="Theme.MaterialComponents">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Edit:
Changing theme to Theme.MaterialComponents.Bridge is not solving that problem.
Maybe you should try to use colorSecondary instead of colorAccent:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Original AppCompat attributes. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorSecondary">#color/colorAccent</item>
</style>
This works for me
The issue in my case was a different styles.xml declared for the specific API. I made a mistake in it, and when testing, that other values-v21/styles.xml was applied before styles.xml.
So long story short, check if the mistake is not present in other variants. I declared that variant wrong.
For those, trying to use a theme that inherits from Theme.MaterialComponents.* please also keep in mind not to use a regular Button class but com.google.android.material.button.MaterialButton instead.
Instead of:
<Button
(...)
style="#style/Widget.MaterialComponents.Button" />
Make sure to use:
<com.google.android.material.button.MaterialButton
(...)
style="#style/Widget.MaterialComponents.Button" />
Been there. Nothing to be ashamed of. :)
Inherit your app theme from Theme.AppCompat like:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
</style>
Note that dark or light theme is upon you but you need to extend Theme.AppCompat.
Try changing your styles.xml like this :
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
If this works, let me know
Edit : Try following this link for setting up material components https://medium.com/#pedromassango/android-material-design-components-setup-google-i-o18-part-1-8894f315b5e
I am getting an error when trying to set theme for alertDialogbox. I am betting white box behind the alertdialogbox. Any idea how i can get rid of it? Here is my code for styles.xml.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowSoftInputMode">stateUnchanged|adjustPan</item>
<item name="android:alertDialogTheme">#style/alertTheme</item>
</style>
<style name="alertTheme" parent="#android:style/Theme.Holo.Light.Dialog">
</style>
In your values res folder, your alertDialogTheme should have the following property:
<!-- In API <21, this gives a funky background. Set to translucent -->
<item name="android:windowBackground">#color/translucent</item>
where #color/translucent is defined in colors.xml as #00000000, which gives opacity of 0.
In your values-v21 res folder, your alertDialogTheme should have the following property:
<!-- In API 21+, this is the dialog background color -->
<item name="android:windowBackground">#color/someColor</item>
This does nothing to alertDialogs in any API as far as I can tell:
<!--<item name="android:colorBackground">...</item>-->
I've only tested this on the Light AppCompat theme.
You do not provide any code, but in any way you should use AppCompat.
Your dialog style should inherit from AppCompat.Dialog
<style name="AlertDialog" parent="Theme.AppCompat.Light.Dialog"/>
and you should only use the AppCompat AlertDialog. Additionally you then pass in your style to the constructor.
new android.support.v7.app.AlertDialog.Builder(context, R.style.AlertDialog).show();
Without AppCompat
If you chose to try without AppCompat, be sure to test on multiple devices. You will need to provide different themes for phones before and after API 21 and handling the android:windowBackground yourself by either setting or hiding it.
Try adding to your alertTheme
<item name="android:background">#null</item>
Here goes a little bit improved answer of samGbos:
values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:alertDialogTheme">#style/SplashScreenDialog</item>
<item name="alertDialogTheme">#style/SplashScreenDialog</item>
</style>
...
<style name="SplashScreenDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">#android:color/transparent</item>
</style>
values-v21/styles.xml
...
<style name="SplashScreenDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
</style>
Is it possible to specify colorPrimary and colorAccent for individual style elments rather than in theme tag
<style name="MyCustomTabLayout" parent="android:Widget">
<item name="colorPrimaryDark">#color/gray900</item>
<item name="colorAccent">#color/gray50</item>
<item name="tabBackground">?attr/colorPrimaryDark</item>
<item name="tabSelectedTextColor">?android:colorAccent</item>
</style>
<style name="MyCustomTabLayout2" parent="android:Widget">
<item name="colorPrimaryDark">#color/gray50</item>
<item name="colorAccent">#color/gray900</item>
<item name="tabBackground">?attr/colorPrimaryDark</item>
<item name="tabSelectedTextColor">?android:colorAccent</item>
</style>
When I try doing this the default theme is applied. Is there a way/better way to do this?
Widgets look up their accent colors etc on the context theme. You can define different themes to hold your styles, and apply them to different layouts using android:theme attribute, if you use the latest appcompat suport library. See https://chris.banes.me/2014/11/12/theme-vs-style/
Citing an example there:
res/values/themes.xml
<style name="RedThemeOverlay" parent="android:ThemeOverlay.Material">
<item name="android:colorEdgeEffect">#FF0000</item>
</style>
res/layout/fragment_list.xml
<ListView
...
android:theme="RedThemeOverlay" />
I have an Activity with a dark ActionBar. I need to remove its vertical dividers since my icons already have "built-in" dividers.
What I've tried goes below
Activity style:
<style name="sMain" parent="#android:style/Theme.Holo">
<item name="android:icon">#android:color/transparent</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
MyActionBar:
<style name="MyActionBar" parent="android:Widget.Holo.ActionBar">
<item name="android:actionBarDivider">#null</item>
</style>
This doesn't have any effect. Any ideas what I'm doing wrong?
You need to set the android:actionBarStyle attribute as part of the activity theme, not as part of the action bar style.
So I believe this should work:
<style name="sMain" parent="#android:style/Theme.Holo">
<item name="android:icon">#android:color/transparent</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarDivider">#null</item>
</style>
How to tell where attributes belong? I used to struggle with this too (usually solved by trial-and-error) until I discovered the use of the android.R.styleable class! Have a look here: https://developer.android.com/reference/android/R.styleable.html
If you do a search in the page for actionBarStyle you will see it shows up as Theme_actionBarStyle, meaning it is part of the Theme style (remember there is no technical difference between a theme and a style). If you do a search on ActionBar_ you will be able to iterate through all of the attributes that can be set as part of an ActionBar style.