I'm using the AppCompat lib v22.1 to give some material design to multiple android versions. If I use the new widget tinting feature, it does not show up in Kitkat even with AppCompat.
in layout:
<Button
android:id="#+id/mybtn"
android:text="Test"
android:theme="#style/MyTheme.BlueButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
in theme xml:
<style name="MyTheme.BlueButton">
<item name="colorButtonNormal">#color/blue</item>
</style>
Is this something I'm doing wrong or a bug in AppCompat?
I was able to achieve desired results on Kitkat and Lollipop by using the following setup:
build.gradle (partial)
dependencies {
compile 'com.android.support:appcompat-v7:22.1.1'
}
values/styles.xml
<resources>
<style name="Theme.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
</style>
<style name="ThemeOverlay.AppTheme.Blue" parent="ThemeOverlay.AppCompat.Dark">
<!-- ThemeOverlay themes define only some attributes, those which make
backgrounds dark and highlights and texts light for ThemeOverlay.AppCompat.Dark
or the other way around for .Light. The rest is taken from the activity theme.
You only customize what you need - here the button color. -->
<item name="colorButtonNormal">#color/blue_500</item>
</style>
<style name="ThemeOverlay.AppTheme.Yellow" parent="ThemeOverlay.AppCompat.Light">
<!-- This worked correctly even with parent="Theme.AppTheme". -->
<item name="colorButtonNormal">#color/yellow_500</item>
</style>
</resources>
layout/activity_main.xml (partial)
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:theme="#style/ThemeOverlay.AppTheme.Blue"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:theme="#style/ThemeOverlay.AppTheme.Yellow"/>
EDIT: (oh yeah I forgot) MainActivity.java
public class MainActivity extends AppCompatActivity { ... }
Result
I found out why the original code didn't work when I thought it should. I was using FragmentActivity from support v4 lib, which doesn't seem to have the new v7 AppCompat features for themes built in. Changing my activity to AppCompatActivity makes the theming work with no changes from what I had.
A More technical explanation here: https://stackoverflow.com/a/29978777/3517023
Related
I am trying to get some buttons to be use the Material Design style (in particular accentColor tinting) for Android 4.4 devices using the AppCompat library. I have had success with the following:
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/continue_button"
android:id="#+id/continue_button"
android:layout_gravity="center_horizontal|bottom"
style="#style/CompatButton"
android:theme="#style/ThemeOverlay.AppCompat.Dark"/>
where "#style/CompatButton" has "Widget.AppCompat.Button.Colored" for a parent. However some of my buttons are the same but instead of declaring the style in the element, I attach the style as the default "buttonStyle" in the theme being used:
<style name="AppTheme">
...
<item name="android:buttonStyle">#style/CompatButton</item>
<item name="colorAccent">#color/flow_accent</item>
...
</style>
and
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/continue_button"
android:id="#+id/continue_button"
android:layout_gravity="center_horizontal|bottom"
android:theme="#style/ThemeOverlay.AppCompat.Dark"/>
These buttons are showing up with the default, non-Material stylings. This also seems to happen with ProgressBar. Can anyone see what's wrong with this and if there's a workaround without having to explicitly define the button style?
Oops, that was dumb. Obviously ThemeOverlay wipes out the previous theme, including the buttonStyle definition. For it to work we have to add the buttonStyle back in:
<style name="FlowOverlay" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:buttonStyle">#style/CompatButton</item>
</style>
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/continue_button"
android:id="#+id/continue_button"
android:layout_gravity="center_horizontal|bottom"
android:theme="#style/FlowOverlay"/>
though that loses much of the convenience we wanted from default button styles in the first place.
I've got problems to have a good background from an AppCompatImageButton, just to try I'm comparing this two layouts:
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/imageButtonI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/icolor"
android:tint="#color/accent"
app:srcCompat="#drawable/magnify"/>
<ImageButton
android:id="#+id/imageButtonS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/scolor"
android:tint="#color/accent"
android:src="#drawable/magnify"/>
and the style file:
<style name="AppBaseTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primaryDark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
As you can see from this image however, the background of ImageButton is "normal" while there isn't any background in the appcompat one. How can I have the "normal" background using AppCompatImageButton?
A good way to style the Button is to use the style #style/Widget.AppCompat.Button.Colored.
The Widget.AppCompat.Button.Colored style extends the Widget.AppCompat.Button style and applies automatically the accent color you selected in your app theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
/>
To customize the background color without changing the accent color in your main theme you can create a custom theme for your Button using the android:theme attribute and extending the ThemeOverlay theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/MyButtonTheme"/>
defining the following theme:
<!-- res/values/themes.xml -->
<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#color/my_color</item>
</style>
I am not sure which version of support library are you using, but before there was bug in the library which is reported here,
https://code.google.com/p/android/issues/detail?id=78428
But they have resolved it in the latest update,
Yes, it appears to work now with the introduction of
android.support.v7.widget.AppCompatButton in AppCompat v22.1.0, color
can be controlled at overall theme level with "colorButtonNormal".
http://android-developers.blogspot.com/2015/04/android-support-library-221.html
http://chris.banes.me/2015/04/22/support-libraries-v22-1-0/
for theme
<item name="colorButtonNormal">#color/button_color</item>
for version 21
<item name="android:colorButtonNormal">#color/button_color</item>
Hope this will help you.
Thanks
I'm Software Engineering student that just started learning android development a couple months ago during my spare time.
at the moment im making my first app while learning in the process and i ran into a problem.
I'm using a DialogFragment and for some reason the Accent color i use in my theme is overridden only in pre-lollipop devices (both emulator and physical).
you can notice that only the floating hint is tinted in lollipop.
my DialogFragment layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog_add_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="#string/dialog_add_title_hint"
android:imeOptions="actionNext"
android:inputType="text"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_password_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="#string/dialog_add_password_hint"
android:imeOptions="actionGo"
android:inputType="text"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/input_cancel"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/input_confirm"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>
my values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorHighlight</item>
<!-- Context Action Mode will Overlay Toolbar -->
<item name="windowActionModeOverlay">true</item>
</style>
i already tried several solutions to no avail:
overriding colorControlActivated and colorControlNormal - only changes floating hint tint
changing the tint programmatically, but that only changes the underline while not focused:
Drawable background = InputTextLayout.getEditText().getBackground();
DrawableCompat.setTint(background, yourColor);
InputTextLayout.getEditText().setBackground(background);
using EditText alone, not wrapped in TextInputLayout, doesn't help either.
any ideas?
Thanks in Advance
after a thorough search through the internet i stumbled upon a question here in stackoverflow regarding animating a DialogFragment - here
the answer in that link referred to a post by a Google Engineer saying:
...DialogFragment is just a wrapper around a Dialog to help manage its lifecycle. Dialogs are top-level windows so their animations are window animations, just like when you use Dialog in all other situations. You thus control the animations of dialogs through the theme or explicit window animation style you have set in its WindowManager.LayoutParams.
so i decided to check how to theme the DialogFragment
& found this guide by CodePath - here
basically, in your App Theme, in order to override the Dialog Themes you have to add the following:
<style name="AppTheme" parent...>
....
<!-- this will override DialogFragment theme -->
<item name="android:dialogTheme">#style/MyDialogFragmentTheme</item>
<!-- this will override AlertDialog theme -->
<item name="android:alertDialogTheme">#style/MyAlertDialogTheme</item>
</style>
<style name="CustomAlertDialogTheme.Animation">
...
</style>
<style name="MyDialogFragmentTheme" parent="Theme.AppCompat.Light.Dialog">
...
</style>
in each of the theme you can override attributes like colorPrimary, colorAccent etc.
if using this method makes your DialogFragment appear without a title (it happend to me), then add the following to its style:
<item name="android:windowNoTitle">false</item>
Bonus - adding animations
in order to add animations to either the AlertDialog or DialogFragment, write the following in its style:
<style name="MyDialogFragmentTheme" parent="Theme.AppCompat.Light.Dialog">
...
<item name="android:windowAnimationStyle">#style/MyDialogFragmentTheme.Animation</item>
</style>
then you need to create a style for the animation, for example:
<style name="MyDialogFragmentTheme.Animation">
<item name="android:windowEnterAnimation">#anim/dialog_slide_in_up</item>
<item name="android:windowExitAnimation">#anim/dialog_slide_out_down</item>
<item name="android:interpolator">#android:interpolator/anticipate</item>
</style>
there's more info in the CodePath guide linked above.
note that this all takes place in values/styles.xml
hope this helps other people.
In this android project im creating a default button style.
my styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/ButtonStlye123</item>
</style>
<style name="ButtonStlye123" parent="android:style/Widget.Button">
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
my button in a fragment.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:theme="#style/ButtonStlye123"
android:onClick="login" />
In the preview in android studio it looks exactly like I want, but when I run the app on my device the background color is gray ("default button color"). If i change the text color in my styles.xml like:
<item name="android:textColor">#color/ColorPrimary</item>
it changes (also on my device) so the custom style is loading, i tryd different colors (that worked for the text) for the button but it wont change.
Why isnt my background color loading?
Try use AppCompactButton
instead of
<Button
use
<androidx.appcompat.widget.AppCompatButton
that will do the trick
Update: 01/06/2021
Found out that the above will not work on earlier Android versions.
For materiel design Button use
app:backgroundTint="#color/green"
Please Use androidx.appcompat.widget.AppCompatButton instead of Button.
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button_id_Login"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#id/textInnputLayout_editText_id_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/Login_screen_button_text"
android:background="#drawable/login_button_style"
android:textAllCaps="false">
</androidx.appcompat.widget.AppCompatButton>
You might be using targetSdkVersion 30 material theme
The solution is change theme.xml style
From
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
To
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
Replace with
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Changing MaterialComponents to AppCompat works for me..
I think you need to change your attribute from "theme" to "style". These files are intended for different things, so are used differently.
Style is used to assign attributes to individual views or components, and Theme is used to apply attributes to the entire app.
So try this instead:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
<!-- This attribute was changed -->
android:style="#style/ButtonStlye123"
android:onClick="login" />
You should also split these different types of XML into the correct files as appropriate (styles.xml and themes.xml - instead of keeping them all in the same file). This is convention, and won't effect the code compilation or execution, but is recommended as a code style.
Use this attribute backgroundTint it will help you. It work for me. Example :
android:backgroundTint="#color/md_orange_800"
if you are using Android Studio Version 4.1 and above (Beta)
check your themes.xml file in values.
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
change the attribute to #null
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#null</item> <!-- HERE -->
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
for other old versions of Android Studio
just change this attribute
<item name="colorPrimary">#color/colorPrimary</item>
to
<item name="colorPrimary">#color/#null</item>
finally set the background of the button to the drawable icon you want.
example:
<Button
android:id="#+id/btnSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher_background" /> <!--the drawable you want-->
You only need to change your App Theme from Theme.MaterialComponents.DayNight.DarkActionBar to Theme.AppCompat.Light.NoActionBar inside styles.xml file
example :
from : style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"
To : style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"
your style should be like this....
<style name="ButtonStlye123" >
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
and in layout
<Button
android:id="#+id/btn3"
style="#style/ButtonStlye123"
android:layout_width="#dimen/sixzero"
android:layout_height="#dimen/sixzero"
android:text="3" />
I am using targetSdk 30 and compileSdk 32 and I am using Button widget. Android Studio version 2021.1.1
In my case, following change worked,
In AndroidManifest.xml, under "application" tag changing "android:theme" from
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
to
android:theme="#style/Theme.MaterialComponents.DayNight.NoActionBar"
I moved to Theme.AppCompat.Light.NoActionBar to remove the title bar. At first I tried to change "style" to "Theme.AppCompat.Light.NoActionBar" inside themes.xml but it didn't work for me.
I've created a spinner in my activity and when i run my app on my Jelly Bean device the theme of the spinner is like 2.x, how can i get the ICS one?
Here's my spinner code :
<Spinner
android:id="#+id/spinnermap"
style="#android:style/Theme.Holo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
As you can see I tried to set the global style "Holo" but no results..
I had the same problem with a NumberPicker but can't remember how I fixed it.
style="#android:style/Theme.Holo"
This is not the solution. You won't have a fallback on pre HC devices.
You need to declare a Theme for your whole application if you want to use the holo theme in your whole app for HC+(I assume this is what you want to have).
In your Manifest:
android:theme="#style/MyTheme"
values/styles.xml:
<style name="MyTheme" parent="android:Theme.Light">
</style>
values-v11/styles.xml:
<style name="MyTheme" parent="android:Theme.Holo.Light">
</style>
Now you'll have a dropdown spinner on HC+(and also other holo widgets of course)
However if you just want to have the spinner to be "holofied" you can do this:
<Spinner
android:id="#+id/spinnermap"
style="#style/MySpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
values/styles.xml:
<style name="MySpinner" parent="android:Widget.Spinner">
</style>
values-v11/styles.xml:
<style name="MySpinner" parent="android:Widget.Holo.Spinner">
</style>