I want to style all my ImageButtons in a theme. After searching for quite some time I found the solution to my problem. But I don't know why it works like it does.
My main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_foreground" />
</LinearLayout>
This is my original theme that didn't work. It styles my TextView but ignores the ImageButton. The result is shown in the screenshot below.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:imageButtonStyle">#style/redBackground</item>
<item name="android:textViewStyle">#style/redBackground</item>
</style>
<style name="redBackground">
<item name="android:background">#FF0000</item>
</style>
</resources>
And here's the theme that works:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="imageButtonStyle">#style/redBackground</item>
<item name="android:textViewStyle">#style/redBackground</item>
</style>
<style name="redBackground">
<item name="android:background">#FF0000</item>
</style>
</resources>
The only difference is the missing 'android:' prefix in front of the 'imageButtonStyle' attribute.
So my questions are:
What is the difference between imageButtonStyle and android:imageButtonStyle?
Why does android:textViewStyle work but not android:imageButtonStyle? They are both defined the plattforms 'attrs.xml'.
Why is there no textViewStyle (without android prefix)? Removing the prefix yields an error.
Where are the attributes defined that have no prefix? Apparently not in the plattforms 'attrs.xml'.
Where can I find proper documentation for the whole style stuff? Of course I halve already read the respective Google docs (https://developer.android.com/guide/topics/ui/look-and-feel/themes.html). But still i have basic questions like this one.
Interestingly, it seems like the 'android:imageButtonStyle' version has worked some years ago: How to apply an style to all ImageButtons in Android?. I haven't tested that myself, though.
And here's the post that proposed removing the android prefix. Including unanswered comments that ask why it works: buttonStyle not working for 22.1.1
android tag that you use is used for attribute coming from Android SDK.
app tag is used if you are using the support library.app is just a namespace for any custom parameters for a custom View.
This can be anything but if you see the root element there's probably a line xmlns:app="http://schemas.android.com/apk/res-auto" that assigns the namespace
You may also see other namespaces if you are using custom views (of your own or form a library).
In case that anyone else stumbles across the question: I've found the answer in this Droidcon talk: https://youtu.be/Jr8hJdVGHAk?t=21m12s
The topic is handled in a minute starting at 21:12.
As I understand it, specifying no namespace results in the global namespace being searched which seems to include the support libraries attributes. And indeed both, the SDK's R.attr as well as the support library's R.attr define the imageButtonStyle attribute (with slightly different descriptions). However, the support library does not define a textViewStyle attribute. So that explains why you can't omit it's android: prefix.
To answer my last question concerning the documentation: Despite the Google guide and the R.attr classes' documentation, the video mentioned above and this Google I/O talk are quite informative: https://www.youtube.com/watch?v=TIHXGwRTMWI
So the only question that is left open is why the SDK's imageButtonStyle does not work.
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.
I tried to include the app:fabSize in styles.xml but android studio threw an error
Is there any way to include the app:fabSize and other app: attributes in styles.xml?
Here is the code for the style tag
When adding Compat attributes in layout.xml one should use previously defined namespace (it doesn't have to be app actually, but should be defined in xml via xmlns: - for example having hello as a namespace is also possible. Anyway app is some kind of a standard).
<android.support.design.widget.FloatingActionButton
xmlns:hello="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
hello:fabSize="mini"/>
But in styles.xml to use Compat attributes one shouldn't put anything, but attribute name:
<style name="StyleName">
<item name="fabSize">mini</item>
</style>
I'm looking for a way to apply a Style to an AndroidPlot element, and the documentation is precious scarce. Basically, I want to externalize the graph design elements into my styles.xml file, but I'm not sure how to do this. I've tried adding an element to Attrs.xml but to no avail.
My activity_main.xml layout file:
<com.androidplot.xy.XYPlot
android:id="#+id/main_xyplot_main"
style="#style/GraphStyle"
androidPlot.domainLabel="#string/graph_x_axis"
androidPlot.titleWidget.labelPaint.textSize="#dimen/title_font_size"
androidPlot.domainLabelWidget.labelPaint.textSize="#dimen/domain_label_font_size"
androidPlot.rangeLabelWidget.labelPaint.textSize="#dimen/range_label_font_size"
androidPlot.rangeLabel="#string/graph_y_axis"
androidPlot.title="#string/graph_title"
androidPlot.renderMode="use_background_thread"
androidPlot.graphWidget.rangeLabelPaint.textSize="#dimen/range_tick_label_font_size"
androidPlot.graphWidget.rangeOriginLabelPaint.textSize="#dimen/range_tick_label_font_size"
androidPlot.graphWidget.domainLabelPaint.textSize="#dimen/domain_tick_label_font_size"
androidPlot.graphWidget.domainOriginLabelPaint.textSize="#dimen/domain_tick_label_font_size"
androidPlot.graphWidget.gridLinePaint.color="#000000"
androidPlot.graphWidget.marginBottom="25dp"
androidPlot.graphWidget.marginLeft="20dp"
androidPlot.graphWidget.marginRight="10dp"
androidPlot.graphWidget.marginTop="20dp"
androidPlot.legendWidget.heightMetric.value="25dp"
androidPlot.legendWidget.iconSizeMetrics.heightMetric.value="15dp"
androidPlot.legendWidget.iconSizeMetrics.widthMetric.value="15dp"
androidPlot.legendWidget.positionMetrics.anchor="right_bottom"
androidPlot.legendWidget.textPaint.textSize="10dp"
android:layout_above="#id/main_percentage"
android:gravity="top"
android:visibility="invisible" />
Styles.xml
<style name="GraphStyle">
<item name="android:paddingBottom">0dp</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:layout_width">"wrap_content"</item>
<item name="android:layout_height">"wrap_content"</item>
</style>
Is there even a way to do this? I want to put all of those androidPlot.* into the GraphStyle.
Thanks!
Unfortunately this is not currently possible. Androidplot is packaged as a Jar and (as far as I am aware) it is not possible to include the styleable definitions that are used by in a jar. This means that you won't be able to override the Androidplot specific fields of the Plot (those that begin with "androidPlot") but can still override the fields that come from the View base class (those that begin with "android").
Going forward, we are considering using .aar instead of .jar as the packaging format. Among other things, this should let us include styleable definitions in the artifact, getting rid of the above limitation. Here's a link to the thread on that topic.
UPDATE: As of 0.6.2 (the current development version) Androidplot is available as a .aar with limited styleable support, however as 0.6.2 matures more and more attributes are being added. See this thread for details.
I'm building an app and want to make sure it uses the default "sans" fonttype that android supplies.
I installed some strange font and set it as the font my phone uses so I can test if my actions are working.
Then I changed the theme that is used by all my screens so it includes the following line:
<item name="android:typeface">sans</item>
This does not have any effect though...
If I change the theme-typeface line to:
<item name="android:typeface">serif</item>
Then it does work, the odd font does not show, but I get the default android serif font...
The same happens when I use monospace...
But when I use sans (or normal) it uses the newly installed font.
Does anyone know a good way to accomplish this?
Edit: I need a way to set it for the whole app, not for every item separately
Edit2: Even if I set it in the xml it does not work.
By now I think serif has effect becouse the odd font does not have a serif version.
So android defaults to its own font then.
How can I make andoid use its own build-in font always?
You can do this,
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="serif"
android:text="#string/hello" />
Becomes this:
<TextView
style="#style/CodeFont"
android:text="#string/hello" />
By defining an xml theme file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CodeFont" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#00FF00</item>
<item name="android:typeface">shreif</item>
</style>
</resources>
You can also apply styles to all activities of an application:
<application android:theme="#style/CustomTheme">
Or just one activity:
<activity android:theme="#android:style/Theme.Dialog">
This was a question I had some time ago and never found the answer for.
Thats OK. I think in the end: Every supplier of a device can give you another default font.
So I decided to package "my own" font in the app.
(Ah well, I guess everybody here is learning)
I've been searching the solution for hours: how to apply a simple theme or style to an application, an activity or just a view? It seems super easy but my styles always get ignored.
Here is the code in style.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="master" parent ="#android:style/Theme.NoTitleBar">
<item name="android:typeface">serif</item>
<item name="android:textColor">#8b8378</item>
</style>
</resources>
and here is the code in AndroidManifest.xml:
<application android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/master">
and code in a ListView
<ListView android:layout_height="wrap_content"
style="#style/master"
android:id="#+id/list"
android:layout_width="fill_parent">
</ListView>
NOTHING ever happens. Font style, color all remain the default. Only by declare the attributes explicitly like
<TextView android:gravity="center" android:typeface="serif" android:textColor="#8b7d6b" android:textAppearance="?android:attr/textAppearanceSmall" android:id="#+id/text_intro" android:layout_height="wrap_content" android:text="#string/welcome_text" android:layout_width="wrap_content" android:padding="20sp" android:layout_weight="0"></TextView>
will work. I know eclipse doesn't support preview of theme and style, but they don't work on emulator as well.
Help please! I can't believe I have been stuck with this tiny issue for a week... Thank you in advance!
There are a few things about Android styles and resources at work here.
Android styles are an extremely general facility, and the result is that some configurations are possible but invalid and will be ignored. You've run across a few. :)
When applied to a view, a style will be equivalent to setting those same attributes on that view. Styles do not cascade to child views. typeface and textColor aren't valid on a ListView, so they are ignored. They also aren't going to work on a theme that way, since themes provide default styles for different kinds of views. (Why are invalid attributes silently ignored instead of generating an error? Because as new attributes are added in later platform revisions, older devices should ignore extra attributes that they don't know how to parse for compatibility.)
The best way to accomplish what you're trying to do is likely to be:
Create a style for TextViews. (This shouldn't have a parent that is a theme like your pasted code does.)
Apply that style to the TextView in your list item layout using the style= syntax.