कस्टम सर्कल बटन

Question

मैं कस्टम बटन बनाना चाहता हूं और मुझे इसे सर्कल बनाने की आवश्यकता है। मैं एक मंडली बटन कैसे बना सकता हूं? मुझे नहीं लगता कि ड्रॉ 9पैच के साथ संभव हो सकता है।

इसके अलावा मुझे नहीं पता कि कस्टम बटन कैसे बनाते हैं!

क्या आपके पास कोई सुझाव है?

Comments

आपको बटन वर्ग का विस्तार करना होगा और ऑनड्राइव विधि को ओवरराइड करना होगा।

— अश्विन एन भानुशाली

लेकिन समस्या यह है कि अगर मैं इसका विस्तार करता हूं, और उपयोगकर्ता सर्कल से बाहर निकलता है, तो ऑन्लिक को बुलाया जाएगा, इसे कैसे हल किया जाए।

— अता

आप अपने बटन के लिए पृष्ठभूमि के रूप में एक गोल आकार की छवि क्यों सेट नहीं करते?

— MKJParekh

मैंने सरल ऑनड्रॉन किया, यह डिज़ाइन दृश्य पर दिखाता है, लेकिन जब मैं एप्लिकेशन चलाना चाहता हूं, तो यह लोडिंग पर यह समस्या बनाता है: android.view.InflateException: बाइनरी एक्सएमएल फ़ाइल लाइन # 52: कक्षा में प्रवेश करने में त्रुटि ।inaros.magicbox_customButtonPlay

— अता

Answer 1

इस तरह का उपयोग करने योग्य xml:

निम्न सामग्री को फ़ोल्डर round_button.xmlमें सहेजेंdrawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

एंड्रॉयड सामग्री प्रभाव: हालांकि FloatingActionButtonएक बेहतर विकल्प है, तो आप इसे एक्सएमएल चयनकर्ता का उपयोग करते हैं चाहते हैं, एक फ़ोल्डर बनाने drawable-v21में resऔर एक अन्य को बचाने round_button.xmlनिम्नलिखित एक्सएमएल के साथ वहां

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

और इसे Buttonइस तरह से xml की पृष्ठभूमि के रूप में सेट करें:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

जरूरी:

1. यदि आप चाहते हैं कि यह इन सभी राज्यों (सक्षम, अक्षम, हाइलाइट किए गए आदि) को दिखाने के लिए, आप यहां वर्णित के रूप में चयनकर्ता का उपयोग करेंगे ।
2. आपको ड्रॉ करने योग्य पिछड़े-संगत बनाने के लिए दोनों फ़ाइलों को रखना होगा। अन्यथा, आपको पिछले Android संस्करण में अजीब अपवादों का सामना करना पड़ेगा।

Comments

ड्रॉबल फोल्डर से आपका मतलब 'ड्रॉएबल ’नाम के फोल्डर को खोलना है या ड्रॉबल-एमडीपीआई, एचडीपीआई आदि में सेव करना है…?

— १२:१५ पर झंग

@Jangang नहीं, आपको इसे केवल 'ड्रॉएबल' फोल्डर में सहेजने की जरूरत है, ड्रॉबल के लिए कोई भी xml संसाधन आमतौर पर 'ड्रॉएबल' में सेव किया जाता है, mdpi, hdpi आदि में नहीं।

— आदिल सोमरो

K thx, मेरे पास अब तक कोई ड्रॉबल फोल्डर नहीं था (केवल mdpi, hdpi ... और -v21) :)

— Jjang

PS बटन को एक डिफ़ॉल्ट तरंग रंग कैसे दें? ग्रे की तरह जो डिफ़ॉल्ट रूप से ऐप के सभी बटनों को रंग रहा है।

— झंग

@ AdilSoomro मुझे आपके ईमेल पते की आवश्यकता है pls या मुझे मेल करें [e-mail] , पाक से

— आदिल

Answer 2

मार्कुशी ने अद्भुत प्रभावों के साथ एक सर्कल बटन विजेट लिखा। यहाँ क्लिक करें !

Comments

एक गैर परिपत्र छवि के साथ इसका उपयोग कैसे करें?

— tomsoft

बस एक सिर: इस जवाब में जुड़ा पुस्तकालय अब पदावनत है। लेखक (मार्कुशी) इसके बजाय फ्लोटिंग एक्शन बटन का उपयोग करने की सलाह देता है ।

— मोनिका

@ABoschman क्या हम सर्कल बटन विजेट में टेक्स्ट डाल सकते हैं? या सिर्फ ड्रॉबल्स के लिए

— रुचिर बैरोनिया

@ रुचिरबनिया मुझे लगता है कि आपको वास्तव में Android FAB पर विचार करना चाहिए। छोटे गोल बटन के अंदर आप कितना गद्य रखना चाहते हैं? यह आइकन के लिए बनाया गया लगता है। बाहर की जाँच करें: google.com/design/spec/comports/…

— मोनिका

@ABoschman अरे, लेकिन मैं वास्तव में इस पुस्तकालय में इस बटन के प्रभाव को पसंद करता हूं। क्या कोई रास्ता है?

— रुचिर बैरोनिया

Answer 3

कस्टम Android बटन के लिए AngryTool

आप इस टूल साइट के साथ किसी भी प्रकार के कस्टम एंड्रॉइड बटन बना सकते हैं ... मैं इस टूलसाइट के साथ गोल कोने के साथ सर्कल और स्क्वायर बटन बनाता हूं .. यह हो सकता है कि मैं आपकी मदद करूं

Answer 4

आधिकारिक सामग्री अवयव पुस्तकालय के साथ आप MaterialButtonआवेदन Widget.MaterialComponents.Button.Iconशैली का उपयोग कर सकते हैं ।

कुछ इस तरह:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

वर्तमान में app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomगुण बटन अतिरिक्त गद्दी अंतरिक्ष से परहेज पर आइकन केंद्र के लिए आवश्यक हैं।

app:shapeAppearanceOverlayगोल कोनों को प्राप्त करने के लिए विशेषता का उपयोग करें । इस मामले में आपके पास एक चक्र होगा।

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

अंतिम परिणाम:

Comments

धन्यवाद @ गैरीबेल मैरीओटी app:iconPadding="0dp"आइकन केंद्रित करने की आवश्यकता पर प्रकाश डालते हुए वर्थ । जब तक मुझे यह नहीं मिला, मैंने समय की कोशिश करने वाले केंद्र को जला दिया। ऐसा लगता है कि यह एक ऐसा ऐप है: आइकनगैविटी "केंद्र" मान को याद नहीं कर रही है।

— स्कूटीआब

धन्यवाद @ गैरीबेल मैरीओटी मेरे लिए काम ठीक है!

— एंड्रॉइड

Answer 5

अगर आप वेक्टरड्राएबल और कांस्ट्रेन्डलैट का उपयोग करना चाहते हैं

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

मंडली पृष्ठभूमि: Circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

Answer 6

एक FAB की तलाश में इस शैली पर बटन MaterialButton:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

परिणाम:

यदि आप आकार बदलते हैं तो बटन आकार के आधे हिस्से का उपयोग करने में सावधान रहें app:cornerRadius।