Develop Reference

How to get an icon to show up next to text in Android Material Buttons?

I'm trying to use the Material Button as developed by google. Due to a third party dependency I cannot use the androidx repository, so I'm currently using the android support library (v28.0.0-alpha1, alpha3 did not allow me to use the material button)
I'm trying to achieve this a wide button with centered text + icon next to text:
But all I can get is this, centered text with icon on the edge of the button:
This is the same as the original android button, which suffered from the same problem. The idea was that the Material Button would solve this issue, but it doesn't seem to work for me on 28.0.0-alpha1
There are solutions involving making a textview with compounddrawables and drawing a frame around it, but I'd like to stick to the material button if possible.
Anyone got a clue on how to fix this?

I'm having this issue too.
Did a bit of digging around, and found this.
There's an attribute called app:iconGravity which has two options namely start and textStart which doesn't seem to work for me, but maybe try it - that is from the GitHub repo for the Material Button.
<com.google.android.material.button.MaterialButton
android:id="#+id/material_icon_button"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/icon_button_label_enabled"
app:icon="#drawable/icon_24px"
app:iconGravity="textStart"/>
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java
(search for definition of iconGravity, it's in the beginning of the class)

Anyone got a clue on how to fix this?
Button widget is extended from TextView. So you can use ImageSpan in your case.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.AppCompat.Button.Colored"
/>
Button button = findViewById(R.id.button);
SpannableString ss = new SpannableString(" CART".toUpperCase(Locale.US));
Drawable d = VectorDrawableCompat.create(getResources(), R.drawable.ic_shopping_cart_white_24dp, getTheme());
d.setBounds(0, 0, (int) button.getTextSize(), (int) button.getTextSize()); //to make it square
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
button.setTransformationMethod(null);
button.setText(ss);
Result :

you can do customization also:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:src="#android:drawable/ic_media_play" />
<TextView
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:lines="1"
android:maxLines="1"
android:layout_toRightOf="#id/icon"
android:layout_toEndOf="#id/icon"
android:text="search"
android:textColor="#color/white"
android:textSize="16sp" />
</RelativeLayout>

Maybe not the best solution but you can add padding on the left and right side of the button. If you add the same value to both sides it will center see example images:
Images
Button
Button padding
Code
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:drawableStart="#drawable/account"
android:paddingLeft="120dp"
android:paddingRight="120dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="266dp" />
Hope it helps

<RelativeLayout
android:id="#+id/callButton"
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="18dp"
android:layout_marginRight="18dp"
android:background="#color/colorPrimaryDark">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_call"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginTop="3dp"
android:text="#string/callCentralDesk"
android:textColor="#android:color/white" />
</RelativeLayout>

Had this issue myself too.
Using Google's Material Components library, I'm currently on using androidX dependencies but from the documentation it appears you may be able to pull of the same with the support library version as well.
At first I played around with the app namespace attribute of app:iconPadding adding a negative dp amount and it appears to pull the text to the drawable and then adding a positive value of the absolute value of the icon padding (app:iconPadding=-72dp with android:paddingStart=72 this all seemed a little hacky to me so I stuck with simply adjusting paddingStart and paddingEnd until the desired result appeared.
End Result
<!--Padding Start and End Method-->
<!--This is inside a constraint layout with width being match_constraints-->
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonFoo"
style="#style/Widget.MaterialComponents.Button.IconButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:icon="#drawable/ic_my_button_icon"
android:text="#string/my_button_text"
android:paddingStart="72dp"
android:paddingEnd="72dp"/>
I'm not exactly sure that the Button.IconButton style does very much but set padding start to a system hard coded val of 12dp. But this overrides that value anyways so oh well. Your mileage may vary, but hope this helps!

Why switch's textOn and textOff are not displaying?

I am trying to make a listview with an on/off switch. I found this simple code but the problem is it is not working for me.
<Switch
android:id="#+id/itemListSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate on"
android:textOff="Vibrate off"/>
Yes, it displays a switch but the text (Vibrate on/off) is not. Only a circle that can be switched is displayed. I want to post a screenshot but i am not allowed to because i lack reputation. Can anyone tell me why because i tried to find answers but a simple code like the one above is working for them. If it helps, my Android phone version is 5.0.2. Thanks in advance!

First of all you should use SwitchCompat in order to make it compatible with all android versions and have the nice look of material design of the switch.
Back to your problem, you are missing an attribute for showing the text -app:showText -, here is an example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
...>
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="25dp"
android:checked="false"
android:textOff="OFF"
android:textOn="ON"
app:showText="true"/>
</RelativeLayout>

Correct way to remove the box of checkbox completely in API 16 and lower

I've got a problem with hiding the box of my CheckBox. My CheckBox looks like this at the moment:
<CheckBox
android:id="#+id/favoritesBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:button="#null"
android:tag="1"
android:textStyle="italic"
android:text="#string/details_tags_favs" />
The only problem here is, the button=#null is removing its style and its not completely gone. Because of that, my text is not centered but moved to the right (by box size).
Is there a smooth way to get rid of it completely in API 16 and lower?

With a little help from from Andrew T. with my RubberDuck debugging I found solution for this problem.
What you have to do is set background="#android:color/transparent on CheckBox and the invisible box will be gone from your View.
So my new CheckBox looks like this:
<CheckBox
android:id="#+id/favoritesBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:button="#null"
android:background="#android:color/transparent"
android:tag="1"
android:textStyle="italic"
android:text="#string/details_tags_favs" />

Following property work for me.
android:button="#null"

Removing the 'box' from the checkbox in Android

I am an entry level software developer, and have found tons of great answers from this site, but I can't seem to find how to hide the 'box' of a checkbox in Android. I just want the check mark to show, when a user selects an option. Here are some of the most recent things I have tried.
chkSortOrder.setBackgroundResource(android.R.color.transparent);
chkSortOrder.setBackgroundResource(android.R.drawable.checkbox_off_background);
Both of these still show the box.

put the following attribute in your checkbox tag in XML.
android:button="#android:color/transparent"

It's quite late but in any case, if it helps anyone. If you wanna set custom background to RadioButton programmatically, then you can set it like this,
checkbox.setButtonDrawable(null);
checkbox.setBackgroundResource(R.drawable.your_custom_drawable);

It's 2020! and many things have changed. But if you are struggling with this like me and tried everything here (and other solutions) with no luck, then try this one too. What I've got with other solutions came to this (Emulator, API 16):
Weird behavior! Two drawables, right is my custom box and default one on the left. And then accidentally i added this:
app:buttonCompat="#null"
and the second one is gone finally!
Here is the complete definition:
<CheckBox
android:id="#+id/cb_fs_ExactSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:gravity="center_vertical"
android:padding="5dp"
android:text="#string/fs_options_exact"
android:textColor="#color/textPrimary"
android:textSize="#dimen/textSmall"
app:buttonCompat="#null"
app:drawableRightCompat="#drawable/drw_checkbox" />
You need to set both button and buttonCompat to null.

I found this error when updating from androidx.appcompat:appcompat:1.0.0 to 1.1.0.
None of the other answers were useful to me as setting button attribute to #null or #android:color/transparent doesn't work on Android API Level 20 or lower.
What I did is to change my CheckBox to ToggleButton and set textOn and textOff attributes to an empty string
<ToggleButton
...
android:background="#drawable/custom_selector"
android:textOff=""
android:textOn="" />
This way I could update to androidx appCompat 1.1.0

You can also toggle between a CheckBox and a TextView. Just make one view visible and another one hidden. This also makes sense because the CheckBox contains paddings around the check mark.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<CheckBox
android:id="#+id/checkbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkMark="#null"
android:checked="true"
android:gravity="center_vertical"
android:paddingStart="3dp"
android:paddingLeft="3dp"
android:text="My text"
android:textColor="#color/black"
android:textSize="12sp"
/>
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My text"
android:textColor="#color/black"
android:textSize="12sp"
/>
</FrameLayout>

Android borderless buttons

I hate to be the third person to ask this, but the previous two askings haven't seemed to answer it fully. The android design guidelines detail borderless buttons, but not how to make them. In one of the previous answers, there was a sugestion to use:
style="#android:style/Widget.Holo.Button.Borderless"
This works well for a Holo theme, but I use a lot of Holo.Light as well and
style="#android:style/Widget.Holo.Light.Button.Borderless"
Does not seem to exist. Is there a way to apply a style for such borderless buttons in Holo.Light, or better yet, simply apply a borderless tag without specifying which theme it belongs in, so the app can pick the proper style at runtime?
Holo.ButtonBar seems to fit the bill for what I am looking for, except it provides no user feedback that it's been pressed.
Also, is there a place in the documentation that lists such styles that can be applied and a description of them? No matter how much I google, and search through the docs, I can't find anything. There is just a non-descriptive list if I right click and edit style.
Any help would be appreciated.
Edit: Got a perfect answer from javram, and I wanted to add some XML for anyone interested in adding the partial borders google has adopted.
Fora horizontal divider, this works great
<View
android:id="#+id/horizontal_divider_login"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/holo_blue" />
and this for a vertical one:
<View
android:id="#+id/vertical_divider"
android:layout_width="1dip"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#color/holo_blue" />

Simply add the following style attribute in your Button tag:
style="?android:attr/borderlessButtonStyle"
source: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Check out my answer here. In a nutshell the correct solution is to use the following:
android:background="?android:attr/selectableItemBackground"

At the risk of beating a dead horse, here's another (possibly better) option. AppCompat v7 defines a borderless button style. If you're already making use of the AppCompat library, just go with that:
<Button android:text="#string/borderlessButtonText" style="#style/Widget.AppCompat.Button.Borderless" />

This code will remove all background for a button:
android:background="#android:color/transparent"

Just incase anybody is looking for light-weight solution to get the borderless button for the API's that do not support the Holo theme (like I did for a long time), Im posting my solution below:
<View
android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#505154"
android:layout_marginLeft="10dp" android:layout_marginRight="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_Reply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#android:color/transparent"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:text="#string/btnReplyText"/>
<View
android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#505154"
android:layout_marginBottom="7dp" android:layout_marginTop="7dp"/>
<Button
android:id="#+id/btn_Delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:background="#android:color/transparent"
android:text="#string/btnDeleteText" />
<View
android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#505154"
android:text="#string/btnReplyText"
android:layout_marginBottom="7dp" android:layout_marginTop="7dp" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:text="#string/btnExitText"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:background="#android:color/transparent"/>
</LinearLayout>
All you have to do is change the colours and text to suit your own background. All the best!