I wanna set general style for my inner elements of my ConstraintLayout. For example, I have multiple TextViews with following attributes:
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
I created this style for it:
<style name="PageTitleStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginRight">8dp</item>
<item name="android:layout_marginLeft">8dp</item>
</style>
but how can I set these attributes to the defined style?
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
You can define your attributes in styles as follows:
<style name="MyStyle">
<item name="layout_constraintLeft_toLeftOf">parent</item>
<item name="layout_constraintRight_toRightOf">parent</item>
</style>
You can then specify style="#style/MyStyle" on each TextView.
Setting the style on the ConstraintLayout will not set the style on the children of the ConstraintLayout unless you set the style as a theme. See "Apply a style as a theme". (Emphasis is mine.)
Beginning with Android 5.0 (API level 21) and Android Support Library v22.1, you can also specify the android:theme attribute to a view in your layout file. This modifies the theme for that view and any child views, which is useful for altering theme color palettes in a specific portion of your interface.
So you would add android:theme="#style/MyStyle" to the ConstraintLayout. This will replace the existing theme, so you may want to set your AppTheme as the parent of MyStyle.
There is one odd-looking side effect that I have noticed in doing this: The constraints named in the style effect the display of the layout in the studio designer (correctly) but the constraints themselves do not display. The layout editor will also not pick up that the constraints are defined in the style and will give "constraint missing" errors. (Android Studio 3.3 RC3)
Relation constraints can not be used in "style". Try to use it in layout
Related
I am very happy with this website. I'm learning a lot.
Today I doubt has arisen. And I want to put a style to a FrameLayout. and do not use.
The style is as follows:
<style name="textAsk">
<item name="android:textColor">#000000</item>
<item name="android:padding">2dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:textSize" >18dp</item>
<item name="android:layout_marginRight">12dp</item>
<item name="android:layout_marginLeft">12dp</item>
<item name="android:layout_marginTop">5dp</item>
</style>
I show fragments that are changing in a FrameLayout. Each Fragment contains a TextView with a text in it.
There are a lot of fragments, and I would like to set a style, a common one, for all the TextViews, in order to save time and not setup the style in each TextView.
I had tried this code:
<FrameLayout
android:id="#+id/fragmentaskGRP1"
android:layout_width="match_parent"
android:layout_height="450dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
style="#style/textAsk"/>
But the only thing that works for me is:
<item name="android:layout_marginRight">12dp</item>
<item name="android:layout_marginLeft">12dp</item>
<item name="android:layout_marginTop">10dp</item>
Thank you very much for everything
The FrameLayout doesn't support the textColor or textSize attribute (API). So it's never set for the FrameLayout and ignored. See the style properties section from the guide Styles and Themes for more information.
Quote from the Guide:
However, if you apply a style to a View that does not support all of the style properties, the View will apply only those properties that are supported and simply ignore the others.
Define the text-related styles in a separate style definition and use it for this one for the matching views like TextView
The thing is that child views don't inherit styles from their enclosing ViewGroup. Styles can have parents, but in your case TextViews are not going to get these attributes from the FrameLayout.
The other styles will not be applied to fragments. You have to create another logic to apply styles to all fragments (Most probably you will have to apply styles individually to each fragment)
FrameLayout have nothing to do with text so textColor, textSize will have no effect.
Where as minWidth, minHeight are properties of View it think they should work.
I have been trying to find resources explaining how I can style the Switch button in the Material Design theme.
This link does explain the color values and aesthetic details but doesn't say much on how I can achieve this by setting certain attributes in Material design theme.
http://www.google.com/design/spec/components/switches.html#switches-switch
If there's no direct way of setting the Switch's color, where are the drawables located that I can use to make my own version?
I have been trying to find resources explaining as to how I can style switch button in the Material Design theme.
Coloring widgets is pretty simple now with the new appcompat-v7:21.
As long as you are using appcompat-v7:21, you can replace all of your old Switch widgets with SwitchCompat widgets. So in your xml layouts, instead of using the old Switch tag, use android.support.v7.widget.SwitchCompat.
Then in your styles.xml, make sure your app's parent theme is a Theme.AppCompat theme such as Theme.AppCompat.Light.
Finally, the key is to specify your own value for colorAccent:
<item name="colorAccent">#color/my_fancy_color</item>
The color you specify for colorAccent will be used to color the widgets in your app such as SwitchCompats, EditTexts, RadioButtons, etc.
So your styles.xml might look something like:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/color_primary</item>
<!-- colorPrimaryDark is used to color the status bar -->
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<!--
colorAccent is used as the default value for colorControlActivated
which is used to color widgets
-->
<item name="colorAccent">#color/my_fancy_color</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
</style>
where are the drawables located that I can use to make my own version?
I wouldn't recommend altering the drawables directly, but they are located in
sdk/platforms/android-21/data/res/drawable-XXXX
and the files are called
btn_switch_to_off_mtrl_XXXXX.9.png
btn_switch_to_on_mtrl_XXXXX.9.png
switch_track_mtrl_alpha.9.png
To complete JDJ's answer:
There is a bug with a corrupt file in drawable-hdpi in AppCompat:
https://code.google.com/p/android/issues/detail?id=78262
To fix it, just override it with these 2 files:
https://github.com/lopespm/quick-fix-switchcompat-resources
Add them to your drawable-hdpi directory.
XML
<android.support.v7.widget.SwitchCompat
android:id="#+id/dev_switch_show_dev_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
And nothing was necessary in Java
In my case, I only wanted to style a particular switch, not all of them in the app. Here is how I did that using AppCompat-v7:23
xml layout:
<android.support.v7.widget.SwitchCompat
android:id="#+id/switchAffiliateMember"
android:theme="#style/Sugar.Switch.Affiliate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOff="No"
android:textOn="Yes" />
v21/styles.xml:
<style name="Sugar.Switch.Affiliate" parent="Base.Widget.AppCompat.CompoundButton.Switch">
<item name="colorSwitchThumbNormal">#color/red</item>
<item name="colorAccent">#color/white</item>
</style>
colorSwitchThumbNormal is the "off" state, colorAccent is the "on" state. Notice that neither of these have an "android" namespace prefix, I don't understand why, but it only works in this way for me.
The buttons are being distorted after changing minSdkVersion in the manifest from 10 to 11. If I change it back to 10 the buttons are fine. These buttons all have respective drawables in each of the drawable folders. This is happening to buttons without drawables as well. Buttons that just have text the text gets enlarged quite a bit.
Edit to add xml example:
Here is what the button in xml looks like.
<Button
android:id="#+id/settingsEditInfoBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/edit_info_btn" />
The text is part of the image. Here is the edit info button drawable.
The minHeight and minWidth of buttons are being set by the default theme somewhere. Setting them both to 1dp solved the problem in this case.
<Button
android:id="#+id/settingsEditInfoBtn"
android:minHeight="1dp"
android:minWidth="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/edit_info_btn" />
Or you can set a button style in your application theme that overrides these values for all buttons. In the values/themes.xml:
<style name="MyTheme" parent="android:Theme">
<item name="android:buttonStyle">#style/MyButtonStyle</item>
</style>
<style name="MyButtonStyle" parent="android:style/Widget.Button">
<item name="android:minHeight">1dp</item>
<item name="android:minWidth">1dp</item>
</style>
Then, don't forget to apply the custom theme to any desired activities in the AndroidManifest.xml:
<activity
android:name=".MainActivity"
android:theme="#style/MyTheme"
</activity>
This is normal. The default font/size/style varies between the two API levels and the text is rendered in the default font corresponding to the API level. By definition the app inherits the default Holographic theme when you set min/Targets Sdk Version to 11 or greater.
If you want to have the size of your choice you should explicitly define your style and use it in your layout.
<style name="CustomTheme">
<item name="textSize"> 14dp </item>
</style>
and use it in your button.
<Button style="#style/CustomTheme"
android:layout_width=".."
../>
here's my issue. I have defined custom themes and styles, so as to customize various Views, in the relevant .xml files. Here are some code extracts:
themes.xml:
...
<style name="Legacy" parent="android:Theme.NoTitleBar">
<item name="android:buttonStyle">#style/Legacy.Button</item>
...
</style>
styles.xml:
...
<style name="Legacy.Button" parent="#android:style/Widget.Button">
<item name="android:textColor">#ffffff</item>
<item name="android:background">#drawable/button_selector_blue</item>
<item name="android:textSize">15dp</item>
</style>
Let's say I set my application's theme to Legacy. If I use a Button in a layout, it will get my custom default parameters (white text, background is #drawable/button_selector_blue, etc).
Now let's say I want to keep those parameters save for the text size: I'd like to have some buttons with a larger text size, which would be defined in an titleSize attribute in attrs.xml:
...
<attr name="titleSize" format="reference|dimension" />
and which value is set for each theme in my themes.xml file.
So my layout would contain something like:
<Button
android:id="#+idmyButtonId"
android:drawableRight="#drawable/aDrawable"
android:text="#string/someText"
android:textSize="?titleSize"
android:layout_width="fill_parent" android:layout_height="wrap_content">
</Button>
When launching my app I get the following error:
java.lang.UnsupportedOperationException: Can't convert to dimension: type=0x2
So it seems I cannot tweak custom styles using attributes - at least not this way. Is such a thing possible ? If not, what would you use to achieve such a result ?
I'd like to give the user the ability to select among different themes, so I can't just define an additionnal ButtonWithLargeText style and directly use it in my layout.
Thanks for your help !
I finally got it to work. Instead of defining my titles' size in attrs.xml, I used dimens.xml. So now the following works:
<Button
android:id="#+idmyButtonId"
android:drawableRight="#drawable/aDrawable"
android:text="#string/someText"
android:textSize="#dimen/titleSize"
android:layout_width="fill_parent" android:layout_height="wrap_content">
</Button>
While I get my regular text size (which I defined in my styles.xml) on the Button by using this:
<Button
android:id="#+id/idRegularButton"
android:text="#string/regularSizeText"
android:layout_width="wrap_content" android:layout_height="wrap_content">
</Button>
I want to extend Android's small button style. I can do it inline:
<Button android:id="#+id/myButton"
style="?android:attr/buttonStyleSmall"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="10dp"
android:text="Click Here"/>
But in the interest of reusability, I want to transfer these styles to a custom style. How can I add buttonStyleSmall (or Widget.Button.Small?) as a parent to a style? Something like this in my custom style XML:
<style name="RightLink" parent="?android:attr/buttonStyleSmall">
<item name="android:layout_alignParentRight">true</item>
<item name="android:layout_gravity">right</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<item name="android:textSize">10dp</item>
</style>
with the button declaration using that style:
<Button android:id="#+id/myButton"
style="#style/RightLink"
android:text="Click Here"/>
EDIT
Using the correct syntax as described by Lukas below (use #android:attr/buttonStyleSmall as the parent), I'm still seeing a difference between the two:
Button with buttonStyleSmall as style and inline styles added:
Custom style with buttonStyleSmall as the parent:
What am I missing?
So you try to inherit style informations from a standard Android style. For this, you'll need to use the parent-attribute as you already did.
The only exception when inheriting a standard style is, that you have to use an # not a ?:
<style name="RightLink" parent="#android:attr/buttonStyleSmall">
A little more about how to do that for platform styles (because that differs from styles you created yourself) can be found here.
After playing around with it i found that the way you inhirate is correct, but the recourse is wrong:
<style name="RightLink" parent="#android:style/Widget.Button.Small">
This works.
The difference seams to be that the integer-constant which is used to add this by using the style-attribute and in code is declared in Androids R-class in the attr-subclass.
The XML-Style definitions (from which you can actually inherit) are stored in the style-subclass of the R-class. So the above line should solve your problem.