wake-up-neo.com

So zentrieren Sie Symbol und Text in einer Android-Schaltfläche, wobei die Breite auf "Übergeordnetes Element füllen" gesetzt ist

Ich möchte einen Android-Button mit Symbol + Text in der Mitte haben. Ich verwende das drawableLeft-Attribut, um das Bild festzulegen. Dies funktioniert gut, wenn die Schaltfläche eine Breite von "wrap_content" hat. Ich muss mich jedoch auf die maximale Breite dehnen, damit ich die Breite "fill_parent" verwenden kann. Dadurch wird mein Symbol direkt nach links von der Schaltfläche verschoben und ich möchte, dass sowohl Symbol als auch Text innerhalb der Schaltfläche zentriert werden. 

Ich habe versucht, das Padding einzurichten, aber dies erlaubt nur einen festen Wert, so dass es nicht das ist, was ich brauche. Ich muss Symbol + Text in der Mitte haben.

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

Irgendwelche Vorschläge, wie ich das erreichen könnte? 

androidandroid-layoutuser-interfacebuttonalignment
102
jloriente

Android: drawableLeft hält immer Android: paddingLeft als Abstand vom linken Rand. Wenn der Button nicht auf Android eingestellt ist: width = "wrap_content", hängt er immer nach links!

Mit Android 4.0 (API-Ebene 14) können Sie das Attribut Android: drawableStart verwenden, um ein Zeichen am Anfang des Textes zu platzieren. Die einzige abwärtskompatible Lösung, die ich entwickelt habe, ist die Verwendung von ImageSpan , um ein Text + Image Spannable zu erstellen:

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 meinem Fall musste ich auch das Android: Schwerkraftattribut des Buttons anpassen, damit es zentriert aussieht:

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

Ich weiß, dass ich diese Frage zu spät beantworte, aber das hat mir geholfen:

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

Ich habe diese Lösung von hier aus gefunden: Android-Benutzeroberflächenprobleme: Erstellen einer Schaltfläche mit zentriertem Text und Symbol

enter image description here

31
Sarvan

Ich habe LinearLayout anstelle von Button verwendet. Der OnClickListener , den ich verwenden muss, funktioniert auch für 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>
25
petrnohejl

Sie können einen benutzerdefinierten Button verwenden, der misst und zeichnet, um ein linkes Zeichenelement aufzunehmen. Beispiel und Verwendung finden Sie hier

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

Verwendungszweck

<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

Ich bin vor kurzem auf das gleiche Problem gestoßen. Ich habe versucht, eine günstigere Lösung zu finden, also kam dies dazu.

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

Dann rufen Sie einfach die OnClickListener auf LinearLayout auf.

Hoffe, das hilft jemandem, denn es scheint ein sehr verbreitetes Problem zu sein. :)

6
Ankit Popli

Ich passe es an, indem ich links und rechts die Auffüllung wie folgt hinzufüge:

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

Das ist meine Lösung ..

<FrameLayout
    Android:id="@+id/login_button_login"
    Android:background="@drawable/apptheme_btn_default_holo_dark"
    Android:layout_width="280dp"
    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>
4
Renetik

Ich weiß, dass diese Frage etwas älter ist, aber vielleicht sind Sie noch offen für Hinweise oder Problemumgehungen:

Erstellen Sie ein RelativeLayout "wrap_content" mit dem Schaltflächenbild als Hintergrund oder der Schaltfläche selbst als erstes Element des Layouts. Holen Sie sich ein LinearLayout und setzen Sie es auf "layout_centerInParent" und "wrap_content". Legen Sie dann Ihren Drawable als Bildansicht fest. Legen Sie zuletzt eine Textansicht mit Ihrem Text (Gebietsschema) fest.

im Grunde haben Sie diese Struktur:

RelativeLayout
  Button
    LinearLayout
      ImageView
      TextView

oder so:

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

Ich weiß, mit dieser Lösung gibt es viele Elemente, mit denen man sich auseinandersetzen muss, aber Sie können ganz einfach Ihren eigenen benutzerdefinierten Button erstellen und auch die exakte Position von Text und Drawables festlegen :)

4
einschnaehkeee

Meine Lösung bestand darin, die Schaltfläche mit leichtgewichtigen <View ../>-Elementen zu umgeben, die ihre Größe dynamisch ändern. Nachfolgend finden Sie einige Beispiele dafür, was damit erreicht werden kann:

 Demo by Dev-iL

Beachten Sie, dass der anklickbare Bereich der Schaltflächen in Beispiel 3 derselbe wie in 2 ist (d. H. Mit Leerzeichen). Dies unterscheidet sich von Beispiel 4, wo keine "unklickbaren" Lücken dazwischen liegen.

Code:

<?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>
3
Dev-iL

Sie können ein benutzerdefiniertes Widget erstellen:

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

}

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

Um dieses benutzerdefinierte Widget zu verwenden: 

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

Sie müssen den Namespace für die benutzerdefinierten Attribute angeben Xmlns: ibutton = "http://schemas.Android.com/apk/res/com.test.Android.xxx" Where com. test.Android.xxx ist das Stammpaket der Anwendung.

Setzen Sie es einfach unter xmlns: Android = "http://schemas.Android.com/apk/res/Android".

Das letzte, was Sie brauchen, sind die benutzerdefinierten Attribute in der Datei attrs.xml.

In den Dateien 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>

Um die Positionierung zu verbessern, wickeln Sie den benutzerdefinierten Button in ein LinearLayout ein, wenn Sie potenzielle Probleme mit RelativeLayout-Positionierungen vermeiden möchten.

Genießen!

2
kirilv

Versuchen Sie, diese Bibliothek zu verwenden 

OmegaCenterIconButton

 enter image description here

2
T. Roman

Hatte ein ähnliches Problem, wollte aber Mitte zeichnen, ohne Text und ohne umschlossene Layouts. Die Lösung bestand darin, einen benutzerdefinierten Knopf zu erstellen und zusätzlich zu LINKS, RECHTS, OBEN, UNTEN einen weiteren Zeichenbereich hinzuzufügen. Sie können die Zeichenposition leicht ändern und sie in der gewünschten Position relativ zum Text haben.

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>

verwendungszweck

<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

Sie können die Schaltfläche über einem LinearLayout platzieren

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

Setzen Sie das FrameLayout in LinearLayout und setzen Sie die Ausrichtung auf Horizontal.

1
Feay Jarana Manotumruksa

Wenn Sie eine der Lösungen von custom view verwenden, müssen Sie vorsichtig sein, da sie häufig bei langem oder mehrzeiligem Text ausfallen. Ich schrieb einige Antworten um, ersetzte onDraw() und verstand, dass dies ein falscher Weg war.

0
CoolMind

Dies kann ein alter/geschlossener Thread sein, aber ich habe überall gesucht, dass es nicht nützlich war, bis ich mich entschied, meine eigene Lösung zu erstellen. Wenn hier jemand nach Antworten sucht, versuchen Sie es hier. Vielleicht sparen Sie sich eine Minute zum Nachdenken

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

Da das lineare Layout als Container fungiert und derjenige ist, der über die Auswahl verfügt, würde das Anklicken des gesamten linearen Layouts genau so aussehen, wie es sein sollte. Wenn Sie möchten, dass beide zentriert sind, verwenden Sie relative insteaf. Wenn Sie möchten, dass es horizontal zentriert ist, ändern Sie die Ausrichtung in horizontal. 

Notieren Sie NICHT - vergessen Sie nicht, Android hinzuzufügen: clickable = "true" zu Ihrem Hauptcontainer (relativ oder linear), damit die Aktion ausgeführt wird. 

Auch dies kann ein alter Thread sein, kann aber trotzdem jemandem helfen.

-cheers hoffen es hilft - happycodings.

0
ralphgabb

Schmutzige Verlegenheit.

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

Richtige Polsterung den Zweck lösen. Verwenden Sie für verschiedene Bildschirme jedoch unterschiedliche Auffüllungen und legen Sie diese in dimens resource in den entsprechenden Wertordner. 

0
Ngudup

Verwenden Sie RelativeLayout (Container) und Android: layout_centerHorizontal = "true" , Mein Beispiel: 

                <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

die öffentliche Klasse DrawableCenterTextView erweitert 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

Andere Möglichkeit, Button-Thema zu behalten.

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

Mit dieser Lösung fügen Sie @ Color/your_color @ Color/your_highlight_color .__ hinzu. In Ihrem Aktivitätsthema können Sie das Matherial-Thema auf Lollipop mit Schatten und Ripple sowie für die vorherige Version einen flachen Button mit Ihrer Farbe und dem hervorgehobenen Farbton verwenden, wenn Sie darauf drücken.

Darüber hinaus kann mit dieser Lösung das Bild automatisch verkleinert werden

Ergebnis: Zuerst auf Lollipop-Gerät Zweitens: Auf Pre-Lollipop-Gerät 3.: Vor Lollipop-Gerät drücken Sie die Taste

 enter image description here

0
Anthone

Wie von Rodja vorgeschlagen, gibt es vor 4.0 keine direkte Möglichkeit, den Text mit dem Zeichenelement zu zentrieren. Durch das Setzen eines padding_left-Werts wird der Zeichner tatsächlich vom Rand weg bewegt. Mein Vorschlag ist daher, dass Sie zur Laufzeit genau berechnen, wie viele Pixel Sie von der linken Begrenzungslinie aus zeichnen müssen, und diese dann mit setPadding .__ übergeben. Ihre Berechnung kann etwa so aussehen

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

Die Breite Ihres Zeichenbereichs ist festgelegt und Sie können nachschlagen und die Textbreite berechnen oder schätzen.

Schließlich müssten Sie den Auffüllwert mit der Bildschirmdichte multiplizieren, was Sie mit DisplayMetrics tun können.

0
ılǝ

Ich teste es nicht, aber es scheint, dass Sie die CenteredContentButton-Bibliothek verwenden können

0
Viacheslav

Ich denke, Android: Schwerkraft = "Mitte" sollte funktionieren

0
devanshu_kaushik

benutze diesen Android:background="@drawable/ic_play_arrow_black_24dp"

setzen Sie einfach den Hintergrund auf das Symbol, das Sie zentrieren möchten

0
kudzai zishumba

Alle Antworten sind veraltet !!!

Sie können jetzt die MaterialButton verwenden, mit der Sie die Symbolschwerkraft einstellen können.

 <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 

0
Leo Droidcoder

Was passiert, wenn Sie Android ausprobieren: gravity = "center_horizontal"?

0
Ted Hopp

Ich habe textView mit dem Symbol zentriert, indem Sie paddingLeft und und textView auf left | centerVertical ausrichten. und für eine kleine Lücke zwischen Ansicht und Symbol verwendete ich 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" />
0
Xar E Ahmer