एंड्रॉइड बटन में आइकन और टेक्स्ट को कैसे "चौड़ाई भरें"

Question

मैं इसके अंदर केंद्रित आइकन + टेक्स्ट के साथ एक 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" />

मैं कैसे प्राप्त कर सकता है पर कोई सुझाव?

Comments

यह संभव है कि इसके लिए एक आसान समाधान नहीं है? क्या मुझे वहां आइकन के साथ 9patch बटन के साथ प्रयास करना होगा?

— जॉर्लिएंट

यह एक समाधान हो सकता है। क्या बटन पाठ स्थानीयकृत या स्थिर होने जा रहा है?

— ऑक्टेवियन ए। डामियन

यह स्थानीयकृत है। इसके लिए कोई और उपाय नहीं है? मैं इसे 9 पैच के साथ करने में कामयाब रहा, लेकिन लोकेल बदलते समय समस्या हो रही थी।

— jloriente

ड्रॉबल टॉप के साथ बटन का उपयोग करने और उसमें कुछ पैडिंग जोड़ने के बारे में क्या?

— फ्रांसेस्को

खराब ढांचा डिजाइन

— मुहम्मद बाबर

Answer 1

android: drawableLeft हमेशा android रख रहा है: बाईं ओर की सीमा से दूरी के रूप में paddingLeft। जब बटन Android पर सेट नहीं होता है: चौड़ाई = "wra_content", यह हमेशा बाईं ओर लटका रहेगा!

एंड्रॉइड 4.0 (एपीआई स्तर 14) के साथ आप एंड्रॉइड का उपयोग कर सकते हैं : पाठ की शुरुआत में एक ड्रॉबल जगह के लिए ड्रॉबलस्टार्ट विशेषता। एकमात्र पिछड़ा संगत समाधान जो मैं लेकर आया हूं, वह Text + Image Spannable बनाने के लिए ImageSpan का उपयोग कर रहा है :

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

मेरे मामले में मुझे एंड्रॉइड को समायोजित करने की आवश्यकता थी: इसे केंद्रित दिखने के लिए बटन की गुरुत्वाकर्षण विशेषता:

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

Comments

अच्छा लगा। अंतिम पंक्ति होनी चाहिएbutton.setText(buttonLabel)

— एलेक्सा

यूनिकोड में चरित्र आइकन का एक व्यापक सेट है जो एंड्रॉइड में तार के साथ संगत है। यदि आप एक स्वीकार्य एक पा सकते हैं, तो यह एक सरल समाधान है, और इसमें जोड़ा गया बोनस है कि यह पाठ आकार के साथ स्केल करेगा। उदाहरण के लिए, इसमें एक ईमेल आइकन के लिए एक लिफाफा और एक कॉल बटन के लिए अलग-अलग फोन हैं।

— 17

मैं उलझन में हूँ कि यह किसी के लिए कैसे काम करता है, मेरे लिए यह 2 आइकन बनाता है ... एक रास्ता बाईं ओर, और एक सीधे केंद्र में जो पाठ के शीर्ष पर प्रदर्शित होता है।

— जस्टिन

drawableStart काम नहीं करेगा। यह थ्रेड देखें: stackoverflow.com/questions/15350990/… इसके अलावा, ऐसा लगता है कि जब आप किसी स्पैनबल का उपयोग करके टेक्स्ट सेट करते हैं, तो शैली को अनदेखा कर दिया जाता है।

— Dapp

drawableStart काम नहीं करता है, और यह एपीआई स्तर 17 में rtl का समर्थन करने के लिए जोड़ा गया था

— सिल्विया एच

Answer 2

मुझे पता है कि मुझे इस सवाल का जवाब देने में देर हो रही है, लेकिन इससे मुझे मदद मिली:

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

मुझे यह समाधान यहां से मिला: एंड्रॉइड यूआई संघर्ष: केंद्रित पाठ और आइकन के साथ एक बटन बनाना

Comments

इसके साथ समस्या यह है कि बटन फ़्रेम लेआउट की चौड़ाई नहीं है।

— क्लाइव जेफरीज़

Answer 3

मैंने 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>

Answer 4

पिछले सभी उत्तर पुराने प्रतीत हो रहे हैं

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

सामग्री घटकों का उपयोग करने के लिए आपको स्पष्ट रूप से इसकी आवश्यकता होगी:

एक निर्भरता जोड़ें 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>

Comments

धन्यवाद! आपने मेरा दिन बचाया! ठीक काम करता है

— Black_Zerg

Answer 5

मैं इसे निम्नानुसार बाएँ और दाएँ जोड़कर समायोजित करता हूँ:

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

Comments

पेडिंग लाईट और पेडिंग राइट वह थी जिसने मुझे अपने सेंटरिंग में मदद की। आसान समाधान के लिए upvoting।

— Arrie

आप इस तथ्य को कैसे प्रबंधित करते हैं कि आपकी चौड़ाई गतिशील है? यदि आप अपनी स्क्रीन को घुमाते हैं, तो आपके सभी आइकन सही केंद्रित नहीं होंगे? मैं वास्तव में इस मुद्दे का सामना कर रहा हूं

— जैक

यह सबसे अच्छा जवाब है!

— डोडी रचमत विसाकोसनो

Answer 6

मैं हाल ही में एक ही समस्या में टकरा गया। एक सस्ता समाधान खोजने की कोशिश की तो इस के साथ आया।

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

तो बस फोन OnClickListenerपर LinearLayout।

उम्मीद है कि यह किसी की मदद करता है क्योंकि यह एक बहुत ही आम समस्या की तरह लगता है। :)

Comments

यह एक अच्छा विचार है, लेकिन एक बुरा समाधान है। ड्रॉबलटेफ़्ट-विशेषता का उपयोग करके आप केवल एक टेक्स्ट व्यू के साथ एक ही चीज़ प्राप्त कर सकते हैं। यह आपको पाठ के बाईं ओर एक देखने योग्य बनाता है।

— muetzenflo

@muetzenflo हाँ, यह सही है। लेकिन जब आप टेक्स्टव्यू को अभिभावक की चौड़ाई से मिलाते हैं, तो आपका ड्राबल चरम बाईं ओर चला जाएगा, भले ही आप अपने टेक्स्ट को केंद्र में रखते हों। कृपया मुझे बताएं कि क्या मैं गलत हूं। और सवाल केवल उसी के बारे में है।

— अंकित पोपली

आह खेद..मैं इस समस्या के लिए यहां आया और बहुत सारी चीजों की कोशिश करने के बाद ध्यान खो दिया :) लगता है कि मैंने पेड़ों के लिए जंगल नहीं देखा। मेरी गलती!

— muetzenflo

Answer 7

आप एक कस्टम बटन का उपयोग कर सकते हैं जो बाईं ओर खींचने योग्य को मापने के लिए खुद को मापता है और खींचता है। कृपया उदाहरण और उपयोग यहां पाएं

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

Comments

आप अपने उत्तर में कोड शामिल कर सकते हैं, जो पसंदीदा तरीका होना चाहिए (यदि यह बहुत लंबा नहीं है), क्योंकि समय के साथ लिंक मर सकते

— लुकास नुथ

बहुत सटीक नहीं है, लेकिन मैं इसे ले जाता हूं

— एलेक्स सेमिनेक

यह एक पाठ को सही ढंग से बदलता है, लेकिन पर्याप्त नहीं है (एक छवि पाठ को ओवरलैप करती है)। अन्य कस्टम दृश्य के समाधान के रूप में, यह लंबे पाठ को सही नहीं मानता है।

— कूलमाइंड

Answer 8

यह मेरा समाधान है जो मैंने 3 साल पहले लिखा था। बटन में टेक्स्ट और बायाँ आइकन है और फ्रेम में है जो यहाँ वास्तविक बटन है और इसे fill_parent द्वारा बढ़ाया जा सकता है। मैं इसे फिर से परीक्षण नहीं कर सकता लेकिन यह तब वापस काम कर रहा था। संभवतः बटन का उपयोग नहीं किया जाना है और इसे 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>

Comments

अब मैं देखता हूं कि मैं इस समाधान के साथ अकेला नहीं था :)

— रेनेटिक

Answer 9

मुझे पता है कि यह सवाल थोड़ा पुराना है, लेकिन शायद आप अभी भी संकेत या वर्कअराउंड के लिए खुले हैं:

पृष्ठभूमि के पहले तत्व के रूप में बटन छवि और लेआउट के पहले तत्व के रूप में एक RelativeLayout "wra_content" बनाएँ। एक LinearLayout प्राप्त करें और इसे "layout_centerInParent" और "wra_content" पर सेट करें। फिर एक इमेजव्यू के रूप में अपने ड्रॉबल को सेट करें। अंत में अपने पाठ (लोकेल) के साथ एक TextView सेट करें।

तो मूल रूप से आपके पास यह संरचना है:

RelativeLayout
  Button
    LinearLayout
      ImageView
      TextView

या इस तरह:

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

मुझे पता है कि इस समाधान के साथ निपटने के लिए कई तत्व हैं, लेकिन आप इसके साथ अपने स्वयं के कस्टम बटन को बहुत आसान बना सकते हैं और पाठ और चित्र की सटीक स्थिति भी सेट कर सकते हैं :)

Comments

यह दृष्टिकोण अच्छी तरह से काम कर सकता है। मेरे मामले में, मुझे केवल एक RelativeLayout की आवश्यकता थी जिसमें एक TextView था। RelativeLayout को पृष्ठभूमि मिली, TextView को drawableLeft आइकन मिला। फिर कोड में: RelativeLayout पर onClickListener को लगाएं और जरूरत पड़ने पर TextView के लिए अलग से

— ViewById करें

पहले सुझाए गए ढांचे से "बटन व्यूग्रुप में डाली नहीं जा सकती है" अपवाद।

— यंगजए

Answer 10

इसे हल करने का मेरा तरीका बटन को हल्के <View ../>तत्वों के साथ शामिल करता है जो गतिशील रूप से आकार देते हैं। नीचे इसके साथ प्राप्त किए जा सकने वाले कई उदाहरण दिए गए हैं:

ध्यान दें कि उदाहरण 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>

Answer 11

इस लाइब्रेरी का उपयोग करने का प्रयास करें

OmegaCenterIconButton

Answer 12

आप एक कस्टम विजेट बना सकते हैं:

जावा वर्ग 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" जहाँ 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 के अंदर कस्टम बटन को लपेटें।

का आनंद लें!

Answer 13

इसी तरह का मुद्दा था, लेकिन कोई पाठ और कोई लिपटे लेआउट के साथ केंद्र को खींचने योग्य होना चाहता था। समाधान कस्टम बटन बनाने और LEFT, RIGHT, TOP, BOTTOM के अलावा एक और ड्रा करने योग्य था। एक आसानी से ड्रॉ करने योग्य प्लेसमेंट को संशोधित कर सकता है और इसे पाठ के सापेक्ष वांछित स्थिति में रख सकता है।

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

Comments

धन्यवाद! यही मैं ढूंढ रहा था।

— मिस्टाग्रीन जूल

कृपया मुझे इस सवाल में मदद मिलेगी, stackoverflow.com/questions/35912539/… , आपके उत्तर के साथ मैं इसके बहुत करीब हूँ, लेकिन दो

— ड्राअर्स

यह समाधान एक बटन के केंद्र में स्थित है, बस केंद्रित पाठ पर।

— कूलमाइंड

Answer 14

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

LinearLayout में FrameLayout रखें और क्षैतिज के लिए अभिविन्यास सेट करें।

Answer 15

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

Answer 16

यदि आप एंड्रॉइड की कोशिश करते हैं तो क्या होता है: गुरुत्वाकर्षण = "केंद्र_होर क्षैतिज"?

Comments

यह काम नहीं करता है। पाठ कुछ हद तक केंद्रित है, लेकिन drawableLeft बाईं ओर चिपक जाता है।

— पीटर अज़ताई

Answer 17

मुझे लगता है कि Android: गुरुत्वाकर्षण = "केंद्र" को काम करना चाहिए

Comments

मेरे लिए काम नहीं करता है। यह पाठ को केंद्र में रखता है, लेकिन ड्रॉबलटेफ्ट बहुत बाईं ओर रहता है।

— पीटर अज़ताई

आपको एक ही माता-पिता के तहत आइकन और पाठ को घोषित करना होगा, अभिभावक के लिए Android: गुरुत्वाकर्षण = "केंद्र" का उपयोग करना होगा

— devanshu_kaushik

Answer 18

जैसा कि रोडजा ने सुझाया था, 4.0 से पहले ड्रॉबल के साथ टेक्स्ट को केंद्र में रखने का एक सीधा तरीका नहीं है। और वास्तव में एक padding_left मान सेट करना ड्रॉबल को सीमा से दूर ले जाता है। इसलिए मेरा सुझाव यह है कि रनटाइम पर आप गणना करते हैं कि बाईं ओर की सीमा से कितने पिक्सेल आपके ड्रॉएबल होने की आवश्यकता है और फिर सेटपैडिंग का उपयोग करके इसे पास करें आपकी गणना कुछ इस तरह हो सकती है

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

आपके ड्रॉबल की चौड़ाई तय हो गई है और आप इसे देख सकते हैं और आप टेक्स्ट की चौड़ाई की गणना या अनुमान भी लगा सकते हैं।

अंत में, आप स्क्रीन घनत्व है, जो आप उपयोग कर सकते हैं एक से अधिक गद्दी मूल्य की आवश्यकता होगी DisplayMetrics

Answer 19

मैं इसका परीक्षण नहीं करता, लेकिन ऐसा लगता है कि आप CenteredContentButton लाइब्रेरी का उपयोग कर सकते हैं

Answer 20

सार्वजनिक वर्ग 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);
}

}

Comments

यह मेरे लिए बिल्कुल काम नहीं किया। क्या आप कृपया एक उदाहरण दिखा सकते हैं? शायद मैं इसे सही ढंग से उपयोग नहीं करता

— एंड्रॉयड डेवलपर

Answer 21

डर्टी फिक्स।

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

सही पैडिंग का पता लगाना उद्देश्य को हल करता है। हालाँकि, विभिन्न स्क्रीन के लिए, अलग-अलग पैडिंग का उपयोग करें और संबंधित मूल्य फ़ोल्डर में डिमेंस संसाधन में रखें।

Answer 22

RelativeLayout (कंटेनर) और Android का उपयोग करें : layout_centerHor क्षैतिज = "सही" , मेरा नमूना:

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

Answer 23

बटन थीम रखने की अन्य संभावना।

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

इस समाधान के साथ यदि आपकी गतिविधि में आपका कलर @ कलर / your_color @ कलर / your_highlight_color शामिल है, तो आपके पास लॉलीपॉप व्हाइट शैडो और रिपल पर माथेरियल थीम हो सकता है, और जब आप इसे दबाते हैं तो अपने रंग और हाइलाइट कोयर के साथ पिछले वर्जन के फ्लैट बटन के लिए।

इसके अलावा, इस समाधान के साथ चित्र का ऑटोरेस्ज़ाइज

परिणाम: पहला लॉलीपॉप डिवाइस पर दूसरा: प्री लॉलीपॉप डिवाइस 3 पर: प्री लॉलीपॉप डिवाइस प्रेस बटन

Answer 24

मैं textViewआइकन का उपयोग करके paddingLeftऔर बाईं ओर 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" />

Comments

यह कई स्क्रीन पर काम नहीं करेगा, केवल उसी पर, जिसके लिए android:paddingLeftकाम किया है।

— सोशियल

Answer 25

यह एक पुराना / बंद धागा हो सकता है, लेकिन मैंने हर जगह कुछ उपयोगी नहीं खोजा है, जब तक कि मैंने अपना समाधान बनाने का फैसला नहीं किया। अगर किसी को यहाँ जवाब देने की कोशिश करने की कोशिश कर रहा है, तो यह आपको एक मिनट की बचत कर सकता है

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

क्योंकि रैखिक लेआउट कंटेनर के रूप में कार्य करता है और जिसके पास चयनकर्ता होता है, जब आप पूरे रैखिक लेआउट पर क्लिक करते हैं तो यह सिर्फ यह देखना होगा कि यह कैसा होना चाहिए। यदि आप चाहते हैं कि यह दोनों केंद्रित हो, तो रिश्तेदार इंस्टा का उपयोग करें। यदि आप चाहते हैं कि यह क्षैतिज रूप से उन्मुखीकरण को क्षैतिज में बदल दे।

ध्यान दें कि ऐक्शन लेने के लिए अपने मुख्य कंटेनर (रिश्तेदार या रैखिक) पर क्लिक करने के लिए एंड्रॉइड: क्लिक करने योग्य = "सही" न भूलें ।

फिर से यह पुराना धागा हो सकता है लेकिन फिर भी वहां किसी की मदद कर सकता है।

-चर्चा करने वालों को उम्मीद है कि इससे खुशी मिलती है।

Answer 26

यदि आप कस्टम दृश्य के समाधानों में से एक का उपयोग करते हैं, तो सावधान रहें, क्योंकि वे अक्सर लंबे या बहुस्तरीय पाठ पर विफल होते हैं । मैंने कुछ उत्तरों को फिर से लिखा, प्रतिस्थापित किया onDraw()और समझा कि यह एक गलत तरीका था।

Answer 27

मैंने शुरू / बाईं ओर drawable को संरेखित करने के लिए समाधान देखा है, लेकिन drawable end / right के लिए कुछ भी नहीं है, इसलिए मैं इस समाधान के साथ आया हूं। यह बाईं और दाईं ओर दोनों ओर ड्रा करने योग्य और पाठ संरेखित करने के लिए गतिशील रूप से गणना की गई पैडिंग का उपयोग करता है।

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

अपने लेआउट में गुरुत्वाकर्षण सेट करना महत्वपूर्ण है या तो "center_vertical | start" या "center_vertical | end" पर निर्भर करता है कि आप आइकन कहाँ सेट करते हैं। उदाहरण के लिए:

<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 होगा।

Answer 28

इसे इस्तेमाल करो android:background="@drawable/ic_play_arrow_black_24dp"

जिस पृष्ठभूमि को आप केंद्र में रखना चाहते हैं, उसकी पृष्ठभूमि सेट करें