How to center icon and text in a android button with width set to fill parent

Question

I want to have an Android Button with icon text centered inside it  I m using the drawableLeft attribute to set the image  this works well if the button has a width of  wrap content  but I need to stretch to max width so I use width  fill parent   This moves my icon straight to the left of the button and I want both icon and text centered inside the button    I ve try setting up the padding but this only allows to give a fixed value so it is not what I need  I need to have icon text aligned in the center    lt Button      android id    id startTelemoteButton       android text   string start telemote      android drawableLeft   drawable start      android paddingLeft  20dip      android paddingRight  20dip                  android width  fill parent      android heigh  wrap content    gt    Any suggestions on how I could achieve that

User · Answer

Try to use this library   OmegaCenterIconButton

User · Answer

My way of solving it involved surrounding the the button with lightweight   lt View     gt  elements that resize dynamically  Below are several examples of what can be achieved with this     Note that the clickable area of the buttons in example 3 is the same as in 2  i e  with spaces   which is different from example 4 where there are no  unclickable  gaps in between   Code    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical  gt       lt TextView         android layout marginStart  5dp          android layout marginLeft  5dp          android layout marginTop  10dp          android layout marginBottom  5dp          android layout width  match parent          android layout height  wrap content          android textStyle  bold          android text  Example 1  Button with a background color    gt       lt LinearLayout         android layout width  match parent          android layout height  wrap content  gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  20dp              android paddingEnd  20dp              android layout weight  0 3   gt           lt  -- Play around with the above 3 values to modify the clickable               area and image alignment with respect to text -- gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt       lt  LinearLayout gt        lt TextView         android layout marginStart  5dp          android layout marginLeft  5dp          android layout marginTop  20dp          android layout marginBottom  5dp          android layout width  match parent          android layout height  wrap content          android textStyle  bold          android text  Example 2  Button group   transparent layout   spacers    gt       lt LinearLayout         android layout width  match parent          android layout height  wrap content  gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt       lt  LinearLayout gt        lt TextView         android layout marginStart  5dp          android layout marginLeft  5dp          android layout marginTop  20dp          android layout marginBottom  5dp          android layout width  match parent          android layout height  wrap content          android textStyle  bold          android text  Example 3  Button group   colored layout    gt       lt LinearLayout         android layout width  match parent          android layout height  wrap content          android background   android color darker gray  gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             style   android attr buttonBarButtonStyle              android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             style   android attr buttonBarButtonStyle              android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt           lt Button             style   android attr buttonBarButtonStyle              android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt View             android layout width  0dp              android layout height  match parent              android layout weight  1   gt       lt  LinearLayout gt        lt TextView         android layout marginStart  5dp          android layout marginLeft  5dp          android layout marginTop  20dp          android layout marginBottom  5dp          android layout width  match parent          android layout height  wrap content          android textStyle  bold          android text  Example 4  reference   Button group   no spacers    gt       lt LinearLayout         android layout width  match parent          android layout height  wrap content          android background   android color darker gray  gt           lt Button             style   android attr buttonBarButtonStyle              android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt Button             style   android attr buttonBarButtonStyle              android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt           lt Button             style   android attr buttonBarButtonStyle              android layout width  wrap content              android layout height  wrap content              android text  Button              android textColor   android color white              android drawableLeft   android drawable ic secure              android drawableStart   android drawable ic secure              android background   android color darker gray              android paddingStart  10dp              android paddingEnd  10dp              android layout weight  1   gt          lt  LinearLayout gt   lt  LinearLayout gt

User · Answer

What happens if you try android gravity  center horizontal

User · Answer

All the previous answers seem to be outdated You can use the MaterialButton now which lets setting the icon gravity    lt com google android material button MaterialButton         android id  quot   id btnDownloadPdf quot          android layout width  quot 0dp quot          android layout height  quot 56dp quot          android layout margin  quot 16dp quot          android gravity  quot center quot          android textAllCaps  quot true quot          app backgroundTint  quot  fc0 quot          app icon  quot  drawable ic pdf quot          app iconGravity  quot textStart quot          app iconPadding  quot 10dp quot          app iconTint  quot  f00 quot          app layout constraintBottom toBottomOf  quot parent quot          app layout constraintEnd toEndOf  quot parent quot          app layout constraintStart toStartOf  quot parent quot          tools text  quot Download Pdf quot    gt    For using the material components you will obviously need to  Add a dependency implementation  com google android material material 1 3 0-alpha01   use latest version  Make your theme extend Material Components theme  lt style name  quot AppTheme quot  parent  quot Theme MaterialComponents Light quot  gt       lt  style gt   In case you cannot do so  extend it from the Material Bridge theme  lt style name  quot AppTheme quot  parent  quot Theme MaterialComponents Light Bridge quot  gt       lt  style gt

User · Answer

public class DrawableCenterTextView extends TextView    public DrawableCenterTextView Context context  AttributeSet attrs          int defStyle        super context  attrs  defStyle      public DrawableCenterTextView Context context  AttributeSet attrs        super context  attrs      public DrawableCenterTextView Context context        super context       Override protected void onDraw Canvas canvas        Drawable   drawables   getCompoundDrawables        if  drawables    null            Drawable drawableLeft   drawables 0           Drawable drawableRight   drawables 2           if  drawableLeft    null    drawableRight    null                float textWidth   getPaint   measureText getText   toString                 int drawablePadding   getCompoundDrawablePadding                int drawableWidth   0              if  drawableLeft    null                  drawableWidth   drawableLeft getIntrinsicWidth                else if  drawableRight    null                    drawableWidth   drawableRight getIntrinsicWidth                              float bodyWidth   textWidth   drawableWidth   drawablePadding              canvas translate  getWidth   - bodyWidth    2  0                       super onDraw canvas

User · Answer

lt style name  captionOnly  gt       lt item name  android background  gt  null lt  item gt       lt item name  android clickable  gt false lt  item gt       lt item name  android focusable  gt false lt  item gt       lt item name  android minHeight  gt 0dp lt  item gt       lt item name  android minWidth  gt 0dp lt  item gt   lt  style gt    lt FrameLayout    style   android attr buttonStyle     android layout width  match parent     android layout height  wrap content   gt        lt Button        style   style captionOnly         android layout width  wrap content         android layout height  wrap content         android layout gravity  center         android drawableLeft   android drawable ic delete         android gravity  center         android text  Button Challenge    gt   lt  FrameLayout gt    Put the FrameLayout in LinearLayout and set orientation to Horizontal

User · Answer

I know I am late in answering this question  but this helped me    lt FrameLayout             android layout width  match parent              android layout height  35dp              android layout marginBottom  5dp              android layout marginTop  10dp              android background   color fb   gt                lt Button                 android id    id fbLogin                  android layout width  wrap content                  android layout height  match parent                  android layout gravity  center                  android background   null                  android drawableLeft   drawable ic facebook                  android gravity  center                  android minHeight  0dp                  android minWidth  0dp                  android text  FACEBOOK                  android textColor   android color white    gt           lt  FrameLayout gt    I found this solution from here  Android UI struggles  making a button with centered text and icon

User · Answer

Try this you will find what you are looking for    lt Button    android id  quot   id button my profile quot     style  quot  style whiteTextBlackButtonStyle size18 quot     android layout width  quot 0dp quot     android layout weight  quot 1 quot     android layout height  quot wrap content quot     android gravity  quot center quot     android drawableTop  quot  drawable ic more profile quot     android drawablePadding  quot 8dp quot     android paddingStart  quot 16dp quot     android text  quot  string title my profile quot     android textAllCaps  quot false quot     tools layout editor absoluteY  quot 24dp quot    gt

User · Answer

I used LinearLayout instead of Button  The OnClickListener  which I need to use works fine also for LinearLayout    lt LinearLayout     android id    id my button      android layout width  match parent      android layout height  wrap content      android background   drawable selector      android gravity  center      android orientation  horizontal      android clickable  true  gt        lt ImageView         android layout width  wrap content          android layout height  wrap content          android layout marginRight  15dp          android adjustViewBounds  true          android scaleType  fitCenter          android src   drawable icon    gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android gravity  center          android text  Text    gt    lt  LinearLayout gt

User · Answer

I recently bumped into the same problem  Tried to find a cheaper solution so came up with this       lt LinearLayout         android id    id linearButton          android layout width  match parent          android layout height  match parent          android background   drawable selector button translucent ab color          android clickable  true          android descendantFocusability  blocksDescendants          android gravity  center          android orientation  horizontal   gt            lt ImageView             android layout width  wrap content              android layout height  wrap content              android contentDescription   string app name              android src   drawable ic launcher    gt            lt TextView             android layout width  wrap content              android layout height  wrap content              android text   string app name              android textColor   android color white    gt       lt  LinearLayout gt    Then just call the OnClickListener on LinearLayout   Hope this helps someone as it seems like a very common problem

User · Answer

I think android gravity   centre  should work

User · Answer

I have centered textView with icon using paddingLeft and and aligning textView to left centerVertical  and for a small gap between view and icon i used drawablePadding            lt Button             android id    id have it main              android layout width  match parent              android layout height  wrap content              android background   drawable textbox              android drawableLeft   drawable have it              android drawablePadding  30dp              android gravity  left center vertical              android paddingLeft  60dp              android text  Owner Contact              android textColor   android color white    gt

User · Answer

Use RelativeLayout  container  and android layout centerHorizontal  true   my sample                     lt RelativeLayout                     android layout width  0dp                      android layout height  match parent                      android layout weight  1   gt                        lt CheckBox                         android layout width  wrap content                          android layout height  match parent                          android layout centerHorizontal  true                          android layout gravity  center                          android layout marginBottom  5dp                          android layout marginLeft  10dp                          android layout marginTop  5dp                          android button   drawable bg fav detail                          android drawablePadding  5dp                          android text   Favorite    gt                   lt  RelativeLayout gt

User · Answer

This is my solution I wrote 3 years ago  Button has text and left icon and is in frame that is actual button here and can be stretched by fill parent  I cannot test it again but it was working back then  Probably Button don t have to be used and can be replaced by TextView but I will not test it right now and it doesn t change functionality too much here    lt FrameLayout     android id    id login button login      android background   drawable apptheme btn default holo dark      android layout width  fill parent      android layout gravity  center      android layout height  40dp  gt       lt Button         android clickable  false          android drawablePadding  15dp          android layout gravity  center          style   style WhiteText Small Bold          android drawableLeft   drawable lock          android background   color transparent          android text  LOGIN    gt   lt  FrameLayout gt

User · Answer

I adjust it by adding padding left and right as follows    lt Button             android layout width  0dp              android layout height  wrap content              android layout weight  1              android id    id btn facebookact like              android text   string btn facebookact like              android textColor   color black              android textAllCaps  false              android background   color white              android drawableStart   drawable like              android drawableLeft   drawable like              android gravity  center              android layout gravity  center              android paddingLeft  40dp              android paddingRight  40dp                gt

User · Answer

android drawableLeft is always keeping android paddingLeft as a distance from the left border  When the button is not set to android width  wrap content   it will always hang to the left   With Android 4 0  API level 14  you can use android drawableStart attribute to place a drawable at the start of the text  The only backward compatible solution I ve come up with is using an ImageSpan to create a Text Image Spannable   Button button    Button  findViewById R id button   Spannable buttonLabel   new SpannableString   Button Text    buttonLabel setSpan new ImageSpan getApplicationContext    R drawable icon            ImageSpan ALIGN BOTTOM   0  1  Spannable SPAN EXCLUSIVE EXCLUSIVE   button setText buttonLabel     In my case I needed to also adjust the android gravity attribute of the Button to make it look centered    lt Button   android id    id button    android layout width  wrap content    android layout height  wrap content    android minHeight  32dp    android minWidth  150dp    android gravity  center horizontal top    gt

User · Answer

This may be an old closed thread but I ve search everywhere didnt find something useful  until I decided to create my own solution  If theres anyone here trying to look for answer try this one  might save you a minute of thinking             lt LinearLayout             android id    id llContainer              android layout width  match parent              android layout height  match parent              android background   drawable selector              android clickable  true              android gravity  center              android orientation  vertical              android padding  10dp              android textStyle  bold  gt                lt TextView                 android layout width  wrap content                  android layout height  wrap content                  android gravity  center                  android text  This is a text    gt                lt ImageView                 android layout width  wrap content                  android layout height  wrap content                  android src   drawable icon image   gt             lt  LinearLayout gt    Because Linear layout act as the container and the one who has the selector  when you click the entire linear layout it would look just how it should it be  if you want it to be both centered  use relative insteaf  If you want it centered horizontally change the orientation to horizontal    Take note  DO NOT forget to add android clickable  true  to your main container  relative or linear  for the action to take place    Again this may be old thread but may still help someone there   -cheers hope it helps- happycodings

User · Answer

Other possibility to keep Button theme    lt Button             android id    id pf bt edit              android layout height   dimen standard height              android layout width  match parent                gt            lt LinearLayout             android layout width  0dp              android layout height  0dp              android layout alignBottom   id pf bt edit              android layout alignLeft   id pf bt edit              android layout alignRight   id pf bt edit              android layout alignTop   id pf bt edit              android layout margin   dimen margin 10              android clickable  false              android elevation  20dp              android gravity  center              android orientation  horizontal               gt                lt ImageView                 android layout width  wrap content                  android layout height  match parent                  android adjustViewBounds  true                  android clickable  false                  android src   drawable ic edit white 48dp   gt                lt TextView                 android id    id pf tv edit                  android layout width  wrap content                  android layout height  match parent                  android layout marginLeft   dimen margin 5                  android clickable  false                  android gravity  center                  android text   string pf bt edit   gt            lt  LinearLayout gt    With this solution if your add   color your color  color your highlight color  in your activity theme  you can have Matherial theme on Lollipop whith shadow and ripple  and for previous version flat button with your color and highlight coor when you press it   Moreover  with this solution autoresize of picture  Result    First on Lollipop device Second   On pre lollipop device 3th   Pre lollipop device press button

User · Answer

I know this question is a bit older  but perhaps you re still open for hints or workarounds   Create a RelativeLayout  wrap content  with the button image as the background or the button itself as the first element of the layout  Get a LinearLayout and set it to  layout centerInParent  and  wrap content   Then set your Drawable as an Imageview  At last set a TextView with your text  locale    so basically you have this structure   RelativeLayout   Button     LinearLayout       ImageView       TextView   or like this   RelativeLayout with  android-specific  button image as background   LinearLayout     ImageView     TextView   I know with this solution there are many elements to deal with  but you can create very easy your own custom button with it and also set the exact position of text and drawables

User · Answer

Had similar issue but wanted to have center drawable with no text and no wrapped layouts  Solution was to create custom button and add one more drawable in addition to LEFT  RIGHT  TOP  BOTTOM  One can easily modify drawable placement and have it in desired position relative to text   CenterDrawableButton java  public class CenterDrawableButton extends Button       private Drawable mDrawableCenter       public CenterDrawableButton Context context            super context           init context  null              public CenterDrawableButton Context context  AttributeSet attrs            super context  attrs           init context  attrs              public CenterDrawableButton Context context  AttributeSet attrs  int defStyleAttr            super context  attrs  defStyleAttr           init context  attrs               TargetApi Build VERSION CODES LOLLIPOP      public CenterDrawableButton Context context  AttributeSet attrs  int defStyleAttr  int defStyleRes            super context  attrs  defStyleAttr  defStyleRes           init context  attrs               private void init Context context  AttributeSet attrs             if  isInEditMode    return          if attrs  null               TypedArray a   context getTheme   obtainStyledAttributes                      attrs  R styleable CenterDrawableButton  0  0                try                   setCenterDrawable a getDrawable R styleable CenterDrawableButton drawableCenter                   finally                   a recycle                                        public void setCenterDrawable int center            if center  0               setCenterDrawable null            else         setCenterDrawable getContext   getResources   getDrawable center              public void setCenterDrawable  Nullable Drawable center            int   state          state   getDrawableState            if  center    null                center setState state               center setBounds 0  0  center getIntrinsicWidth    center getIntrinsicHeight                 center setCallback this                     mDrawableCenter   center          invalidate            requestLayout               Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec            super onMeasure widthMeasureSpec  heightMeasureSpec           if mDrawableCenter  null                setMeasuredDimension Math max getMeasuredWidth    mDrawableCenter getIntrinsicWidth                         Math max getMeasuredHeight    mDrawableCenter getIntrinsicHeight                           Override     protected void drawableStateChanged             super drawableStateChanged            if  mDrawableCenter    null                int   state   getDrawableState                mDrawableCenter setState state               mDrawableCenter setBounds 0  0  mDrawableCenter getIntrinsicWidth                        mDrawableCenter getIntrinsicHeight                       invalidate                Override     protected void onDraw  NonNull Canvas canvas            super onDraw canvas            if  mDrawableCenter    null                Rect rect   mDrawableCenter getBounds                canvas save                canvas translate getWidth     2 - rect right   2  getHeight     2 - rect bottom   2               mDrawableCenter draw canvas               canvas restore                        attrs xml   lt resources gt       lt attr name  drawableCenter  format  reference   gt       lt declare-styleable name  CenterDrawableButton  gt           lt attr name  drawableCenter   gt       lt  declare-styleable gt   lt  resources gt    usage   lt com virtoos android view custom CenterDrawableButton             android id   id centerDrawableButton              android layout width  wrap content              android layout height  wrap content              app drawableCenter   android drawable ic menu info details   gt

User · Answer

As suggested by Rodja  prior to 4 0 there isn t a direct way to center the text with the drawable  And indeed setting a padding left value does move the drawable away from the border  Therefore my suggestion is that on runtime you calculate exactly how many pixels from the left border your drawable needs to be and then pass it using setPadding  Your calculation may be something like  int paddingLeft    button getWidth   - drawableWidth - textWidth    2    The width of your drawable s is fixed and you can look it up and you can also calculate or guess the text width   Finally  you would need to multiple the padding value by the screen density  which you can do using DisplayMetrics

User · Answer

You could put the button over a LinearLayout   lt RelativeLayout         android layout width  match parent          android layout height   dimen activity login fb height          android background   mipmap bg btn fb  gt           lt LinearLayout             android layout width  match parent              android layout height  match parent              android gravity  center  gt               lt TextView                 android layout width  wrap content                  android layout height  wrap content                  android id    id lblLoginFb                  android textColor   color white                  android drawableLeft   mipmap icon fb                  android textSize   dimen activity login fb textSize                  android text  Login with Facebook                  android gravity  center    gt           lt  LinearLayout gt           lt Button             android layout width  match parent              android layout height  match parent              android id    id btnLoginFb              android background   color transparent                gt       lt  RelativeLayout gt

User · Answer

You can create a custom widget   The Java class IButton   public class IButton extends RelativeLayout    private RelativeLayout layout  private ImageView image  private TextView text   public IButton Context context        this context  null      public IButton Context context  AttributeSet attrs        this context  attrs  0      public IButton Context context  AttributeSet attrs  int defStyle        super context  attrs  defStyle        LayoutInflater inflater    LayoutInflater  context              getSystemService Context LAYOUT INFLATER SERVICE       View view   inflater inflate R layout ibutton  this  true        layout    RelativeLayout  view findViewById R id btn layout        image    ImageView  view findViewById R id btn icon       text    TextView  view findViewById R id btn text        if  attrs    null            TypedArray attributes   context obtainStyledAttributes attrs R styleable IButtonStyle            Drawable drawable   attributes getDrawable R styleable IButtonStyle button icon           if drawable    null                image setImageDrawable drawable                      String str   attributes getString R styleable IButtonStyle button text           text setText str            attributes recycle               Override public void setOnClickListener final OnClickListener l        super setOnClickListener l       layout setOnClickListener l      public void setDrawable int resId        image setImageResource resId          The layout ibutton xml    lt RelativeLayout xmlns android  http   schemas android com apk res android  android id    id btn layout  android layout width  match parent  android layout height  match parent  android clickable  true   gt    lt ImageView     android id    id btn icon      android layout width  wrap content      android layout height  fill parent      android layout marginRight  2dp      android layout toLeftOf    id btn text      android duplicateParentState  true    gt    lt TextView     android id    id btn text      android layout width  wrap content      android layout height  fill parent      android layout centerInParent  true      android duplicateParentState  true      android gravity  center vertical      android textColor   000000    gt   lt  RelativeLayout gt    In order to use this custom widget    lt com test android widgets IButton      android id    id new       android layout width  fill parent                android layout height   dimen button height       ibutton button text   string btn new       ibutton button icon   drawable ic action new    gt    You have to provide the namespace for the custom attributes xmlns ibutton  http   schemas android com apk res com test android xxx  where com test android xxx is the root package of the application   Just put it below xmlns android  http   schemas android com apk res android    The last thing you gonna need are the custom attributes in the attrs xml   In the attrs xml   lt  xml version  1 0  encoding  utf-8   gt   lt resources gt        lt declare-styleable name  IButtonStyle  gt           lt attr name  button text    gt           lt attr name  button icon  format  integer    gt       lt  declare-styleable gt        lt attr name  button text    gt    lt  resources gt    For better positioning  wrap the custom Button inside a LinearLayout  if you want to avoid potential problems with RelativeLayout positionings   Enjoy

User · Answer

I have seen solutions for aligning drawable at start left but nothing for drawable end right  so I came up with this solution  It uses dynamically calculated paddings for aligning drawable and text on both left and right side   class IconButton  JvmOverloads constructor      context  Context      attrs  AttributeSet    null      defStyle  Int   R attr buttonStyle     AppCompatButton context  attrs  defStyle         init           maxLines   1            override fun onDraw canvas  Canvas            val buttonContentWidth    width - paddingLeft - paddingRight  toFloat            val textWidth   paint measureText text toString             val drawable   compoundDrawables 0     compoundDrawables 2          val drawableWidth   drawable  intrinsicWidth    0         val drawablePadding   if  textWidth  gt  0  amp  amp  drawable    null  compoundDrawablePadding else 0         val bodyWidth   textWidth   drawableWidth toFloat     drawablePadding toFloat            canvas save            val padding    buttonContentWidth - bodyWidth  toInt     2         val leftOrRight   if  compoundDrawables 0     null  1 else -1         setPadding leftOrRight   padding  0  -leftOrRight   padding  0           super onDraw canvas          canvas restore             It is important to set gravity in your layout to either  center vertical start  or  center vertical end  depending on where do you set the icon  For example    lt com stackoverflow util IconButton         android id    id cancel btn          android layout width  0dp          android layout height  wrap content          android layout weight  1          android drawableStart   drawable cancel          android drawablePadding   dimen padding small          android gravity  center vertical start          android text  Cancel    gt    Only problem with this implementation is that button can only have single line of text  otherwise the area of the text fills the button and paddings will be 0

User · Answer

If you use one of custom view s solutions  be careful  because they often fail on long or multiline text  I rewrote some answers  replaced onDraw   and understood that that was a wrong way

User · Answer

Dirty fix   android paddingTop  10dp  android drawableTop   drawable ic src    Figuring right padding solve the purpose  However  for varied screen  use different padding and put that in dimens resource in respective value folder

User · Answer

You could use a custom button which measures and draws itself to accomodate a left drawable  Please find example and usage here  public class DrawableAlignedButton extends Button        public DrawableAlignedButton Context context  AttributeSet attrs        super context  attrs      public DrawableAlignedButton Context context        super context      public DrawableAlignedButton Context context  AttributeSet attrs  int style        super context  attrs  style      private Drawable mLeftDrawable    Override       Overriden to work only with a left drawable  public void setCompoundDrawablesWithIntrinsicBounds Drawable left          Drawable top  Drawable right  Drawable bottom        if left    null  return      left setBounds 0  0  left getIntrinsicWidth    left getIntrinsicHeight         mLeftDrawable   left      Override protected void onDraw Canvas canvas          transform the canvas so we can draw both image and text at center      canvas save        canvas translate 2 mLeftDrawable getIntrinsicWidth   2  0       super onDraw canvas       canvas restore        canvas save        int widthOfText    int getPaint   measureText getText   toString         int left    getWidth   widthOfText  2 - mLeftDrawable getIntrinsicWidth   - 2      canvas translate left   getHeight  -mLeftDrawable getIntrinsicHeight    2       mLeftDrawable draw canvas       canvas restore        Override protected void onMeasure int widthMeasureSpec  int heightMeasureSpec        super onMeasure widthMeasureSpec  heightMeasureSpec       int height   getMeasuredHeight        height   Math max height  mLeftDrawable getIntrinsicHeight     getPaddingTop     getPaddingBottom         setMeasuredDimension getMeasuredWidth    height         Usage   lt com mypackage DrawableAlignedButton         android layout width  0dp          android layout height  wrap content          android layout weight  1          android drawableLeft   drawable my drawable          android gravity  center          android padding  7dp          android text  My Text    gt

User · Answer

use this  android background   drawable ic play arrow black 24dp   just set the background to the icon you want to center

[android] How to center icon and text in a android button with width set to "fill parent"

Examples related to android

Examples related to android-layout

Examples related to user-interface

Examples related to button

Examples related to alignment