Develop Reference

How to create a circular Button or ImageButton or ImageView with a bitmap drawable and padding

I can't figure out how to create a Button or ImageButton or ImageView or anything that has:
A bitmap drawable with the icon
A padding
What i have try now is this:
<ImageButton
android:id="#+id/ShowInstructionsImageButton"
android:contentDescription="#string/Common_InformationIconContentDescription"
android:layout_alignParentRight="true"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_margin="14dp"
android:backgroundTint="#color/normalTextColorPrimaryDark"
android:background="#drawable/ic_info_bitmap"
android:layout_centerVertical="true" />
Which works but the clickable area of the ImageButton is 20dp, how i can make the clickable area 48dp?
I have check this discussion here Padding not working on ImageButton but if i use android:src instead of android:background i get a black box in the place of the icon
the icon is this:

You can use a MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="#style/Widget.App.Button.IconOnly"
app:icon="#drawable/ic_add_24px"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.Button.Circle"
/>
with:
<style name="Widget.App.Button.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton" >
<item name="iconPadding">0dp</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:minWidth">12dp</item>
<item name="android:minHeight">12dp</item>
<item name="iconGravity">textStart</item>
<item name="strokeWidth">3dp</item>
<item name="strokeColor">#color/...</item>
</style>
and a circular shape:
<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>

First, try to use androidx.appcompat.widget.AppCompatImageButton or androidx.appcompat.widget.AppCompatImageView instead of ImageButton to gain the advantage of backward compatibility.
After that, to show a drawable using it, you should use app:srcCompat, and not android:background. Now, if you add some padding to the view, it will be applied to the showing drawable.
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/ShowInstructionsImageButton"
android:contentDescription="#string/Common_InformationIconContentDescription"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="14dp"
android:layout_centerVertical="true"
app:tint="#color/normalTextColorPrimaryDark"
app:srcCompat="#drawable/ic_info_bitmap" />

I found a solution that works for me:
<ImageButton
android:id="#+id/ShowInstructionsImageButton"
android:contentDescription="#string/Common_InformationIconContentDescription"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="14dp"
android:backgroundTint="#color/normalTextColorPrimaryDark"
android:background="#drawable/ic_info_layer"
android:layout_centerVertical="true" />
with ic_info_layer.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/ic_info_bitmap"
android:width="#dimen/IconSize"
android:height="#dimen/IconSize"
android:right="#dimen/ButtonIconPadding"
android:left="#dimen/ButtonIconPadding"
android:top="#dimen/ButtonIconPadding"
android:bottom="#dimen/ButtonIconPadding"
/>
</layer-list >
On API < 23 it is important the ImageButton to have fixed width and height because layer width and height is being ignored.

Applying a design to a subset of buttons in Android

<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#color/black"
app:strokeWidth="1dp"
app:backgroundTint="#color/white"
android:id="#+id/button_clear"
android:layout_width="64dp"
android:layout_height="64dp"
android:text="C"
app:layout_constraintEnd_toStartOf="#+id/button_sign"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button_sign" />
I am building a calculator app so I wanted my number buttons to have a different background color than my operation buttons and my equal button to have a different background.
What is the most effective way to apply this to a group of buttons?
I am new to Android Development.

Just define a default style:
<style name="CalculatorButton" parent="#style/Widget.MaterialComponents.Button.OutlinedButton">
<item name="strokeColor">#color/....</item>
<item name="strokeWidth">1dp</item>
<item name="backgroundTint">#color/...</item>
</style>
Then you can define others which inherit from the default. Something like:
<style name="CalculatorButton.Number">
<item name="backgroundTint">#color/...</item>
</style>
<style name="CalculatorButton.Equal">
<item name="backgroundTint">#color/...</item>
</style>
Then in your Button just refer the right style:
<com.google.android.material.button.MaterialButton
style="#style/CalculatorButton.Number"
..>

drawable start not working with material button

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"

When using Theme.MaterialComponents.Light.NoActionBar style, setting Button Background has no effect

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"
... />

Using "android:textAppearance" on TextView/EditText fails, but "style" works

This is a sample TextView in XML, which will properly apply the style TextContactContactName to the TextView.
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/photo"
android:layout_alignTop="#id/photo"
android:paddingLeft="10dp"
android:text="First Last"
style="#style/TextContactContactName"
/>
Now, I have some other things to set on this element, which are not text related. As such I tried to move the TextContactContactName and apply it via "android:textAppearance"
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/photo"
android:layout_alignTop="#id/photo"
android:paddingLeft="10dp"
android:text="First Last"
android:textAppearance=#style/TextContactContactName"
/>
Unluckily, the text formatting is not being applied.
This is how the style (stored in res/values/styles-text.xml) looks like:
<style name="TextContactContactName">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#333333</item>
<item name="android:shadowColor">#ffffff</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">1</item>
</style>
Am I using the textAppearance tag wrong?
I tested on Android 2.2 - HTC Desire.

Ok, looks like my fault. I had made a quick test:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text styled using 'style'."
style="#style/UiTestTextView"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text styled using 'textAppearance'."
android:textAppearance="#style/UiTestTextView"
/>
and the styles-text.xml:
<style name="UiTestTextView">
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">16sp</item>
<item name="android:shadowColor">#ffffff</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">3</item>
</style>
The key thing is to remember that shadow* elements are not text properties. And as such will not be applied via textAppearance.
I'm going to ask on the Android Developers Mailing list if this is desired behavior.

I filed a bug report on this issue. I think I got the standard reply "the shadow is not considered part of the text appearance".
http://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=35887