Theme.MaterialComponents.Light theme from material library is broken? - android

I'm using material library on version 1.1.0.
First image are "Theme.MaterialComponents.Light" without any customization. i'm expecting light actionbar
Second image are "Theme.MaterialComponents.Light" with colorPrimary and colorPrimaryDark defined. actionbar now seams as expected but all other component are wrong
It seams that all components use colorPrimary instead of colorAccent or colorSecondary.
It appens on material library 1.0.0 and 1.1.0, but not on old AppCompat themes.
It's a bug or i missing somethings?
this is using directly #style/Theme.MaterialComponents.Light
this is using
<style name="Theme.MaterialComponents.Light.App">
<item name="colorPrimaryDark">#color/primary_dark_material_light</item>
<item name="colorPrimary">#color/primary_material_light</item>
</style>

To fix the "ipotetical bug" of material library i done an override of actionbar theme like this. it works but seams not much elegant
<style name="Theme.MaterialComponents.Light.App">
<item name="actionBarTheme">#style/Widget.MaterialComponents.Light.ActionBar.Solid.App</item>
<item name="colorPrimary">#any</item>
</style>
<style name="Widget.MaterialComponents.Light.ActionBar.Solid.App">
<item name="colorPrimary">#color/primary_material_light</item>
</style>

Related

Android appCompat themes vs Base themes

Wha's the difference between the Android Theme.AppCompat and Base.Theme.AppCompat?
When should we use the Base theme?
<style name="flatButton" parent="Base.Widget.AppCompat.Button.Borderless">
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="flatButton2" parent="Widget.AppCompat.Button.Borderless">
<item name="colorAccent">#color/colorAccent</item>
</style>
You shouldn't use the Base theme at all - always use the standard themes. The Base themes are used internally to AppCompat and serve as a common base that applies to all API levels - it does not include the API level specific changes that are needed to properly function (something only the standard themes supply).

Define default button Style for a theme

I'm trying to apply default button style for theme. The theme is correctly applied to my app in the Manifest. In my gradle dependencies, I have design support library version 22.2.1 (this library has appcompat library as a dependency, so I guess I'm using the same version of the appcompat support library?)
When I define my theme like this, the button styles are applied correctly in the layout preview, but now when I launch the app:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/Widget.Button</item>
</style>
When I define my theme like this, the button styles are applied correctly when app is launched, but not in the layout preview:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="buttonStyle">#style/Widget.Button</item>
</style>
Problem: I want this to work in both layout preview and in runtime, is there a way to achieve this?
Is this a bad solution?
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="buttonStyle">#style/Widget.Button</item>
<item name="android:buttonStyle">#style/Widget.Button</item>
</style>
Colored Button Style With AppCompat +22
in your styles.xml
<style name="Button.Tinted" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">YOUR_TINT_COLOR</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="android:textColor">#android:color/white</item>
</style>
in your layout.xml
<Button
android:id="#+id/but_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/but_continue"
android:theme="#style/Button.Tinted" />
important use android:theme
https://gist.github.com/ingyesid/e513f47b573607205195

How to style Android's AppBar action text?

I need to change text size of action buttons in AppBar/Toolbar. It should be 14sp, but I'll use 20sp in this example, because it is more evident. I am using appcompat-v7 22.1.1
At first I tried to use theme attribute android:actionButtonStyle:
<style name="FirstAttemptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionButtonStyle">#style/Custom.Widget.AppCompat.Light.ActionButton</item>
</style>
<style name="Custom.Widget.AppCompat.Light.ActionButton" parent="Widget.AppCompat.Light.ActionButton">
<item name="android:textSize">20sp</item>
</style>
Then I ran application on the Lollipop and the result was as needed:
But then I used an emulator with lower version and my theming had no effect:
I digged a little deeper and discovered that abc_action_menu_item_layout.xml is used for action menu items and it has a line android:textAppearance="?attr/actionMenuTextAppearance"
So I tried to modify this theme attribute (I also had to add textStyle:bold):
<style name="SecondAttemptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionMenuTextAppearance">#style/Custom.TextAppearance.AppCompat.Widget.ActionBar.Menu</item>
</style>
<style name="Custom.TextAppearance.AppCompat.Widget.ActionBar.Menu" parent="TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
As in the first time, the result was as needed on Lollipop and no effect on any version below.
So, the question is: how to properly change text size for action menu item?
PS: I created a simple project on github to demostrate my issue
It appears that actionButtonStyle and actionMenuTextAppearance should be used without android: namespace.
As it can be seen in values-v21/values.xml of support library, Lollipop uses attribute from system theme (note the android: prefix), that's why my attempts worked with it:
<style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light">
...
<item name="actionButtonStyle">?android:attr/actionButtonStyle</item>
...
</style>

How to Customize AppCompat Material Button Style?

I am using the AppCompat theme and I want set the minHeight attribute on my buttons:
<style name="Theme.MyTheme" parent="Theme.AppCompat">
<item name="android:buttonStyle">#style/MyButtonStyle</item>
</style>
<style name="MyButtonStyle" parent="...?">
<item name="android:minHeight">60dp</item>
</style>
However, there is no Widget.AppCompat.Button style to set as the parent for MyButtonStyle. If I use android:Widget.Button, then all my buttons look like the old crappy style. I tried various other AppCompat themes like TextAppearance.AppCompat.Button, but they do not work.
Leaving out a parent theme for the button style also causes the button not to be styled correctly.
How can I customize the default Theme.AppCompat buttonStyle?
You can have Base.MyButtonStyle extend android:Widget.Holo.Button on API 14+ (in res/values-v14/styles.xml) and android:Widget.Material.Button on API 21+ (in res/values-v21/styles.xml. This style will change according to the device system version. Put your platform specific modifications here.
Then have MyButtonStyle extend Base.MyButtonStyle and define the android:minHeight here (in res/values/styles.xml). This will apply to all platforms.
You buttons then can use style MyButtonStyle.
This example assumes your minimum SDK is 14.
And yes, there's no appcompat-v7 button style (well, at least not yet).
EDIT
This assumes you're OK with Holo button on platforms older than Lollipop. It feels unobtrusive and if you can do without ripples, it should be just fine. If you want ripples I suggest you google for a third party lollipop button library.
To answer my own question, it appears AppCompat does not in fact support the Button widget presently:
AppCompat provides similar behaviour on earlier versions of Android
for a subset of UI widgets:
Everything provided by AppCompat’s toolbar (action modes, etc)
EditText
Spinner
CheckBox
RadioButton
Switch (use the new android.support.v7.widget.SwitchCompat)
CheckedTextView
The only workaround I see would be to recreate the Material button style from the Android source code, a task which extends outside the scope of my desire.
Custom Button Style With AppCompat +22
in your styles.xml
<style name="Button.Tinted" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">YOUR_TINT_COLOR</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="android:textColor">#android:color/white</item> </style>
in your layout.xml
<Button
android:id="#+id/but_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/but_continue"
android:theme="#style/Button.Tinted" />
With new MaterialComponent it is convenient to use com.google.android.material.button.MaterialButton instead of regular Button.
But to style it, there is used the different attribute in the theme
- materialButtonStyle, with this parent theme Theme.MaterialComponents.DayNight.NoActionBar.
Then the theme should look like this:
<style name="NewAppTheme"
parent="Theme.MaterialComponents.DayNight.NoActionBar">
.......
<-- IMPORTANT if you are using com.google.android.material.button.MaterialButton to style them use this parameter
<item name="materialButtonStyle">#style/ButtonStyle</item>
</style>
And in ButtonStyle you can change button attributes like this:
<style name="ButtonStyle" parent="Widget.MaterialComponents.Button.UnelevatedButton">
<item name="android:minHeight">60dp</item>
</style>
Remove the android:
<style name="Theme.MyTheme" parent="Theme.AppCompat">
<item name="buttonStyle">#style/MyButtonStyle</item>
</style>
https://stackoverflow.com/a/32363833

How can I have a drop shadow on my ActionBar (ActionBarSherlock)?

I am including my styled xml layout:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Styled" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyApp.ActionBar</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
<item name="titleTextStyle">#style/Widget.MyApp.TitleTextStyle</item>
<item name="background">#color/red</item>
<item name="android:background">#color/red</item>
<item name="windowContentOverlay">#null</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="Widget.MyApp.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">21sp</item>
</style>
</resources>
Some of the search over internet suggests that use windowContentOverlay set to #null. But when i use it in the style xml it doesn't change anything. Can any one help what to do?
If you want to create a shadow below the ActionBar you have to set android:windowContentOverlay parameter on the application theme (in your code you are incorrectly setting it on the ActionBar style).
In your example it would be:
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="android:windowContentOverlay">#drawable/my_actionbar_shadow</item>
</style>
Using #null value removes the shadow.
This one line sets the shadow on ActionBar on Android 3.0 and newer. However if you are using ActionBarSherlock, it will not work as you expect. It would create the shadow on top of the window over the ActionBarSherlock on Android devices running system older than Android 4.0 (although ActionBar is present in the api since Android 3.0, ActionBarSherlock uses custom implementation for all Android versions older than Android 4.0).
To create the shadow below ActionBarSherlock you have to set windowContentOverlay parameter on the application theme (notice the missing android:).
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="windowContentOverlay">#drawable/my_actionbar_shadow</item>
</style>
Again, using #null removes the shadow.
Although this line works for ActionBarSherlock, it doesn't work on android devices running Android 4.0 and newer, no shadow is created under the ActionBar on such devices. So how to combine these two parameters to get the desired shadow under both ActionBar and ActionBarSherlock?
Use resource configuration qualifiers, in your case use platform version qualifiers.
In res/values/styles.xml use the second xml code. And in res/values-v14/styles.xml use the first xml code. Therefore the ActionBarSherlock version is used by default (for versions pre Android 4.0) and ActionBar version is used for Android 4.0 and newer.
Edit:
There is a bug in Android 4.3 (API level 18), android:windowContentOverlay does not work. It should be fixed in future release. In case you need it fixed in Android 4.3, you can find workarounds linked in the bug report.
As a previous answer did say use "windowContentOverlay" in the application theme and NOT the action bar style.
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="windowContentOverlay">#drawable/my_actionbar_shadow</item>
</style>
If you want a realistic shadow you can find one in the
"Your Android Folder"/platforms/android-16/data/res/drawable-hdpi/
ab_solid_shadow_holo.9.png and copy it to your drawable-hdpi folder then the end result is
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="windowContentOverlay">#drawable/ab_solid_shadow_holo</item>
</style>
In addition, above API21(Lollipop), you will need this in code, too.
getSupportActionBar().setElevation(0);

Categories

Resources