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"
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
I need to remove round corners of all buttons in app and use flat background. preferably a color.
This is my style:
<style name="Component.MyTheme.Button" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#color/white_50</item>
<item name="backgroundTint">#color/black</item>
<item name="cornerRadius">#null</item>
</style>
and this is how I apply it in my theme.
<item name="materialButtonStyle">#style/Component.MyTheme.Button</item>
I want to change this
to this
EDIT : Ignore white bars at either ends of 2nd image.
set corner radius attibute to 0dp.
app:cornerRadius="0dp"
Like below code
<com.google.android.material.button.MaterialButton
android:id="#+id/button_filter_apply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/apply"
android:fontFamily="sans-serif"
android:textAllCaps="true"
android:textColor="#color/white"
android:textStyle="bold"
app:backgroundTint="#color/clear_blue"
app:cornerRadius="0dp"
app:layout_constraintBottom_toBottomOf="parent" />
Button looks like
EDIT : Ignore black bars on both side of the image
Just use:
<style name="Component.MyTheme.Button" parent="Widget.MaterialComponents.Button.TextButton">
...
<item name="cornerRadius">0dp</item>
</style>
or
<style name="MyButton" parent="Widget.MaterialComponents.Button.TextButton">
...
<item name="shapeAppearanceOverlay">#style/shapeAppearanceOverlay_noCorner</item>
</style>
<style name="shapeAppearanceOverlay_noCorner" parent="">
<item name="cornerSize">0dp</item>
</style>
As you said you would like to add themes to your button.
Can you please try adding 0.1 to your corner radius?
In order to use Chip and ChipGroup, I set Application style extends Theme.MaterialComponents.Light.NoActionBar int manifests.xml, then I set Button "android:background" attr, but it does not effect! why? and what can I do?
This is my style:
<style name="AppBaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primary_material_light</item>
<item name="colorPrimaryDark">#color/header_color</item>
<item name="actionBarSize">48dp</item>
<item name="android:screenOrientation">portrait</item>
<!--<item name="buttonStyle">#style/AntButton</item>-->
<!--<item name="materialButtonStyle">#style/AntButton</item>-->
<!--<item name="android:button"></item>-->
<!--<item name="android:progressTint">#color/ffc000</item>-->
<item name="colorAccent">#color/ffc000</item>
</style>
<style name="AntButton" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<!--<item name="android:colorButtonNormal">#color/white</item>-->
</style>
I have tried to change buttonStyle and materialButtonStyle, but not effect too!
this is my layout XML:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_popup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:divider="#drawable/shape_divider_05dp"
android:orientation="vertical"
android:showDividers="beginning|middle">
<!--only can use backgroundTint to change background color-->
<Button
android:id="#+id/item_popupwindows_Photo"
android:layout_width="match_parent"
android:layout_height="55dp"
android:backgroundTint="#color/white"
android:text="Pictrue"
android:textColor="#color/c_666666"
android:textSize="16sp" />
<!--background not effect !!-->
<Button
android:id="#+id/item_popupwindows_cancel"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#color/white"
android:text="cancel"
android:textColor="#color/c_666666"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is result :
Because I have used Chip and ChipGroup in APP, I have to user theme extends MaterialComponents! do you know how to resolve it ？please tell me, thanks!
in this page Can't use android:background with button from the new material components, the author wants to change the default padding, but I want to change the backgroundDrawable, so, it does not work for me.
If you want a true Button, but one that you can modify like the framework Button (instead of the MaterialButton), then you can explicitly specify the framework version in your layout file. Replace this:
<Button
android:id="#+id/item_popupwindows_cancel"
... />
with this:
<android.widget.Button
android:id="#+id/item_popupwindows_cancel"
... />
This will give you what it says on the tin: an android.widget.Button, which should respond to styling the way you expect.
Similarly, you could use a <androidx.appcompat.widget.AppCompatButton> if you want support library features but not material components features.
In this particular case, the LinearLayout holding your second Button seems to have a white background color. That means you don't need to explicitly specify a white background for your Button; you can just let the LinearLayout's background show through.
This can be accomplished by using the "Text Button" style of MaterialButton:
style="#style/Widget.MaterialComponents.Button.TextButton"
Use this code for change the color
app:backgroundTint="#color/primaryColor"
You can also use ImageButton instead of Button from material components. android:background is working on ImageButton.
<ImageButton
android:id="#+id/item_popupwindows_cancel"
... />
I am trying to apply a unified style on my button.
This is my v21/styles.xml
<style name="DefaultButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:colorButtonNormal">#f00</item>
<item name="android:textColor">#color/colorTextSecondary</item>
</style>
I apply this to my button like this
<Button
android:id="#+id/submit_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="#dimen/unit_large"
style="#style/DefaultButton"
android:text="Lemme In!" />
nothing fancy going on in here. Yet the color of my button doesn't change. Did something change over the material support packages? I am using '25.3.1'
Actually all of this is part of a greater effort I have to do to change the default button style of the application like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/DefaultButton</item>
</style>
I would then remove the individual styling attributes on all the buttons
Change this style="#style/DefaultButton" to
android:theme="#style/DefaultButton"
I am trying to create a button whose text color is the colorAccent and whose background color is the default background color.
It looks like this:
I have tried default styles, but non of them have worked. Currently I have something like this but doesn't work:
styles.xml :
<style name="AppTheme.ButtonRaised" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="android:textColor">#color/colorAccent</item>
</style>
And layout:
<Button
app:theme="#style/AppTheme.ButtonRaised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date" />
And I am getting something like this:
I am not getting any effect of style or theme here. I have also tried with style tag, but it doesn't work.
apply theme with a style like this
<style name="ThemeButtonBlue" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
I am also struggling to do this effect. I could achieve something similar, but I don't know if its "material design approved".
I set the style to their button borderless colored and the elevation to 2dp because on material design they say that "Raised buttons have a default elevation of 2dp". But they don't give you xml layout examples which is annoying -_-
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
style="#style/Base.Widget.AppCompat.Button.Borderless.Colored"
android:elevation="2dp"
android:text="Button"/>
Keep in mind that the elevation tag does not show a shadow pre Lollipop devices.