I tried to set up my togglebutton properties layout using style.xml.
Here's my code:
<ToggleButton android:id="#+id/button_toggle_1" style="button_test_1"/>
<ToggleButton android:id="#+id/button_toggle_2"
android:textOff="test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ToggleButton android:id="#+id/button_toggle_3" style="button_test_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
For ID=button_toggle_1, I apply a style (style.xml), here's the code:
<style name="button_test_1">
<item name="android:textOff">test1</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="button_test_3">
<item name="android:textOff">test3</item>
</style>
I can see button 2 and 3 but the text for button 3 is different from what I set it to be. button 3 text = "APAGADO". From this test, I conclude that togglebutton simply cannot set its properties using style.xml. Is this true? or did I do something wrong?
If toggle button is "special", anyone knows the reason why? is this "special" condition applies to other things as well?
Thanks!
You are not referencing the styles correctly. It is style="#style/style_name". See documentation.
Related
The documentation for ImageButton says:
By default, an ImageButton looks like a regular Button
This is obviously wrong because when I put both into a layout:
<Button
android:id="#+id/button2"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_margin="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_margin="20dp"
app:layout_constraintStart_toStartOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#+id/button2" />
and run it, it looks like this:
The Button has a color and a shadow while the ImageButton is just a gray rectangle (with round corners I think).
Unfortunately I don't understand at all how styles work. My main question though is how do I need to change the ImageButton's configuration to actually make it look like a regular Button.
Are you using material design? Your Button does not look like the regular button that default style is #style/Widget.AppCompat.Button, but like the material button, which default style is #style/Widget.MaterialComponents.Button. If you set the style of the Button to #style/Widget.AppCompat.Button, you will see it looks the same as the ImageButton with default style #style/Widget.AppCompat.ImageButton
This is #style/Widget.AppCompat.Button, you can see that it has been expanded on the basis of #style/Widget.AppCompat.Button:
<style name="Widget.MaterialComponents.Button" parent="Widget.AppCompat.Button">
<item name="enforceMaterialTheme">true</item>
<item name="android:background">#empty</item>
<item name="enforceTextAppearance">true</item>
<item name="android:textAppearance">?attr/textAppearanceButton</item>
<item name="android:textColor">#color/mtrl_btn_text_color_selector</item>
<item name="android:paddingLeft">#dimen/mtrl_btn_padding_left</item>
<item name="android:paddingRight">#dimen/mtrl_btn_padding_right</item>
<item name="android:paddingTop">#dimen/mtrl_btn_padding_top</item>
<item name="android:paddingBottom">#dimen/mtrl_btn_padding_bottom</item>
<item name="android:insetLeft">0dp</item>
<item name="android:insetRight">0dp</item>
<item name="android:insetTop">#dimen/mtrl_btn_inset</item>
<item name="android:insetBottom">#dimen/mtrl_btn_inset</item>
<item name="android:stateListAnimator" ns2:ignore="NewApi">#animator/mtrl_btn_state_list_anim</item>
<item name="cornerRadius">#null</item>
<item name="elevation">#dimen/mtrl_btn_elevation</item>
<item name="iconPadding">#dimen/mtrl_btn_icon_padding</item>
<item name="iconTint">#color/mtrl_btn_text_color_selector</item>
<item name="rippleColor">#color/mtrl_btn_ripple_color</item>
<item name="backgroundTint">#color/mtrl_btn_bg_color_selector</item>
<item name="shapeAppearance">?attr/shapeAppearanceSmallComponent</item>
</style>
So, you can customize a new style for ImageButton, and then add those new style attributes of material button to the custom style (mainly cornerRadius, elevation, and rippleColor)
or set the button's style to #style/Widget.AppCompat.Button, while will also make the ImageButton looks like the Button :P
Here is the button :
<Button
android:id="#+id/btn_choose_photo"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_camera"
android:drawablePadding="8dp"
android:text="#string/image_picker_dialog_choose_image"
android:textAlignment="textStart" />
I am using material themes, so this will be inflated into a material button
drawableStart has no effect at all, however drawableEnd, bottom and top work just fine
When I make the button tag a text view, drawableStart works
It seems like a bug or maybe I am missing something ?
Edit: My app theme is as follows :
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!---colors-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryVariant</item>
<item name="colorPrimaryDark">#color/colorPrimaryVariant</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryVariant</item>
<item name="colorAccent">#color/colorSecondary</item>
<!--
<item name="android:colorBackground">#color/colorBackground</item>
-->
<!--components-->
<item name="textInputStyle">#style/text_input_layout_style</item>
<item name="bottomSheetDialogTheme">#style/bottom_sheet_dialog_theme</item>
<item name="spinnerStyle">#style/spinner_style</item>
<item name="android:spinnerStyle">#style/spinner_style</item>
<item name="android:toolbarStyle">#style/toolbar_style</item>
<item name="toolbarStyle">#style/toolbar_style</item>
<item name="actionOverflowButtonStyle">#style/overflow_button_style</item>
<item name="android:actionOverflowButtonStyle">#style/overflow_button_style</item>
</style>
You should use app:icon like this:
In the layout:
<Button
...
app:icon="#drawable/ic_camera"
style="#style/Widget.MaterialComponents.Button.TextButton"
/>
It is displayed at the start, before the text label. You can change icon gravity, tint or size.
For more information
Using
android:drawableLeft
will solve the problem, but will not give you RTL(Right to left) support. If your end user uses a different language which follow RTL, then your Button will not support it.
Are you managing the Button's property in the Activity or Fragment, as technically speaking,
android:drawableStart
should work.
You can change to "App compat button"
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/continuar_anonimo_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
app:backgroundTint="#color/greenPrimary"
android:background="#drawable/corner_boton_outline"
android:text="Continuar anonimamente"
android:paddingLeft="15dp"
android:drawableStart="#drawable/ic_google_color"
style="?android:textAppearanceSmall"/>
Use android:drawableLeft
android:drawableLeft="#drawable/ic_phone"
android:backgroundTint="#android:color/white"
I have a custom-styled checkbox that I'd like to replicate a number of times in my Android app. The XML for this checkbox is:
<CheckBox
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_large"
android:text="Temporary Text"/>
Obviously, I can simply copy the XML and paste it lower down in my layout file, but in the event that I want to change the design I would have to do it for every pasted checkbox.
Is there a clean way to create a custom template for this checkbox, or should I be implementing this in code?
Is there a clean way to create a custom template for this checkbox, or should I be implementing this in code?
You can use styles. Create
<style name="MyCheckbox">
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:button">#drawable/checkbox_large</item>
<item name="android:text">Temporary Text</item>
</style>
and then just apply to all checkboxes you want:
<CheckBox
style="#style/MyCheckbox"/>
When in need of change, just alter your style.
Ripple effect problem when checkbox button is set to null:
Style used
<style name="MyRow">
<item name="android:button">#null</item>
<item name="android:drawableRight">#drawable/abc_btn_radio_material</item>
<item name="android:drawableEnd">#drawable/abc_btn_radio_material</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:padding">#drawable/dafaultPadding</item>
This is the radiogroup containing the radio buttons.
<RadioGroup android:layout_height="wrap_content" android:layout_width="match_parent">
<android.support.v7.widget.AppCompatRadioButton style="#style/MyRow"
android:id="#+id/one"
android:text="#string/someText"
/>
<android.support.v7.widget.AppCompatRadioButton style="#style/MyRow"
android:id="#+id/two"
android:text="#string/someText"
/>
<android.support.v7.widget.AppCompatRadioButton style="#style/MyRow"
android:id="#+id/three"
android:text="#string/someText"
/>
</RadioGroup>
Ripple animation works as expected when the android:button property is set to some drawable.
When null, it has this behaviour on Marshmallow (ripples at the middle of the row).
Click Here to see the image
In lollipop works correctly except for the fact that it has no bounds and the ripple expands to the whole window.
The only way to solve this in my mind is to create custom views for each row containing a textview on the left of a radiobutton.
But in this way I will have to create a monster-like controller (to select checkboxes when I press on the textview) and I will lose all the advantages of the radiogroup.
Try using following style for your radio button:
<style name="RadioButton">
<item name="android:background">?selectableItemBackground</item>
<item name="android:button">#null</item>
<item name="android:drawableRight">?android:attr/listChoiceIndicatorSingle</item>
<item name="android:drawablePadding">#dimen/yourDrawablePadding</item>
<item name="android:padding">#dimen/buttonPadding</item>
</style>
First of all, ?selectableItemBackground will fix your ripple problem.
Also use ?android:attr/listChoiceIndicatorSingle as your drawable to allow beautiful material animation on checking/unchecking radio button.
You can see the difference below (Google Pixel XL, 7.1.2):
I had similar problem. Try to set <item name="android:background">?attr/selectableItemBackground</item> in your style or use custom ripple and set it.
I has same issue with radiobutton, try adding android:button="#drawable/radiobutton_drawable" with android:paddingLeft="10dp" and remove android:drawableRight
set radio button background transparent
android:background="#android:color/transparent"
I am testing out my app for API21 on Android! Unfortunately, my buttons seem weird - there is some kind of background color added. The background images did not change - they are completely transparent except for the border. (The different text and size is due to the screenshot).
Here you see the buttons before and since API 21: http://imgur.com/9EEcl0o,yVEnJkI#0
I already tried android:elevation="0dp" and android:background="#android:color/transparent". Anybody knows why my buttons change? Thank you very much!
layout.xml:
<Button android:id="#+id/sm_achievements_btn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.1"
android:background="#drawable/menu_btn_selector"
android:onClick="showAchievements"
android:text="#string/sm_achievements_btn"
android:padding="#dimen/padding_std"
android:layout_marginTop="#dimen/margin_small"
android:textColor="#color/button_text"
android:textSize="#dimen/text_xlarge"
style="#style/lbm_button"/>
menu_btn_selector.xml:
<item android:drawable="#drawable/menu_button"
android:state_pressed="false"/>
style.xml:
<style name="lbm_button" parent="android:Theme.Holo.Light">
<item name="android:textAllCaps">false</item>
</style>
Material buttons have a default stateListAnimator that provides state-based elevation (e.g. 0dp when disabled, 1dp when enabled). You can clear it by setting android:stateListAnimator="#null" in your style or directly on the Button.
Here is what that would look like on your button XML:
<Button android:id="#+id/sm_achievements_btn"
...
android:textAllCaps="false"
android:stateListAnimator="#null" />
Also, you're using the wrong parent for your button style. You should never set a theme as the parent for a widget style. Regardless, here is what that should look like if you prefer that route:
<Button android:id="#+id/sm_achievements_btn"
...
style="#style/MyButtonStyle" />
<style name="MyButtonStyle" parent="android:Widget.Material.Light.Button">
<item name="android:textAllCaps">false</item>
<item name="android:stateListAnimator">#null</item>
</style>