I have an app which uses a single common library used throughout my applications in order to keep a common theme.
In this library, I have the following style defined:
<style name="App.Widget.ProgressBar.Large" parent="#android:style/Widget.ProgressBar.Large">
<item name="android:indeterminateDrawable">#anim/anim_progressbar_large</item>
<item name="android:minWidth">80dip</item>
<item name="android:maxWidth">80dip</item>
<item name="android:minHeight">80dip</item>
<item name="android:maxHeight">80dip</item>
</style>
Which should allow a custom progress spinner to be displayed (irrelevant of device).
When this resource is local to the app (app/res/values/), not in the library, my Spinner animates correctly. However, when this style resource is in the library (library/res/values), the Spinner displays the beginning image but doesn't animate.
Does anyone know why the location of the resource would make a difference? I don't want to have to duplicate this resource for each application.
This is an old question, and I'm not sure I had exactly the same problem as the individual that posted the question, but for some reason using
style="#android:style/Widget.ProgressBar.Large"
did not animate the ProgressBar for me, whereas using
style="?android:attr/progressBarStyleLarge"
did. Hope it helps someone.
Related
According to the documentation
A Button which supports compatible features on older versions of the
platform, including:
Allows dynamic tint of its background via the background tint methods
in ViewCompat. Allows setting of the background tint using
R.attr.backgroundTint and R.attr.backgroundTintMode. This will
automatically be used when you use Button in your layouts and the
top-level activity / dialog is provided by appcompat. You should only
need to manually use this class when writing custom views.
Now, this makes me assume that the following two buttons would look exactly the same on high level devices.
<androidx.appcompat.widget.AppCompatButton
android:text="AppCompatButton"
android:id="#+id/appcompatbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_below="#id/appcompatbutton"
android:id="#+id/button"
android:layout_width="wrap_content"
android:text="Button"
android:layout_height="wrap_content" />
However, here is how it actually looks:
I ran this on the following emulator:
Galaxy Nexus, API:28 (720 x 1280 xhdpi)
And when I apply buttonStyle in my appTheme like this:
<!-- 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="buttonStyle">#style/Widget.MaterialComponents.Button</item>
</style>
It changes the AppCompatButton but not the normal button like this:
(Note the slight difference in the rounded edges)
I also tried to create a custom button that both inherited from android.widget.Button and also androidx.appcompat.widget.AppCompatButton, both of these buttons show the same behaviour as using AppCompatButton in xml does. So it feels like the only outlier is Button in XML.
Question 1:
This all seems incredibly confusing according to me. Can someone clarify this as either a bug or feature?
EDIT 1
Doing debugging I found that the Button actually gets transformed into a MaterialButton, see the following:
Question 2:
Why is this transformation happening?
EDIT 2
Question 2 answer:
The transformation of Button to MaterialButton is due to the parent theme I was using.
Question 3:
How do you implement a custom button which works just like Button in xml would?
As a side note and personal opinion, also a slight repetition, this system is not only confusing but its hard to get it right and foolproof for future changes. In addition to this, the documentation is very poor. I would appreciate if an answer to this would be included as well, or at least a discussion regarding it, how to deal with it for example.
Short answers.
This all seems incredibly confusing according to me. Can someone clarify this as either a bug or feature?
They use different styles.
Why is this transformation happening?
There is an auto-inflation enabled which will replace <Button with <com.google.android.material.button.MaterialButton at runtime.
How do you implement a custom button which works just like Button in xml would?
You can customize the attributes in xml or the theme attributes.
Long answers.
They use different styles.
The default style of MaterialButton is Widget.MaterialComponents.Button.
This style inherits from Widget.AppCompat.Button but changes some attributes.
Here you can find the differences.
The main difference is here:
<item name="shapeAppearance">?attr/shapeAppearanceSmallComponent</item>
You can read more about shaping in the official doc.
If you navigate through the style you will find:
<style name="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerSize">#dimen/mtrl_shape_corner_size_small_component</item>
</style>
where mtrl_shape_corner_size_small_component = 4dp.
It explains the slight difference in the rounded edges.
Also you are using
<item name="buttonStyle">#style/Widget.MaterialComponents.Button</item>.
It doesn't work for the MaterialButton. You have to use:
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button</item>
The auto-inflation is here.
The MaterialComponentsViewInflater replaces some framework widgets with Material Components ones at inflation time, provided a Material Components theme is in use.
Something similar happens also with AppCompat (you can check that MaterialComponentsViewInflater extends AppCompatViewInflater).
It means that, the <Button is replaced <com.google.android.material.button.MaterialButton at runtime, if you are using a Material Theme.
There are different options. One of these is to define a custom style for buttons.
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="materialButtonStyle">#style/MyButtonStyle</item>
</style>
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="cornerRadius">xxx</item>
</style>
or
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="shapeAppearanceOverlay">#style/SShapeAppearanceOverlay.MyApp.Button.Rounded</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">xxdp</item>
</style>
I changed the <Button> to <ImageButton>
Quick and short way.
Don't forget to check & change references in java/kotlin files. Compiler will alert you any way.
for the last few days I'm trying to implement custom theme, which is created by Action Bar Style Generator to my application. I'm able to use theme with some generic samples from SDK, but I'm not able to use it with my application which uses ActionBarSherlock.
My application with ActionBarSherlock is a modified sample of Tabs and Pager.
Steps which I do:
Create theme with Android Action Bar Style Generator.
Copy theme to res folder inside my application.
Change theme in Manifest file.
After those steps only 'Action bar color' changes to correct one. All other styles are not used in application. I have tried many different approaches which I found online, but without success.
Thank you very much for your help.
Did you add the proper items to your App's theme in styles.xml? You need to use attributes that are NOT prefixed with android:, for example:
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="background">#drawable/bg_striped</item>
<item name="backgroundSplit">#drawable/bg_striped_split</item>
You would also keep the properly prefixed ones for Android versions that have native actionbar.
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:background">#drawable/bg_striped</item>
<item name="android:backgroundSplit">#drawable/bg_striped_split</item>
The best place to understand this is to look at the demo provided with the ActionBarSherlock library project.
I managed to fix the problem.
I missed android:background attribute in TabWidget. This partially
solves the problem.
I had to set setLeftStripDrawable and setRightStripDrawable programatically.
I am trying to theme the overflow dropdown menu but I am having trouble finding the correct themes and styles for this part of the actionbar.
I am currently looking in the following files:
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml
Could anyone enlighten me please?
I managed to find what I wanted by creating a bogus holo theme here:
http://jgilfelt.github.com/android-actionbarstylegenerator/
Then I just looked at the example inside the zip file and updated my themes/styles files as so:
<item name="android:popupMenuStyle">#style/MyApp.Theme.PopupMenu</item>
<item name="android:dropDownListViewStyle">#style/MyApp.Theme.DropDownListView</item>
<style name="MyApp.Theme.PopupMenu" parent="#android:style/Widget.Holo.ListPopupWindow">
<item name="android:popupBackground">#drawable/theme_menu_popup_background</item>
</style>
<style name="MyApp.Theme.DropDownListView" parent="#android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">#drawable/theme_menu_popup_selector</item>
</style>
I would like to know how to totally overhaul everything but it seems I can only ever manage to drip feed my app with those essential theme/style specific bits because it takes soooo long to find the necessary styling syntax. If only there was an easier way.
Of course I have no idea how to position the ListPopupWindow or even change the color of the text but it's good enough for now.
How to change a style from code?
I got a style used all across my app, for all buttons. If the user changes the skin of the app, the background of this style should change.
<style name="ActionBtn">
<item name="android:layout_width">#dimen/action_btn_width</item>
<item name="android:layout_height">#dimen/action_btn_height</item>
<item name="android:background">#drawable/btn_frame_bgstate</item>
<item name="android:padding">#dimen/action_btn_padding</item>
<item name="android:layout_margin">#dimen/action_btn_margin</item>
</style>
So far the only idea I got is to make a custom button that itself chooses its background on creation.
I have not found any good, generic way for skinning android apps yet, but if I could change styles from code, that would do the trick.
All suggestions welcome!
1) Create different themes for your skins.
2) Set those themes programatically using following code in your onCreate method.
setTheme(resid);
resid is the id of your theme.
I'm trying to get a completely custom Dialog or PopupWindow, without any of the default Android UI controls (title, background, buttons, whatever).
Is this possible at all? I've spent hours searching for this, but no luck... It seems like this should be easily possible, but I can't find it.
Preferably this would be by inflating a View from XML, but at this point anything that would just work would be nice.
Thanks.
Steps I took:
Create a class extending Dialog.
In the onCreate, call setContentView(x, y) with x being your R.layout and y being R.style.popupStyle (see below).
In your res/values/style.xml, you need to override the default DialogWindow style. I tried just making a style that has this one as its parent, but that still didn't clear all defaults. So I checked the Android git tree and got the default style, and just copy-pasted it. This is the one:
<style name="Theme.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowTitleStyle">#android:style/DialogWindowTitle</item>
<item name="android:windowBackground">#android:drawable/panel_background</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>
You'll get a few errors, just solve them by copying more stuff from the official Android styles.xml and themes.xml files. Here's the contents of my styles.xml file: http://pastebin.com/RRR15YYS
That just gives you a white popup, no borders, nothing. Start customizing. :)
Thanks to mbaird for putting me on the right track.
[edit] I needed to look up my own answer again, and I spent at least ten minutes searching the official android styles/themes files, so here they are, for future reference:
styles.xml and themes.xml.
It sounds like you are trying to really customize an AlertDialog. For what you are wanting to do you may be better off just creating your own class that extends Dialog, similar to how you create activities by writing a class that extends Activity.
You can set the layout XML by calling setContentView() inside the onCreate() method of your custom Dialog class, just like you would in an Activity.
I've run into limitations on how much you can customize AlertDialogs in the past, and I've just implemented my own Dialog classes to get the level of customization that I needed.