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

user_438775 0
Viewed 206627

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.

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

Any suggestions on how I could achieve that?

android-layout alignment button android user-interface
29 Answers

All the previous answers seem to be outdated

You can use the MaterialButton now which lets setting the icon gravity.

 <com.google.android.material.button.MaterialButton
        android:id="@+id/btnDownloadPdf"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:layout_margin="16dp"
        android:gravity="center"
        android:textAllCaps="true"
        app:backgroundTint="#fc0"
        app:icon="@drawable/ic_pdf"
        app:iconGravity="textStart"
        app:iconPadding="10dp"
        app:iconTint="#f00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="Download Pdf" />

enter image description here

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

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
</style>

In case you cannot do so, extend it from the Material Bridge theme

<style name="AppTheme" parent="Theme.MaterialComponents.Light.Bridge">
...
</style>
user_57303210

I recently bumped into the same problem. Tried to find a cheaper solution so came up with this.

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@android:color/white" />
    </LinearLayout>

Then just call the OnClickListener on LinearLayout.

Hope this helps someone as it seems like a very common problem. :)

user_17961730

What happens if you try android:gravity="center_horizontal"?

user_5358710

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 > 0 && 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:

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

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_13052670

Try this you will find what you are looking for,

 <Button
   android:id="@+id/button_my_profile"
   style="@style/whiteTextBlackButtonStyle.size18"
   android:layout_width="0dp"
   android:layout_weight="1"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:drawableTop="@drawable/ic_more_profile"
   android:drawablePadding="8dp"
   android:paddingStart="16dp"
   android:text="@string/title_my_profile"
   android:textAllCaps="false"
   tools:layout_editor_absoluteY="24dp" />
user_88904760

Consider ImageButton.

The attribute android:src can be used to set a drawable that is centred in the Button.

<ImageButton
    android:src="@drawable/your_drawable"
    ...
/>
user_38414200

use this android:background="@drawable/ic_play_arrow_black_24dp"

just set the background to the icon you want to center

user_85581870
Related