How to set padding for radio button in Android - android

I am using the default radio button without any customization. I would like to add padding to the left of the button icon. I have tried padding-left, but it is only changing the space between the icon and text.
I know it can easily achieve by using the drawable left and setting the button null, but it could lose the animation and default style.
My code
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/rb_bank"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_payment_method"
android:buttonTint="#color/colorPrimaryDark"
android:padding="15dp"
android:text="#string/bank"
android:textColor="#color/textColorSecondary"
android:textSize="16sp" />
Current output

you can wrap the material button in a LinearLayout, set your background android:background="#drawable/bg_payment_method" to the LinearLayout and give
margin_left to the radioButton
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_payment_method" >
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/rb_bank"
android:layout_marginLeft="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:buttonTint="#color/colorPrimaryDark"
android:text="#string/bank"
android:textColor="#color/textColorSecondary"
android:textSize="16sp" />
</LinearLayout>

Related

Start Button from Right to Left Instead of Left to Right

I am trying to make it so that the Button in the LinearLayout starts from the right side and to set the Button 5dp from the right edge of the LinearLayout, with the TextView showing to the left of the button. Currently, it only allows to set the button from the "left" edge of the linear layout. I've tried all sorts of ways but nothing seems to work.
<LinearLayout
android:id="#+id/remote_button_layout"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="30dp"
android:background="#drawable/btn_remote_button"
android:orientation="horizontal">
<TextView
android:text="Example Text"
android:textSize="10sp"
android:fontFamily="#font/mmedium"
android:textAllCaps="false"
android:layout_width="125dp"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#android:color/secondary_text_light"/>
<Button
android:id="#+id/btn_remote_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:background="#drawable/btn_remote_button"
android:drawableStart="#drawable/logo"
app:layout_constraintHorizontal_bias="1.0" />
</LinearLayout>
You have to add android:gravity="right" in Layout. So all the inner widgets will be set from right to left manner. Like below.
<LinearLayout
android:id="#+id/remote_button_layout"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="30dp"
android:gravity="right
android:background="#drawable/btn_remote_button"
android:orientation="horizontal">
Use layoutGravity tag in your xml as (right, left)
You can set android:layout_weight=1 parametr to TextView
Use this android:layout_gravity as (left,right) you can refer this link What is the difference between gravity and layout_gravity in Android?
In your case you can just change add the android:gravity="right" attribute in your LinearLayout.
<LinearLayout
android:gravity="right"
Before:
After:
You can also consider to do something different using a MaterialButton adding the text and the icon.
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/..."
app:iconGravity="end"
android:text="#string/..."/>

Space between textview and drawable icon

I'm facing problems with the position of an icon. I've set that icon as drawableLeft of a TextView, this is working fine but, if I set the TextView's gravity to center_horizontal, then a padding space appears between the icon and the text. The code is as follows:
<TextView
style="#style/BaseText.White.Bold"
android:gravity="center_horizontal"
android:drawableStart="#drawable/ic_text"
android:drawableLeft="#drawable/ic_text"
android:text="#string/text"
android:layout_marginBottom="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_big"
android:layout_marginLeft="#dimen/margin_big"
android:padding="0dp"
android:drawablePadding="0dp"/>
What do I have to do to ensure that the icon is shown at the text's left side but horizontally centered?
I've make two screenshots to show you the difference when adding or removing the icon's gravity.
When the textview's gravity is not set, the result is as follows:
But, when the gravity is added, then a padding appears between the text and the icon:
Thanks in advance
Only add android:drawablePadding="10dp" field in your text view refer the coad
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Add New Address"
android:textAppearance="#style/Title"
android:id="#+id/tvAddNewAddress"
android:drawablePadding="20dp"
android:layout_weight="1"
android:padding="5dp"
android:textColor="#color/colorAccent"
android:drawableStart="#android:drawable/arrow_down_float"
/>
Try to give android:gravity="center" to Text View. Also add android:layout_width="wrap_content" and android:layout_height="wrap_content" properties in Text View.
Refer this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:drawableLeft="#mipmap/ic_launcher"
android:drawablePadding="0dp"
android:drawableStart="#mipmap/ic_launcher"
android:gravity="center"
android:textSize="22sp"
android:padding="0dp"
android:text="TestingTestingTestingTestingTestingTestingTestingTestingTesting" />
</RelativeLayout>
This is what it showing.

Customize AppCompatButton drawableLeft?

How can I place drawableLeft and button text of AppCompatButton like in the image below?
I have tried to apply paddingLeft, but the text is moving away from the drawable to the right.
<android.support.v7.widget.AppCompatButton
android:id="#+id/filterBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_btn_filter"
android:paddingLeft="20dp"
android:text="#string/filter_by"
android:textAllCaps="false" />
And so far the result is looking like
Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/profileHeader"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp">
<android.support.v7.widget.AppCompatButton
android:id="#+id/findFriends"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_btn_search"
android:text="#string/find_friends"
android:textAllCaps="false" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/filterBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_btn_filter"
android:text="#string/filter_by"
android:textAllCaps="false" />
</LinearLayout>
And the interpreted requirement for making things clear.
Using layout_weight property am adjusting the width of both buttons and what i have to do is, the text should be in center of the button
and the drawable should be aligned near left of the text.
Any suggestion please?
use
android:drawablePadding=""
probably you can't, if you want like this then you have to make it using complex layout like this see

Android button with icon and text

I have some buttons like this in my app:
<Button
android:id="#+id/bSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Search"
android:textSize="24sp" />
I'm trying to create a same button with text and a icon.
android:drawableLeft doesn't work for me (Maybe it would, but i don't know how to set a max height to the icon).
So i created a LinearLayout with a ImageView and a TextView and made it act like a button:
<LinearLayout
android:id="#+id/bSearch2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/btn_default"
android:clickable="true"
android:padding="16dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:adjustViewBounds="true"
android:maxHeight="30dp"
android:maxWidth="30dp"
android:scaleType="fitCenter"
android:src="#drawable/search_icon" />
<TextView
android:id="#+id/tvSearchCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="24sp"
android:paddingRight="30dp"
android:gravity="center"
android:text="Search" />
</LinearLayout>
My new button is exactly what i want (font size, icon and text placement).
But it doesn't look like my default buttons:
So i tried, to change the background and the text color of my new Button:
Button Search = (Button) findViewById(R.id.bSearch);
LinearLayout bSearch2 = (LinearLayout) findViewById(R.id.bSearch2);
bSearch2.setBackground(bSearch.getBackground());
TextView tvSearchCaption = (TextView)findViewById(R.id.tvSearchCaption);
tvSearchCaption.setTextColor(bSearch.getTextColors().getDefaultColor());
This gives a strange result, my old button, gets messed up:
When i change the order of these two buttons in the XML, so the "new button" goes first, it makes another strange result:
Now i noticed, that when i try to press the old button, the new one gets pressed.
Any ideas?
Try this one.
<Button
android:id="#+id/bSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Search"
android:drawableLeft="#android:drawable/ic_menu_search"
android:textSize="24sp"/>
To add an image to left, right, top or bottom, you can use attributes like this:
android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom
The sample code is given above. You can also achieve this using relative layout.
You can use the Material Components Library and the MaterialButton component.
Use the app:icon and app:iconGravity="start" attributes.
Something like:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/..."
app:iconGravity="start"
../>
For anyone looking to do this dynamically then setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) on the buttons object will assist.
Sample
Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawablesWithIntrinsicBounds('your_drawable',null,null,null);
This is what you really want.
<Button
android:id="#+id/settings"
android:layout_width="190dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#color/colorAccent"
android:drawableStart="#drawable/ic_settings_black_24dp"
android:paddingStart="40dp"
android:paddingEnd="40dp"
android:text="settings"
android:textColor="#FFF" />
#Liem Vo's answer is correct if you are using android.widget.Button without any overriding. If you are overriding your theme using MaterialComponents, this will not solve the issue.
So if you are
Using com.google.android.material.button.MaterialButton
or
Overriding AppTheme using MaterialComponents
Use app:icon parameter.
<Button
android:id="#+id/bSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Search"
android:textSize="24sp"
app:icon="#android:drawable/ic_menu_search" />
What about like this?
<Button
android:id="#+id/yourID"
android:drawableStart="#drawable/ic_flag"
android:textColor="#FFFFFF"
android:textSize="12sp"
android:textStyle="bold"
android:textAlignment="textStart"
android:background="#drawable/btn_background"
android:fontFamily="#font/YourFont"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text" />
try It:-
position-> left,right,top,bottom
android:drawableposition="#android:drawable/-yourImage-"
android:drawabletop="-Yourfilesrc-"
android:drawablebottom="-Yourfilesrc-"
android:drawableleft="-Yourfilesrc-"
android:drawableright="-Yourfilesrc-"
I was experiencing the same problem with pure Button view. In my case XML solution was not usefull, because I have some logic to show/hide this icon.
There is one more solution using pure Kotlin:
(bSearch as? MaterialButton)?.let {
icon = AppCompatResources.getDrawable(context, R.drawable.search_icon)
iconGravity = MaterialButton.ICON_GRAVITY_START
}
P.S. We can cast Button to MaterialButton as fair as we can use icon param in Button: icon param is not actually Button param - it is sneaky MaterialButton param somehow working with Buttons.

Positioning text within button in Android

I have a button with a symbol of an arrow. Besides, I want to have some margin between the button and the adjacent elements:
<Button
android:id="#+id/TSPrev"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_margin="10dp"
android:background="#android:color/holo_orange_light"
android:text="#string/left"
android:textSize="60sp" />
However, when I do this, the arrow appears like this:
How can I keep the text centered vertically when I have margins? Without them, the button text appears correctly.
Thanks
May be This will Help You :
<Button
android:id="#+id/notification"
style="#style/Wrap"
android:layout_margin="8dp"
android:background="#drawable/red_shape_corner"
android:drawableRight="#drawable/notification_bell"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/str_notification"
android:textColor="#android:color/white" />
You Need to use
// Nothing but Image like Arrow etc.
android:drawableRight="#drawable/notification_bell"
// Here you can put you text
android:text="#string/str_notification"
Try using android:gravity="center".
android:gravity attribute documentation

Categories

Resources