Android: एक बटन या छवि बटन पर पाठ और छवि का संयोजन

Question

मैं एक बटन पर एक छवि (पृष्ठभूमि के रूप में) की कोशिश कर रहा हूं और गतिशील रूप से जोड़ता हूं, जो रन-टाइम के दौरान हो रहा है, छवि के ऊपर / ऊपर कुछ पाठ पर निर्भर करता है।

यदि मैं उपयोग करता ImageButtonहूं तो मुझे पाठ जोड़ने की संभावना भी नहीं है। यदि मैं उपयोग करता Buttonहूं तो मैं पाठ जोड़ सकता हूं लेकिन केवल एक छवि को परिभाषित कर सकता हूं android:drawableBottomऔर इसी तरह की XML विशेषताओं को यहां परिभाषित किया गया है ।

हालाँकि ये विशेषताएँ केवल x- और y- आयामों में पाठ और छवि को जोड़ती हैं, जिसका अर्थ है कि मैं अपने पाठ के चारों ओर एक चित्र बना सकता हूं, लेकिन मेरे पाठ के नीचे / नीचे नहीं (प्रदर्शन से बाहर आने के रूप में परिभाषित z- अक्ष के साथ)।

इस संबंध में कोई सुझाव कि इसे कैसे किया जा सकता है? एक विचार यह होगा कि या तो विस्तार करें Buttonया -मिथोड को ImageButtonओवरराइड करें draw()। लेकिन मेरे ज्ञान के वर्तमान स्तर के साथ मुझे वास्तव में यह नहीं पता है कि यह कैसे करना है (2D प्रतिपादन)। हो सकता है कि अधिक अनुभव वाला कोई व्यक्ति समाधान जानता हो या कम से कम कुछ संकेत शुरू करने के लिए?

Comments

9Patch, स्मार्ट समाधान का उपयोग करें

— Kaveh Garshasp

hi @Charu check कृपया इसे जांचें अगर आप stackoverflow.com/questions/42968587/…

— मोहम्मद

Answer 1

आप कॉल कर सकते हैं setBackground()एक पर Buttonबटन की पृष्ठभूमि सेट करने के लिए।

पृष्ठभूमि के ऊपर कोई भी पाठ दिखाई देगा।

अगर आप xml में कुछ इसी तरह की तलाश कर रहे हैं: android:backgroundविशेषता जो उसी तरह से काम करती है।

Comments

यदि आप इस मार्ग पर जाते हैं, तो आप केवल पृष्ठभूमि के लिए एक सरल ड्रॉबल का उपयोग नहीं करना चाहते हैं। एक StateListDrawable (आमतौर पर <selector> XML फ़ाइल के माध्यम से res / drawable /) में उपयोग करें, ताकि आप विभिन्न राज्यों (सामान्य, दबाया, केंद्रित, अक्षम, आदि) के लिए पृष्ठभूमि को परिभाषित कर सकें।

— कॉमंसवेयर

आप से सहमत हैं, इस प्रश्न और मेरे उत्तर की तलाश करें: stackoverflow.com/questions/1533038/…

— m_vitaly

कितना मुर्ख। मैं उस दस्तावेज में कैसे चूक सकता था। त्वरित उत्तर के लिए धन्यवाद और <selector> के साथ संकेत भी। मैं निश्चित रूप से भविष्य में इसे लागू करना चाहता हूं।

— znq

यह ICS 4.0+ संस्करणों पर सही काम नहीं करता है, छवि खिंचती है। मैं एक पृष्ठभूमि के साथ एक TextView का उपयोग कर रहा था।

— meh

Answer 2

उन उपयोगकर्ताओं के लिए जो केवल Button अलग-अलग फाइलों में से एक में बैकग्राउंड, आइकन-इमेज और टेक्स्ट डालना चाहते हैं : एक Buttonबैकग्राउंड, ड्रॉबलटॉप / बॉटम / रिगथ / लेफ्ट और पैडिंग एट्रिब्यूट्स पर सेट करें ।

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

अधिक परिष्कृत व्यवस्था के लिए आप RelativeLayout(या किसी अन्य लेआउट) का उपयोग कर सकते हैं और इसे क्लिक करने योग्य बना सकते हैं।

ट्यूटोरियल: महान ट्यूटोरियल जो दोनों मामलों को कवर करता है: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-irative-layout.aspx

Comments

इसके b.setCompoundDrawablesWithIntrinsicBound(null,R.drawable.home_icon_test,null,null)बजाय android:drawableTopऔर b.setPadding(0,32,0,0)इसके बजाय प्रोग्रामेटिक रूप से उपयोग करने के लिए android:paddingTop।

— एलेक्स जैस्मीन

एक बटन के रूप में लेआउट का उपयोग करना वास्तव में काफी लचीला दृष्टिकोण है।

— '14:

यदि आप अपने ड्राअब के लिए संसाधन आईडी का उपयोग कर रहे हैं तो बस 0 के साथ अशक्त को बदलें

— रैन

मैं बटन को फिट करने के लिए बैकग्राउंड इमेज को कैसे स्केल कर सकता हूं?

— एल्स्टन

@Stallman स्केलिंग के लिए एक xml- आधारित और कोड-आधारित समाधान है: stackoverflow.com/questions/8223936/…

— OneWorld

Answer 3

इस समस्या के लिए एक बेहतर समाधान है।

बस एक सामान्य लें Buttonऔर drawableLeftऔर gravityविशेषताओं का उपयोग करें ।

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

इस तरह से आपको एक बटन मिलता है जो बटन के बाईं ओर एक आइकन प्रदर्शित करता है और आइकन के दाईं ओर खड़ी साइट पर पाठ प्रदर्शित होता है ।

Comments

इस समस्या के साथ एक समस्या होती है यदि आपने बटन पर पृष्ठभूमि का रंग चुना है (जो इस मामले में संभावना है)। फिर क्लिक या चयन के लिए कोई ग्राफ़िकल प्रतिक्रिया नहीं होगी। आप इसे संभालने के लिए एक चयनकर्ता लिख ​​सकते हैं, लेकिन तब आपको फोन डिफ़ॉल्ट रंग नहीं मिलेंगे।

— वंजा जूल

बस यह जोड़ना चाहता था कि यदि इस समाधान का उपयोग किया जाता है तो ड्राएबल पैडिंग प्रॉपर्टी बहुत उपयोगी है।

— निकोला मालेचवी

क्या xml में ड्रा करने योग्य आइकन के लिए ऊंचाई और चौड़ाई निर्धारित करने का एक तरीका है?

— पेंगुरु

यह एक महान समाधान है और आधिकारिक तौर पर एंड्रॉइड डेवलपर साइट पर भी समर्थित है: developer.android.com/guide/topics/ui/controls/button.html

— twaddington

यदि बटन बड़ा है और टेक्स्ट लंबा है, तो बदसूरत जैसा दिखता है: सबसे बाईं ओर आइकन और बीच में कहीं टेक्स्ट

Answer 4

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

Comments

एक सरल और गलत समाधान। केवल बाएं संरेखण के लिए।

— कूलमाइंड

@ CoolMind मैं ऊपर छवि के लिए ही समझा रहा हूँ मैं संलग्न ..if आप सही संरेखित उपयोग drawableRight चाहते

— Dhina कश्मीर

मैं ऐसा करने के बारे में सोच भी नहीं रहा था जब तक कि मैंने इस जवाब को नहीं पढ़ा। यह एक आकर्षण की तरह काम करता है!

— सूद007

Answer 5

बस एक LinearLayout का उपयोग करें और यह दिखावा है Button- सेटिंग backgroundऔर क्लिक करने योग्य कुंजी है:

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

Comments

क्लिक किए गए प्रभाव को कैसे जोड़ा जाए?

— फ्रैंक

सर्वश्रेष्ठ उत्तर, इस तरह से आप 100% लुक और फीलिंग का प्रबंधन करते हैं और आपको आइकन को किसी बॉर्डर पर नहीं रखना है।

— Climbatize

स्पष्ट, android:onClickअपने विचार में जोड़ें

— जियोरा गुत्सैत

Answer 6

बस प्रतिस्थापित करें

android:background="@drawable/icon"

साथ में

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

izz एक बहुत अच्छी चाल ..;)

Answer 7

मैंने यहां बताए गए तरीकों से एक अलग दृष्टिकोण लिया, और यह वास्तव में अच्छी तरह से काम कर रहा है, इसलिए मैं इसे साझा करना चाहता था।

मैं एक शैली का उपयोग कर रहा हूँ बाईं ओर पाठ के साथ एक कस्टम बटन बनाने के लिए और दाईं ओर पाठ। बस नीचे दिए गए 4 "आसान चरणों" का पालन करें:

I. कम से कम 3 अलग-अलग PNG फ़ाइलों और आपके पास मौजूद टूल का उपयोग करके अपने 9 पैच बनाएं: /YOUR_OWN_PATH/android-sdk-mac_x86/tools///99patch इसके बाद आपके पास होना चाहिए:

button_normal.9.png, बटन_focused.9.png और बटन_pressed.9.png

फिर 24x24 PNG आइकन डाउनलोड या बनाएं।

ic_your_icon.png

अपने Android प्रोजेक्ट पर सभी ड्रा करने योग्य / फ़ोल्डर में सहेजें।

द्वितीय। ड्रा करने योग्य / फ़ोल्डर के अंतर्गत अपनी परियोजना में बटन_सेक्टोर.एक्सएमएल नामक एक XML फ़ाइल बनाएँ। राज्यों को इस तरह होना चाहिए:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

तृतीय। मूल्यों / फ़ोल्डर पर जाएं और स्टाइल खोलें। या बनाएँ और फ़ाइल बनाएँ। निम्न XML कोड बनाएँ:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon एक "बाल शैली" है क्योंकि यह ButtonNormalText ("मूल शैली") का विस्तार कर रही है।

ध्यान दें कि ButtonNormalTextWithIcon शैली में drawableLeft को बदलते हुए, drawableRight, drawableTop या drawableBottom में, आप टेक्स्ट के संबंध में आइकन को अन्य स्थिति में रख सकते हैं।

चतुर्थ। उस लेआउट / फ़ोल्डर पर जाएं जहां आपके पास UI के लिए अपना XML है और उस बटन पर जाएं जहां आप शैली को लागू करना चाहते हैं और इसे इस तरह बनाएं:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

और ... आवाज! आपको बाईं ओर एक छवि के साथ अपना बटन मिला है।

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

आप अपने ऐप के लिए एक थीम भी बना सकते हैं और इसमें "पैरेंट स्टाइल" जोड़ सकते हैं ताकि सभी बटन समान दिखें, और "चाइल्ड स्टाइल" को केवल उस आइकन के साथ लागू करें जहाँ आपको इसकी आवश्यकता है।

Comments

अच्छा कार्य। मैं अंदर एक ImageView और TextView के साथ एक फ्रेम-व्यू दृश्य दृष्टिकोण का उपयोग कर रहा था, लेकिन यह दृष्टिकोण अच्छा है।

— पाइलक्रॉपाइप

बहुत बढ़िया दृष्टिकोण। फेसबुक एसडीके (संस्करण 3) लॉगिन बटन के लिए एक ही दृष्टिकोण लेता है

— कोई व्यक्ति कहीं

Answer 8

 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />   

Answer 9

आप छवि के लिए drawableTop(भी drawableLeft, आदि) का उपयोग कर सकते हैं और जोड़कर छवि के नीचे पाठ सेट कर सकते हैंgravity left|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />

Answer 10

महत्वपूर्ण अद्यतन

सामान्य android:drawableLeftआकृतियों का उपयोग न करें ... वेक्टर ड्राअब के साथ, अन्यथा यह कम एपीआई संस्करणों में दुर्घटनाग्रस्त हो जाएगा । (मैंने इसका लाइव ऐप में सामना किया है)

वेक्टर के लिए

यदि आप वेक्टर ड्रा करने योग्य उपयोग कर रहे हैं, तो आपको अवश्य करना चाहिए

• क्या आपने AndroidX पर माइग्रेट किया है? यदि आप AndroidX के लिए पहले माइग्रेट नहीं करना चाहिए। यह बहुत सरल है, देखें कि androidx क्या है, और कैसे माइग्रेट करना है?

• यह संस्करण में जारी किया गया था 1.1.0-alpha01, इसलिए एपकॉम संस्करण कम से कम होना चाहिए 1.1.0-alpha01। वर्तमान नवीनतम संस्करण है 1.1.0-alpha02, बेहतर विश्वसनीयता के लिए नवीनतम संस्करणों का उपयोग करें, रिलीज नोट्स देखें - लिंक ।

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• उपयोग AppCompatTextView/ AppCompatButton/AppCompatEditText

• का प्रयोग करें app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompatऔरapp:drawableEndCompat

नियमित ड्रॉबल के लिए

यदि आपको वेक्टर ड्रॉबल की आवश्यकता नहीं है, तो आप कर सकते हैं

• उपयोग android:drawableLeft, android:drawableRight, android:drawableBottom,android:drawableTop
• आप या तो नियमित TextView, Buttonऔर EditTextया AppCompatकक्षाओं का उपयोग कर सकते हैं ।

आप नीचे जैसा आउटपुट प्राप्त कर सकते हैं -

Comments

मैं xmlns:app="http://schemas.android.com/apk/res-auto"नाम स्थान का उपयोग कर रहा हूं और उन एप्लिकेशन कंपेटिटर्स चीजों को नहीं देख रहा हूं ।

— डेल

@ आपका नाम स्थान सही है, मैंने अपना उत्तर अपडेट कर दिया है, For vector drawableबिंदु फिर से देखें ।

— खेमराज

@ खेमराज आप एक दृश्य में दोनों पठनीय और पाठ को कैसे केन्द्रित कर रहे हैं (या तो एक पाठ दृश्य या बटन या कुछ और) जैसा कि आपने जो चित्र संलग्न किया है उसमें प्रदर्शित किया गया है?

— अंबर जैन

Answer 11

संभवत: मेरा समाधान बहुत सारे उपयोगकर्ताओं के लिए उपयुक्त होगा, मुझे उम्मीद है।

मैं जो सुझाव दे रहा हूं वह आपकी शैली के साथ TextView बना रहा है। यह मेरे लिए पूरी तरह से काम करता है, और इसमें एक बटन की तरह सभी विशेषताएं हैं।

सबसे पहले आप बटन शैली बनाते हैं, जिसका उपयोग आप हर जगह कर सकते हैं ... मैं बटन_with_hover.xml बना रहा हूं

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

दूसरे, Lets एक टेक्स्टव्यू बटन बनाते हैं।

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

और यह एक परिणाम है। फिर किसी भी रंग या किसी अन्य गुण और मार्जिन के साथ अपने कस्टम बटन को स्टाइल करें। सौभाग्य

Comments

हालाँकि मुझे आपके कोड का परीक्षण करना बाकी है क्योंकि दृष्टिकोण सही प्रतीत होता है, लेकिन मुझे मोबाइल ऐप में होवर प्रभाव होने का कारण समझ में नहीं आता है।

— मोहम्मद अख्तर ज़ुबरी

मैंने अपने ऐप के लिए होवर इफ़ेक्ट बनाया है, और उस ऐप के निर्माण के दौरान मुझे हॉवर इफ़ेक्ट की आवश्यकता है। लेकिन यह आप पर निर्भर है :) यदि आवश्यक न हो तो आप हॉवर प्रभाव को हटा सकते हैं।

— Jevgenij Kononov

मैंने आपके जवाब को वोट दिया है क्योंकि यह बहुत अच्छा तरीका है। मेरा एकमात्र बिंदु मोबाइल इंटरफ़ेस पर है आप कैसे होवर कर सकते हैं?

— मोहम्मद अख्तर जुबरी

ऊँ ... मैं अब देख रहा हूँ:: D Yeap, आप सही हैं। यह असंभव है। वह मँडरा प्रभाव ज्यादातर दबाव प्रभाव के लिए होता है। Xml वर्ग के लिए सिर्फ गलत नाम

— Jevgenij Kononov

Answer 12

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

Answer 13

यह कोड मेरे लिए पूरी तरह से काम करता है

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

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

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

</LinearLayout>

Comments

मैंने आपके कोड की कोशिश की है .. यह काम करता है लेकिन आपके कोड की मुख्य समस्या है यदि आपके पास बटन का सेट है, तो प्रत्येक बटन में अलग-अलग टेक्स्ट साइज़ हैं। आपका लेआउट स्थानांतरित कर दिया जाएगा। तो बटन की प्रत्येक तस्वीर की स्थिति एक अलग स्थान पर होगी। जबकि यह सीधे केंद्र में होना चाहिए। बटन के साथ ऐसा ही होता है।

— जेविजेन कोनोनोव

Answer 14

आप इसका उपयोग कर सकते हैं:

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

उस में मैंने एक छवि डाली है backgroundऔर पाठ भी जोड़ा है ..!

Answer 15

<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

या आप प्रोग्राम कर सकते हैं:

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

Answer 16

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />

Comments

यह एक सही जवाब नहीं है क्योंकि इमेज व्यू में सपोर्ट टेक्स्ट नहीं है

— मुहम्मद फासिल