Customize AppCompatButton drawableLeft? - android

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

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

how to align the drawable to left of text in textview?

I want to display a drawable and text in a textview. When I use below code it is displaying both but drawable is in left most side of textview.
<app.com.myapp.views.TextViewMedium
android:id="#+id/approve_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#color/color_5eba6f"
android:gravity="center"
android:drawableLeft="#drawable/approve"
android:text="#string/notification_approve"
android:textColor="#color/color_FFFFFF"
android:textSize="#dimen/dp_14" />
My text is aligned in center. I want to align drawable to left of that text.Gap between drawable and text should be just 6 dp. Is it possible to do? Or do I need to create a layout with imageview and textview to achieve the same?
Use these tags to set the image in your textView.
android:drawableLeft="#drawable/your_image"
android:drawablePadding="6dp"
Hope this helps!
This can be possible way :
<TextView
android:id="#+id/etName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:background="#drawable/edittext"
android:drawableLeft="#mipmap/icon_username"
android:drawablePadding="6dp"
android:gravity="fill_horizontal|fill|left"
android:padding="5dp"
android:singleLine="true"
android:textSize="15dp"
android:windowSoftInputMode="stateAlwaysHidden" />
Try this
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Text"
android:id="#+id/handling"
android:textSize="20dp"
android:drawableLeft="#drawable/emoticons_bear"
android:drawablePadding="6dp"/>
You need to use drawableLeft attribute as below:
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/userFname"
android:drawableLeft="#drawable/user_name"
android:drawablePadding="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:textSize="16sp"
android:textColor="#android:color/white"
/>
to do that you must use relative layout like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!--Your text view-->
<TextView
android:id="#+id/myText"/>
<!--Your image view-->
<ImageView
android:layout_toLeftOf="#+id/myText"
android:padding_right="6dp"/>
</RlativeLayout>
with that code you ImageView is forced to be at the left of your TextView and by 6dp spacing
Don't forget you must use relativeLayout as a parent layout so you can use toLeftOf
This is possible way to do it
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Text"
android:id="#+id/yourTextView"
android:textSize="12sp"
android:drawableLeft="#drawable/yourDrawable"
android:drawablePadding="6dp"/>
If not satisfies your demands you must use separate ImageView and TextView i think.. Hope to help you!

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

Image + Text to be centre alligned in button

I have a Button with its width as match_parent. And I want a image/icon with a text in its center. I have triedandroid:drawableStart attribute but its of no help. I don't know what I am missing. Is there any one who is also facing the same problem.
Note:This link is not solving my problem. I am attaching my button portion of xml
<Button
android:background="#drawable/blue_button"
android:id="#+id/btn_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableStart="#drawable/ic_list"
android:text="#string/btn_schedule"
android:textColor="#android:color/white" />
After adding these attribute my text is coming on center but image/icon is still on left side of button. Can any body help!!!
You might want to check my answer to this question:
Android Button with text and image
Its an ugly solution but it you want the image and text to be centered as a group in the button rather than text center and drawable padded from the side then its the only way I have found.
100% working
<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#null"
android:clickable="false"
android:drawableLeft="#android:drawable/ic_delete"
android:focusable="false"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Button Challenge" />
from here
This works for me. Basically play with the paddingLeft and PaddingRight of the button to get the text and image close together to the center.
Note: Might be an issue with rather long texts.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="search button"
android:drawableStart="#drawable/ic_action_search"
android:paddingLeft="60dp"
android:paddingRight="60dp"/>
</LinearLayout>
I had the same problem and I hadn't found anywhere clear solution. BUT I got some information which also help me to provide following solutions (I have chosen the second one):
Create image which will contain your image and text
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
It is not so clear and you have to add more complicated changes to your layout but it is easier to modify the text later
<FrameLayout
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_height="50dp"
android:layout_width="match_parent" />
<TextView
android:text="sample"
android:layout_height="50dp"
android:layout_width="wrap_content"
android:drawableLeft="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
</FrameLayout>
I tried android:drawableTop
The image shown in the center of the button

How to center image and text in a RadioButton?

I have two custom RadioButtons side by side that fill the width of the screen. I want to have text and an image to the right of the text, centered in the button.
drawableRight draws the image way off to the right of the button, not near the text. I can't use drawableEnd because I don't have Android 4.0
I've tried using a Spannable, but the problem with that is that the image is bigger than the text. I don't want it aligned with the bottom or baseline of the text; I want it to be centered in the button on its own.
The best solution I've found is making a clickable RelativeLayout with a TextView and ImageView centered in it. This makes the button look the way I want it to, but it seems like a lot of work to do that, and to program each RelativeLayout to act like a RadioButton in a RadioGroup.
Is there an easier way, or something that I'm missing? Or should I keep my RelativeLayout idea? Here's my xml for this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/first_relativelayout"
android:clickable="true"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/first_textview"
android:text="#string/first_radiobutton_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:textColor="#android:color/white"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/first_imageview"
android:layout_centerVertical="true"
android:src="#drawable/it"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/first_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/second_relativelayout"
android:clickable="true"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/second_textview"
android:text="#string/second_radiobutton_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:textColor="#android:color/white"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/second_imageview"
android:layout_centerVertical="true"
android:src="#drawable/it"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/second_textview">
</ImageView>
</RelativeLayout>
</LinearLayout>
I kept going with the RelativeLayout solution. It takes more work than it seems should be worth it, but it works perfectly.

Categories

Resources