I'm looking to have the same design for Pre-Lollipop devices.
In my application I'm using a switch button which is looking like this on Lollipop devices :
and on Pre-Lollipop devices. it's looking like this :
So how can I do that I have two styles folders :
my Styles xml looks like :
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#color/colorPrimaryDark</item>
</style>
<style name="MyMaterialTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="MyMaterialTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
You could use the SwitchCompat class instead of Switch to provide backwards compatibility.
For switch you need to use the new android.support.v7.widget.SwitchCompat
More info here
Related
I'm trying to set a custom colour for my buttons in Android application but value set for accentColor is always used as button background colour. I am trying to set a global colour for all buttons without having to specify styles or theme for each button individually.
Can you explain please how styling works in Android? I understand the basics, but overriding existing themes is never working for me :(
styles.xml
<resources>
<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>
<item name="android:titleTextColor">#ffffff</item>
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.Button" >
<item name="android:backgroundTint">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Short answer: Try going to the source code of how the
Theme.MaterialComponents.Light.NoActionBar is defining the style for
the buttons and override those attributes.
Android styling works by merging all the defined attributes in a theme. For example, you have an AppTheme that includes theming for every built-in view. If you create a new theme for your button and your define just a couple of attributes, what android studio does is to merge all the attributes defined in the AppTheme with your new attributes. So if you want to override the buttons, you need to go deep and find out what are exactly the attributes defined in the general AppTheme you set in your application, they may not be the same.
For example, this is how I changed the color of all the buttons in my app since they were using a global attribute for it:
In the general styles.xml file, I put:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">?myCustomColor</item>
...
</style>
But if I wanted to change the backgroundTint attribute of my buttons, I had to do this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">?myCustomColor</item>
<item name="android:buttonStyle">#style/AppButtonStyle</item>
...
</style>
<style name="AppButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:backgroundTint">?attr/colorAccent</item>
</style>
Also, check out this cool Medium post for another developer experience in this topic.
I managed to solve the issue. The main point to notice here is that I am using Theme.MaterialComponents and not AppCompact.
I have defined a new style and I set it to buttonStyle, which refers to style for AppCompact button. In order to set a style for the material button, I had to use "materialButtonStyle" instead of "buttonStyle".
All relevant properties that can be overridden for MaterialComponents can be found in material design documentation: https://www.material.io/develop/android/components/material-button/
So the final code looks like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorSecondary">#color/colorAccent</item>
<item name="floatingActionButtonStyle">#style/AppTheme.Test</item>
<item name="materialButtonStyle">#style/AppTheme.Button</item>
<!--<item name="buttonStyle">#style/Widget.MaterialComponents.Button.Icon</item>-->
</style>
<style name="AppTheme.Button" parent="#style/Widget.MaterialComponents.Button">
<item name="android:backgroundTint">#D400EB</item>
</style>
<style name="AppTheme.Test" parent="#style/Widget.MaterialComponents.FloatingActionButton">
<item name="backgroundTint">#A305B1</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
</resources>
I am encountering a very strange error in my application. It shows the text of a button, but not the button itself. Here is a screenshot:
I then checked the Theme Editor to see what might happen, and what I get in there looks like this:
The editor seems to be unable to render Material design correctly, no matter if it is dark or light. When I switch it to Holo for example, everything works fine.
My AndroidStudio is up to date, I have no idea what is going on, but I will provide my styles.xml files here as well:
v21\styles.xml
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="preferenceTheme">#style/PreferenceThemeOverlay.v14.Material</item>
<item name="preferenceStyle">#style/PreferenceThemeOverlay.v14.Material</item>
</style>
<style name="MyActionBarTheme" parent="android:Widget.Material.Light.ActionBar">
<item name="android:background">#color/colorAccent</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Material.Widget.ActionBar.Title">
<item name="android:textColor">#color/colorPrimary</item>
</style>
<style name="AppTheme" parent="android:Theme.Material.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorBackground">#color/background_material_light</item>
<item name="android:colorPrimary">#color/primary_material_light</item>
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
<item name="preferenceTheme">#style/PreferenceThemeOverlay.v14.Material</item>
<item name="preferenceStyle">#style/PreferenceThemeOverlay.v14.Material</item>
</style>
</resources>
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorBackground">#color/background_material_light</item>
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
<item name="preferenceTheme">#style/PreferenceThemeOverlay.v14.Material</item>
<item name="preferenceStyle">#style/PreferenceThemeOverlay.v14.Material</item>
</style>
<style name="MyActionBarTheme" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/colorAccent</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorPrimary</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="preferenceTheme">#style/PreferenceThemeOverlay.v14.Material</item>
<item name="preferenceStyle">#style/PreferenceThemeOverlay.v14.Material</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Ok, I finally found out what was causing the error: My main activity was extending AppCompatActivity (This was generated by Android Studio in an earlier stage). When I changed this to extend FragmentActivity, everything worked like a charm.
This solution solved both the button as well as the theme editor problem. I do not know why theme editor would not show the custom material design when my main application does not extend the correct class, but this small piece of code changed fixed all my issues.
I'm using Android Studio 1.5.1, and my material design is giving render errors. Here's the styles.xml page, without material edits:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
And here's this code with Material edits.
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Material.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
For some reason, it gives out
"NOTE: One or more layouts are missing the layout_width or
layout_height attributes. These are required in most layouts." etc. in
the preview. Running on my Nexus 6P also gives the same problem. I'm
using Android 6.0.1. It also fails to find "toolbarStyle". I'm a
beginner, so can anyone help with this?
EDIT: My "automatically add missing attributes" link is not working.
There is some misunderstanding between concepts, if you use Theme.AppCompat.Light.DarkActionBar you already are using Material Design.
From How to set up your Android app project to use Material Design with AppCompat
AppCompat v21.+’s Theme.AppCompat extends Theme.Base.AppCompat which
extends Theme.Platform.AppCompat which extends android:Theme.Material
on 21+ devices (i.e. Android 5.0 Lollipop) so you only need to extend
Theme.AppCompat to use Material theme if you are using the AppCompat
v21 (or above) library.
Hope this helps!
Note: I'm rather new to Android development, so bear with me...
I recently created a new project in Android Studio using the Navigation Drawer activity layout. Everything runs correctly, however I would like to remove the shadow that's above the action bar.
I've tried applying this solution, but it didn't seem to solve my issue.
Here are my styles.xml files:
v21/styles.xml
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Any help would be greatly appreciated!
Thank you.
For some reason, this did not work for as well:
<item name="android:elevation">0dp</item>
and:
<item name="android:windowContentOverlay">#null</item>
I am currently using, for ActionBar:
this.getSupportActionBar().setElevation(0);
In Android 5.0 device, you can see the highlight color overlaps the normal color.
In Android 4.4.4(the normal case),
My EditText:
<EditText android:layout_width="320dp"
android:layout_height="wrap_content"
android:id="#+id/account"
android:padding="16dp"
android:singleLine="true"
android:imeOptions="actionNext"/>
Style:
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorControlNormal">#color/colorPrimary</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowActionModeOverlay">true</item>
</style>
v21 Style
<style name="AppTheme" parent="AppTheme.Base">
</style>
I don't know why this happened.
The code works great at another app.
But I could not find any difference between two apps.
Does anyone know about this ?
Thanks!
[UPDATE]
Sorry, also happen to the other projects with the same code.
OK,
I report the issue and got reply from Google.
The EditText drawables were updated in 5.1 (which is what 4.4 and below are using).
Since the visual change is small it's not worth updating these for 5.0.x.
Thanks for the report though.
add this for your styles.xml(v19) and styles(v22) :
#color/colorHighlight
You can do like this :
in the styles.xml :
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
and for styles.xml(v19) :
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowTranslucentStatus">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorHighlight</item>
and for styles.xml(v22) :
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorAccent">#color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:colorControlHighlight">#color/colorHighlight</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowTransitionBackgroundFadeDuration">5000</item>
</style>