Per https://material.io/develop/android/theming/typography/, I’ve been customizing my app’s style by modifying the textAppearanceX attributes. Does anyone know which attribute to customize to style an app’s Snackbars or where this is documented?
Thank you.
With the Material Components Library you can customize the textAppearance used by the text and the button through the app theme:
Just use the snackbarButtonStyle and snackbarTextViewStyle attributes to define globally in the app:
<style name="AppTheme" parent="Theme.MaterialComponents.*">
<!-- Style to use for action button within a Snackbar in this theme. -->
<item name="snackbarButtonStyle">#style/Custom.TextButton.Snackbar</item>
<!-- Style to use for message text within a Snackbar in this theme. -->
<item name="snackbarTextViewStyle">#style/Custom.Snackbar.TextView</item>
....
</style>
Then for the button you can define a custom style applying the android:textAppearance attribute
<style name="Custom.TextButton.Snackbar" parent="#style/Widget.MaterialComponents.Button.TextButton.Snackbar">
<item name="android:textAppearance">#style/snackbar_button_textappearance</item>
</style>
It is just an example:
<style name="snackbar_button_textappearance" parent="#style/TextAppearance.MaterialComponents.Button">
<item name="android:textStyle">italic</item>
</style>
For the text you can do something similar with:
<style name="Custom.Snackbar.TextView" parent="#style/Widget.MaterialComponents.Snackbar.TextView">
<item name="android:textAppearance">......</item>
</style>
Pls note:
snackbarButtonStyle attribute requires the version 1.1.0
snackbarTextViewStyle attribute requires the version 1.2.0.
Related
I would like to change the action bar size. I have tried the following coding.
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<!-- <item name="android:background">#drawable/action_bar_style</item> -->
<item name="android:actionBarSize">15dp</item>
<item name="android:background">#drawable/header_bar</item>
</style>
But the action bar size didn't change. Is there another way? I am using api level 11.
Thanks.
Use height attribute, actionBarSize if for something else.
<item name="android:height">#dimen/bar_height</item>
Explanantion:
From source code of ActionBar:
mContentHeight = a.getLayoutDimension(R.styleable.ActionBar_height, 0);
We can see that R.styleable.ActionBar_height is being used for height. Stylable property names are generated as component_attribute (If you have ever used a custom stylable view, you'd have notice this). Hence, Actionbar is the name of component and height is the name of the attribute to use. Since this is a system attribute, hence defined under android namespace.
Update Dec-2014:
AppCompat library is now provided to extend support for latest ActionBar (or Toolbar) and theme support to old android versions. Below is an example of such an application theme /res/values/styles.xml:
<resources>
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<!-- native widgets will now be "tinted" with accent color -->
<item name="colorAccent">#color/accent</item>
<!--Action bar style-->
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="android:height">#dimen/bar_height</item>
<item name="height">#dimen/bar_height</item>
</style>
<style name="AppTheme.ActionBar.TitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">#dimen/bar_text_size</item>
<item name="android:textColor">#color/bar_text_color</item>
</style>
</resources>
This style can now be set as app theme by using android:theme="#style/AppTheme" in <application> tag of the AndroidManifest.xml.
Note the use of duplicate entries
<item name="android:actionBarStyle">
<item name="actionBarStyle">
The ones without android namespace are there for supporting both compatibility library and native attributes.Some of these attributes didn't exist under android namespace on older versions and belong to support library.
In some other places, you'll need to use app namespace (xmlns:app="http://schemas.android.com/apk/res-auto"), for example app:showAsAction="always" in menu xml files.
Update Apr 2015
AppCompat Library v22 is also available. Read through the article to know what's new.
Simply put actionBarSize item under MyTheme style, like this:
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarSize">15dp</item>
<item name="actionBarSize">15dp</item>
...
</style>
Explanation:
In R.styleable we see that R.styleable.Theme_actionBarSize is a styleable attribute defined at Theme level.
Also, from source code res/values/styles.xml we see how actionBarSize is used to set height:
<style name="Widget.ActionBar">
...
<item name="android:height">?android:attr/actionBarSize</item>
Add this to the custom theme style XML that you are referencing from your manifest file:
<item name="android:windowTitleSize">58dip</item>
For instance if your manifest file looks something like this:
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
**android:theme="#style/AppTheme"** >
Your theme style should be -at least- like this:
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowTitleSize">54dip</item>
</style>
S.D.'s solution does not work for me.
I used AppCompat v-21 library in my case.
And I just add
android:layout_height="#dimen/actionBarSize"
android:minHeight="#dimen/actionBarSize"
to my layout file and it works.
Make sure to add S.D.'s code to styles.xml and then add
android:theme="#style/thin_ab"
to the <application> element in the main manifest. (I'm a noob and it took me about 2 hours to find that out.)
I want to customize a Material chip.
I would think this is how to do it:
<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
.... lots more theme stuff here
<item name="chipStyle">#style/MaterialChips</item>
<item name="chipGroupStyle">#style/MaterialChips</item>
<item name="chipStandaloneStyle">#style/MaterialChips</item>
</style>
<style name="MaterialChips" parent="Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/chips</item>
</style>
None of the tags like chipStyle affect the chips. But if I set app:chipBackgroundColor="#color/chips" in xml it works.
It also works fine like this for other things like say <item name="materialAlertDialogTheme">#style/AlertDialogTheme</item>.
The material documentation (if you can call it that) is really not helping.
Your app theme is correct.
The default style used by Chip component is defined in the app theme by the chipStyle attribute.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<!-- Default style for chip component -->
<item name="chipStyle">#style/Widget.MaterialComponents.Chip.Action</item>
</style>
You can customize this style using for example:
<style name="AppTheme" parent="Theme.MaterialComponents.*">
<!-- Default value for chipStyle -->
<item name="chipStyle">#style/MaterialChips</item>
</style>
<style name="MaterialChips" parent="#style/Widget.MaterialComponents.Chip.Choice">
<!-- ... -->
<item name="chipBackgroundColor">#color/chips</item>
</style>
If you specify the style attribute in your layout, this style overrides the default value.
<com.google.android.material.chip.Chip
style="#style/Widget.MaterialComponents.Chip.Entry"
.../>
In this case the Chip uses the Widget.MaterialComponents.Chip.Entry style.
if you define chip style in layout xml, chip override your theme.
It may work if you clear chip style in layout xml.
I want to simply apply styling to all buttons on a theme level like this
<style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
...
<item name="buttonStyle">#style/DefaultButton</item>
</style>
<style name="DefaultButton" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">#color/whatever</item>
</style>
<Button
android:id="#+id/addChannelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_margin="16dp"
android:text="Add room" />
Why doesnt this work? It would in appcompat
// If I use Theme.MaterialComponents.Light.NoActionBar.Bridge, then it works
You should be setting materialButtonStyle instead of buttonStyle in your theme.
Use a Theme.MaterialComponents theme defining the materialButtonStyle attribute.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
....
<item name="materialButtonStyle">#style/MyButtonTheme</item>
</style>
In this way you can customize the theme of all the buttons in your app.
Also starting from version 1.1.0 of the material library you can override the theme attributes from the default style using the materialThemeOverlay attribute.
Something like:
<style name="MyButtonTheme" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/ButtonStyleTextColor</item>
</style>
<style name="ButtonStyleTextColor">
<!-- For filled buttons, your theme's colorPrimary provides the default background color of the component, and -->
<!--the text color is colorOnPrimary -->
<item name="colorOnPrimary">#color/my_color</item>
</style>
Currently it requires version 1.1.0 of material components for android library.
Can you try with v1.0.0-alpha06? There has been some progress since v1.0.0 which may have addressed what you're seeing.
1.1.0-alpha02
Shape Theming: FloatingActionButton, MaterialButton, Chip, MaterialCardView, BottomSheet, & TextInputLayout updated to use the new Material shape system
1.1.0-alpha06
Implement Shapeable interface in MaterialButton
Source: https://github.com/material-components/material-components-android/releases
Use materialButtonStyle and use MaterialButton instead of Button
How to style textviews, edittexts throughout app when theme is extending from Theme.AppCompat.Light.DarkActionBar?
This is not working,
<style name="myTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:textViewStyle">#style/myTextViewStyle</item>
<item name="textViewStyle">#style/myTextViewStyle</item>
</style>
<style name="myTextViewStyle" parent="android:Widget.TextView">
<item name="android:layout_marginLeft">5dp</item>
<item name="android:layout_marginRight">5dp</item>
<item name="android:layout_marginTop">5dp</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:textColor">#android:color/black</item>
</style>
<!-- Maintain *theme* naming convention Theme.ThemeName. It helps with organization. -->
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textViewStyle">#style/Widget.MyApp.TextView</item>
<!-- AppCompat does not provide its own variant of textViewStyle attribute. -->
<item name="editTextStyle">#style/Widget.MyApp.EditText</item>
</style>
<!-- Maintain *style* naming convention Widget.ThemeName.WidgetName. -->
<!-- TextView is a simple widget, use the parent provided by platform. -->
<style name="Widget.MyApp.TextView" parent="android:Widget.TextView">
<!-- ... -->
</style>
<!-- EditText parent is provided by AppCompat. -->
<style name="Widget.MyApp.EditText" parent="Widget.AppCompat.EditText">
<!-- ... -->
</style>
As long as your app or activity has android:theme="#style/Theme.MyApp defined in manifest it will work.
Couple of notes:
If you want to provide a default style for another widget try it like so:
Override widgetNameStyle in your theme.
If the attribute doesn't exist, prefix it with android:.
If that doesn't work then it's a custom widget and that's beyond the scope of this post.
Don't override both android:-prefixed and unprefixed variants if they exist! Only one works.
Unprefixed attribute is from AppCompat, use AppCompat style as parent.
Prefixed attribute is from Android SDK, use platform style as parent (TextView and ProgressBar).
Don't mix themes and styles. Themes are context-wide applied to whole hierarchies of views (android:theme atribute). Styles are for widgets (style attribute).
I'm new to android development. And i'm confusing about the cascading mechanism of android style. If i want to set the textColor of a actionBar. I need to do it like this.
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
<!-- API 14 theme customizations can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/border</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#eee</item>
</style>
this works fine!! but what i'm confusing is why the following doesn't work?
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
<!-- API 14 theme customizations can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:textColor">#eee</item>
</style>
Styles in Android are not inherited a from wrapping/outer view (ViewGroup) to the wrapped/inner views, like in HTML. So, setting the android:textColor of AppBaseTheme doesn't affect the style of title text of action bar.
The style definition states that:
When using AppBaseTheme as the style (in this case, as the theme of the activity, or all activities of the application), use MyActionBar as actionBarStyle
When using MyActionBar as the style (in this case, as the style of the action bar), use MyTheme.ActionBar.TitleTextStyle as titleTextStyle
When using MyTheme.ActionBar.TitleTextStyle as the style (in this case, as the style of the title text), use #eee as the textColor.
As you said, "When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports." However, the parent style (TextAppearance.Holo.Widget.ActionBar.Title) defines the different android:textColor, so it doesn't comply one which is defined in the theme.