web-dev-qa-db-ja.com

アイコンとテキストをAndroidボタンの中央に配置し、幅を「親を埋める」に設定する方法

アイコンとテキストが中央に配置されたAndroidボタンが必要です。 drawableLeft属性を使用して画像を設定しています。これは、ボタンの幅が"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" />

私はそれを達成する方法について何か提案はありますか?

108
jloriente

Android:drawableLeftは、Android:paddingLeftを常に左の境界線からの距離として保持しています。ボタンがAndroid:width = "wrap_content"に設定されていない場合、常に左にハングします!

Android 4.0(APIレベル14)では、 Android:drawableStart 属性を使用して、テキストの先頭にドロアブルを配置できます。私が思いついた唯一の後方互換性のあるソリューションは、 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:gravity属性も調整して中央に見えるようにする必要がありました。

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

私はこの質問に答えるのが遅れていることを知っていますが、これは私を助けました:

<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 UIの苦労:テキストとアイコンを中央に配置したボタンの作成

enter image description here

32
Sarvan

Buttonの代わりにLinearLayoutを使用しました。 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>
27
petrnohejl

次のように左右にパディングを追加して調整します。

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

私は最近、同じ問題にぶつかりました。より安価なソリューションを見つけようとしたので、これを思いつきました。

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

次に、OnClickListenerLinearLayoutを呼び出します。

これが非常に一般的な問題のように思われるので、これが誰かを助けることを願っています。 :)

7
Ankit Popli

左のドロアブルに対応するために、それ自体を測定して描画するカスタムボタンを使用できます。例と使用法を見つけてください 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);
}
}

使用法

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

それを解決する私の方法は、動的にサイズ変更する軽量の<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>
4
Dev-iL

私はこの質問が少し古いことを知っていますが、おそらくあなたはまだヒントや回避策を開いているでしょう:

ボタン画像を背景として、またはボタン自体をレイアウトの最初の要素として、RelativeLayout "wrap_content"を作成します。 LinearLayoutを取得し、「layout_centerInParent」および「wrap_content」に設定します。次に、DrawableをImageviewとして設定します。最後に、テキスト(ロケール)でTextViewを設定します。

したがって、基本的には次の構造になります。

RelativeLayout
  Button
    LinearLayout
      ImageView
      TextView

またはこのように:

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

このソリューションには対処する要素がたくさんありますが、独自のカスタムボタンを非常に簡単に作成し、テキストとドロウアブルの正確な位置を設定することもできます:)

4
einschnaehkeee

これは3年前に書いた私の解決策です。ボタンにはテキストと左のアイコンがあり、実際のボタンであるフレーム内にあり、fill_parentで引き伸ばすことができます。もう一度テストすることはできませんが、当時は機能していました。おそらくButtonは使用する必要がなく、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>
3
Renetik

カスタムウィジェットを作成できます。

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

カスタム属性の名前空間を提供する必要があります xmlns:ibutton = "http://schemas.Android.com/apk/res/com.test.Android.xxx" where 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の配置に関する潜在的な問題を回避したい場合は、配置を改善するために、LinearLayout内にカスタムボタンをラップします。

楽しい!

2
kirilv

このライブラリを使用してみてください

OmegaCenterIconButton

enter image description here

2
T. Roman

同様の問題がありましたが、テキストと折り返しレイアウトのない中央のドローアブルが必要でした。解決策は、カスタムボタンを作成し、LEFT、RIGHT、TOP、BOTTOMに加えてもう1つのドロアブルを追加することでした。描画可能な配置を簡単に変更し、テキストに対して望ましい位置に配置できます。

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

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

以前の回答はすべて時代遅れのようです

アイコンの重力を設定できる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

2
Leo Droidcoder

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>
1
butcher202
<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に配置し、向きをHorizo​​ntalに設定します。

textViewを使用してアイコンでpaddingLeftを中央揃えし、textViewをleft | centerVerticalに揃えました。そして、ビューとアイコンの間の小さなギャップに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" />
1
Xar E Ahmer

カスタムビューのソリューションのいずれかを使用する場合、長いまたは複数行のテキストで失敗することが多いため、注意してください。私はいくつかの答えを書き直し、onDraw()を置き換え、それが間違った方法であることを理解しました。

0
CoolMind

これは古い/閉じたスレッドの可能性がありますが、独自のソリューションを作成することを決定するまで、どこでも有用なものを見つけられませんでした。答えを探している人がここにいるなら、これを試してみてください。

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

リニアレイアウトはコンテナとして機能し、セレクタを持っているため、リニアレイアウト全体をクリックすると、本来のレイアウトになります。両方を中央に配置する場合は、相対インステアを使用します。水平方向に中央に配置する場合は、向きを水平に変更します。

注意してくださいDO NOTアクションを実行するためにAndroid:clickable = "true"を追加することを忘れてください。

繰り返しますが、これは古いスレッドかもしれませんが、それでもそこの誰かを助けるかもしれません。

-歓声はそれが役立つことを願っています-happycodings。

0
ralphgabb

汚い修正。

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

右のパディングを考えると目的が解決します。ただし、さまざまな画面の場合、異なるパディングを使用して、それぞれの値フォルダーのdimensリソースに入れます。

0
Ngudup

RelativeLayout(コンテナ)およびAndroid:layout_centerHorizo​​ntal = "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>
0
vuhung3990

パブリッククラス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);
}

}

0
tangjun

Buttonテーマを保持する他の可能性。

<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_highlight_colorを追加すると、LollipopのシャドウとリップルにMatherialテーマを追加できます。以前のバージョンでは、ボタンを押したときに色とハイライトがフラットボタンになります。

さらに、このソリューションでは画像の自動サイズ変更

結果:最初にLollipopデバイスで2番目:事前Lollipopデバイスで3番目:事前Lollipopデバイスでボタンを押す

enter image description here

0
Anthone

Rodjaが示唆しているように、4.0より前のバージョンでは、テキストをドロアブルで中央揃えする直接的な方法はありません。そして実際にpadding_leftの値を設定すると、ドロウアブルは境界線から離れます。したがって、私の提案は、実行時に、ドロウアブルに必要な左境界からのピクセル数を正確に計算し、次に setPadding を使用して渡すことです

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

ドロアブルの幅は固定されており、調べることができ、テキストの幅を計算または推測することもできます。

最後に、パディング値を画面密度で乗算する必要があります。これは DisplayMetrics を使用して実行できます

0
ılǝ

私はそれをテストしませんが、 CenteredContentButton library を使用できるようです

0
Viacheslav

Android:gravity = "centre"は動作するはずです

0

これを使用してくださいAndroid:background="@drawable/ic_play_arrow_black_24dp"

中心にしたいアイコンに背景を設定するだけです

0
kudzai zishumba

Android:gravity = "center_horizo​​ntal"を試すとどうなりますか?

0
Ted Hopp