如何在宽度设置为“填充父级”的 android 按钮中居中显示图标和文本

我想有一个 Android 按钮与图标 + 文本中心内。我使用 draableLeft 属性来设置图像，如果按钮的宽度为 "wrap_content"，这个工作得很好，但是我需要拉伸到最大宽度，所以我使用宽度 "fill_parent"。这将我的图标直接移动到按钮的左侧，我希望图标和文本都位于按钮的中心。

我已经尝试设置填充，但这只允许给一个固定的值，所以它不是我需要的。我需要有图标 + 文字对齐在中心。

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

你有什么建议吗？

210991 次浏览
小开

如果你试试机器人: 地心引力 = “中心水平”会发生什么？

小开

我知道这个问题有点老，但是也许你仍然需要一些提示或者变通方法:

使用按钮图像作为背景或按钮本身作为布局的第一个元素创建 RelativeLayout“ wrap _ content”。获取一个 LinearLayout 并将其设置为“ outs _ centerInParent”和“ wrash _ content”。然后设置您的可绘制图像视图。最后使用文本(区域设置)设置 TextView。

所以基本上你有这样的结构:

RelativeLayout
Button
LinearLayout
ImageView
TextView

或者像这样:

RelativeLayout with "android-specific" button image as background
LinearLayout
ImageView
TextView

我知道这个解决方案有很多要处理的元素，但是你可以很容易地用它创建你自己的自定义按钮，还可以设置文本和绘图的确切位置:)

小开

我认为机器人: 重力 = “中心”应该可以工作

小开

左边总是保持 android: paddingLeft 作为与左边框的距离。如果按钮没有设置为 android: width = “ wraps _ content”，它将总是挂在左边！

使用 Android 4.0(API 级别14) ，您可以使用 开始属性在文本的开头放置一个可绘制的内容。我想到的唯一向后兼容的解决方案是使用 ImageSpan创建一个 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);

在我的例子中，我还需要调整按钮的 android: vity 属性，使它看起来居中:

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

就像 Rodja 建议的那样，在4.0之前，没有一种直接的方法可以用可绘制的文本居中。实际上，设置 pding _ left 值确实会将可绘制内容从边框移开。因此，我的建议是，在运行时，精确地计算左边框需要多少像素，然后使用 < a href = “ http://developer.android.com/reference/android/view/View.html # setPadding% 28int,% 20int,% 20int,% 20int% 29”rel = “ nofollow”> setPadding 你的计算可能是这样的

int paddingLeft = (button.getWidth() - drawableWidth - textWidth) / 2;

你的画的宽度是固定的，你可以查找它，你也可以计算或猜测文字宽度。

最后，您需要将填充值乘以屏幕密度，这可以使用 DisplayMetrics来完成

小开

我使用的是 线性布局而不是 按钮。我需要使用的 OnClickListener也可以很好地用于 LinearLayout。

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


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


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text" />


</LinearLayout>
小开

您可以使用一个自定义按钮来测量和绘制自己，以容纳左边的绘制。请找到例子和用法 给你

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);
}
}

用法

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

我最近也遇到了同样的问题。我试图找到一个更便宜的解决方案，于是想出了这个办法。

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

那就打电话给 LinearLayout台的 OnClickListener台。

希望这对某人有所帮助，因为这似乎是一个非常普遍的问题。 :)

小开

公共类 DrawableCenterTextView 扩展 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);
}

}

小开

您可以创建一个自定义小部件:

Java 类 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);
}

}

布局 ibutton.xml 

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


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


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

为了使用这个自定义小部件:

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

必须为自定义属性提供命名空间 IButton = “ http://schemas.android.com/apk/res/com.test.android.xxx” 其中 com.test.android.xxx 是应用程序的根包。

把它放在 xmlns 下面: android = “ http://schemas.android.com/apk/res/android”。

您最后需要的是 attrs.xml 中的自定义属性。

在 attrs.xml 中

<?xml version="1.0" encoding="utf-8"?>
<resources>


<declare-styleable name="IButtonStyle">
<attr name="button_text" />
<attr name="button_icon" format="integer" />
</declare-styleable>


<attr name="button_text" />


</resources>

为了更好地定位，如果您想避免 RelativeLayout 定位的潜在问题，可以将自定义 Button 包装在 LinearLayout 中。

好好享受吧！

小开

肮脏的手段。

android:paddingTop="10dp"
android:drawableTop="@drawable/ic_src"

使用右边填充可以解决这个问题。但是，对于不同的屏幕，使用不同的填充，并将其放在相应的值文件夹中的维度资源中。

小开

使用 相对布局(容器)和 < strong > android: outs _ center 水平 = “ true” 我的样本:

                <RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >


<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" />
</RelativeLayout>
小开

我知道我回答这个问题迟到了，但这个回答帮助了我:

<FrameLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginBottom="5dp"
android:layout_marginTop="10dp"
android:background="@color/fb" >


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

我从这里找到了这个解决方案: Android 用户界面的挣扎: 创建一个文本和图标居中的按钮

enter image description here

小开 
<style name="captionOnly">
<item name="android:background">@null</item>
<item name="android:clickable">false</item>
<item name="android:focusable">false</item>
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
</style>


<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >


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

将 FrameLayout 放在 LinearLayout 中，并将方向设置为水平。

小开

有类似的问题，但希望有中心绘制没有文本，没有包装布局。解决方案是创建自定义按钮，并添加另一个可绘制的除了左，右，顶部，底部。一个可以很容易地修改可绘制的位置，并有它在理想的位置相对于文本。

中心绘图按钮.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();
}
}
}

Xml

<resources>
<attr name="drawableCenter" format="reference"/>
<declare-styleable name="CenterDrawableButton">
<attr name="drawableCenter"/>
</declare-styleable>
</resources>

用途

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

这是我三年前写的解决方案。按钮有文本和左图标，并在框架中，这里是实际的按钮，可以通过 fill _ father 进行拉伸。我不能再次测试它，但它是工作回来了。也许按钮不必使用，可以替换为 TextView，但我现在不会测试它，它没有改变太多的功能在这里。

<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">
<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" />
</FrameLayout>
小开

保持按钮主题的其他可能性。

<Button
android:id="@+id/pf_bt_edit"
android:layout_height="@dimen/standard_height"
android:layout_width="match_parent"
/>


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


<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:clickable="false"
android:src="@drawable/ic_edit_white_48dp"/>


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


</LinearLayout>

使用此解决方案，如果您添加 @ color/your _ color @ color/your _ 屈光标 _ color 在你的活动主题中，你可以在棒棒糖上设置有阴影和波纹的 Matherial 主题，对于之前的版本，当你按下它的时候，可以设置有颜色和高亮颜色的平面按钮。

此外，用这种解决方案自动放大图片

结果: 首先是棒棒糖装置 第二: 关于前棒棒糖装置 第三: 前棒棒糖装置按钮

enter image description here

小开

你可以把按钮放在 LinearLayout 上

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/activity_login_fb_height"
android:background="@mipmap/bg_btn_fb">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<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" />
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/btnLoginFb"
android:background="@color/transparent"
/>
</RelativeLayout>
小开

我解决它的方法涉及周围的按钮与轻量级的 <View ../>元素，动态调整大小。下面是可以实现这一目标的几个例子:

Demo by Dev-iL

注意，示例3中按钮的可点击区域与示例2中的相同(即带有空格) ，这与示例4中没有“不可点击”的空格不同。

密码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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:"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<!-- Play around with the above 3 values to modify the clickable
area and image alignment with respect to text -->
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>


<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:"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>


<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:"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<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"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>


<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:"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray">
<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"/>
<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"/>
<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"/>
</LinearLayout>
</LinearLayout>
小开

我使用 paddingLeft将 textView与图标居中，并将 textView 与 纵向对齐。对于视图和图标之间的一个小差距，我使用 drawablePadding

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

这可能是一个旧的/关闭的线程，但我到处搜索没有找到有用的东西，直到我决定创建自己的解决方案。如果有人在这里试图寻找答案尝试这一个，可能会节省你一分钟的思考

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


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is a text" />


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_image />




</LinearLayout>

因为线性布局作为容器和有选择器的那个，当你点击整个线性布局时，它看起来应该是什么样的。如果希望它们都居中，可以使用相对代替。如果您希望它水平居中，请将方向更改为水平。

请注意，不要忘记将 Android: clickable = “ true”添加到您的主容器(相对或线性) ，以发生动作。

同样，这可能是老线索，但仍然可以帮助有些人。

- 干杯，希望能有所帮助- 快乐编码。

小开

我通过向左边和右边添加填充来调整它:

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

用这个 android:background="@drawable/ic_play_arrow_black_24dp"

只需将背景设置为要居中的图标即可

小开

如果使用 自定义视图解决方案之一，请小心，因为它们在 长文本或多行文本上经常失败。我重写了一些答案，取代了 onDraw()，并明白这是一个错误的方式。

小开

尝试使用这个库

OmegaCenterIconButton

enter image description here

小开

以前的答案似乎都过时了

你现在可以使用 MaterialButton来设置图标的重力。

 <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

为了使用材料组件，你显然需要:

添加依赖项 implementation 'com.google.android.material:material:1.3.0-alpha01'(使用最新版本)

使您的主题扩展材料组件主题

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

如果你不能这样做，扩展它从材质桥主题

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

我已经看到了在开始/左侧对齐可绘制图形的解决方案，但是对于可绘制的结束/右侧没有解决方案，所以我想出了这个解决方案。它使用动态计算的填充来对齐左侧和右侧的可绘制文本和文本。

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()
}
}

重要的是在你的布局设置重力为“中心 _ 垂直 | 开始”或“中心 _ 垂直 | 结束”取决于你设置图标的位置。例如:

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

这个实现的唯一问题是按钮只能有一行文本，否则文本区域将填充按钮并且填充将为0。

小开

试试这个，你会发现你在寻找什么,

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

考虑 ImageButton。

属性 android:src可以用来设置一个以按钮为中心的可绘制图形。

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

提交答案