बटन के कोनों को गोल कैसे करें?


456

मैं एक buttonदौर के कोने बनाना चाहता हूं । क्या Android में इसे प्राप्त करने का एक आसान तरीका है?



material.io/develop/android/comports/material-button बस कोने का दायरा सेट करें
स्वैगर 68

11
यह एक व्यापक सवाल नहीं है, इसके बिंदु के लिए बिल्कुल। इसे "बहुत व्यापक" के रूप में चिह्नित करना केवल एक SO मानसिकता है जिसे बदलने की आवश्यकता है। तानाशाह बनना बंद करो।
1973 में user734028

2
user734028 के साथ सहमत: क्या बिल्ली कैसे व्यापक होने के लिए बंद हो? यदि ओपी ने कोने के त्रिज्या को एन पिक्सल पर सेट करने के लिए कहा था, तो यह एकमात्र तरीका अधिक विशिष्ट हो सकता था। आ जाओ!
nyholku

जवाबों:


679

अगर आप ऐसा कुछ चाहते हैं

बटन पूर्वावलोकन

यहाँ कोड है।

1. अपने drawable फ़ोल्डर में एक xml फ़ाइल बनाएँ जैसे mybutton.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="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2.अब अपने दृश्य की पृष्ठभूमि के लिए इस drawable का उपयोग करें। यदि दृश्य बटन है तो कुछ इस तरह है:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

यह दुर्घटनाग्रस्त हो गया: org.xmlpull.v1.XmlPullParserException:: बाइनरी एक्सएमएल फ़ाइल लाइन # 24: की वजह से <आइटम> टैग एक 'drawable' विशेषता या बच्चे टैग एक drawable को परिभाषित करने की आवश्यकता है
Zennichimaro

3
क्या हम यह प्रोग्राम कर सकते हैं।
किलर

यह कहता है कि एलिमेंट सिलेक्टर को EDIT घोषित किया जाना चाहिए: क्षमा करें कि फाइल ड्रॉबल के बजाय वैल्यू फ़ोल्डर के अंदर थी। जब मैंने इसे स्थानांतरित किया, तो इसने काम किया।
F0r3v3r-A-N00b

क्या क्लिक पर छाया बनाता है? मैं नीचे की छाया की चौड़ाई कम करने की कोशिश कर रहा हूँ ... कोई किस्मत नहीं
Neville Nazerane

मैं यह नहीं देखता कि चयनकर्ताओं को किस प्रकार कोडित किया जाता है यह बताने के लिए कि बटन कोनों को कैसे कोडित किया जाना चाहिए।
TavernSenses

344

नीचे दिए गए ड्रा करने योग्य फ़ोल्डर में एक xml फ़ाइल बनाएँ

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

इसे पृष्ठभूमि के रूप में लागू करें जिसे आप कोनों को गोल करना चाहते हैं।

या आप नीचे की तरह हर कोने के लिए अलग-अलग त्रिज्या का उपयोग कर सकते हैं

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"

57
आप बस कोनों को Android तक छोटा कर सकते हैं: त्रिज्या = "10dp", जो सभी पर लागू होगा
बेन सिम्पसन

22
यह एक पूर्ण समाधान नहीं है क्योंकि यह विभिन्न बटन राज्यों (दबाया, केंद्रित, डिफ़ॉल्ट) का समर्थन नहीं करता है। एक बेहतर समाधान के लिए देखें stackoverflow.com/questions/9334618/rounded-button-android
JosephL

3
@BenSimpson, आप देखेंगे कि जब आप कोने की प्रत्येक पंक्ति को व्यक्तिगत रूप से परिभाषित करने के बजाय केवल एक पंक्ति डालते हैं तो आकार में अंतर होता है।
गरिमा तिवारी

यह हाइलाइट किए गए उत्तर से अधिक पूरी तरह से काम करता है। एक लाख धन्यवाद!
दान लिन

37

एक नीचे एक XML फ़ाइल बनाएँ। इसे बटन के बैकग्राउंड के रूप में सेट करें। यदि आप बटन के लिए और अधिक वक्र चाहते हैं, तो अपनी इच्छा से त्रिज्या विशेषता बदलें।

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

पृष्ठभूमि को अपने बटन पर सेट करें:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

30

drawable फ़ोल्डर में shape.xml बनाएँ

आकार की तरह। xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

और myactivity.xml में

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

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>

16

फ़ाइल myButton.xml बनाएँ

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorButton"/>
    <corners android:radius="10dp"/>
</shape>

अपने बटन में जोड़ें

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>

16

क्या एंड्रॉइड में इसे प्राप्त करने का एक आसान तरीका है?

हाँ, आज वहाँ है, और यह बहुत सरल है।
बस के साथ सामग्री घटक पुस्तकालयMaterialButton में उपयोग करेंapp:cornerRadius विशेषता के ।

कुछ इस तरह:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

यहाँ छवि विवरण दर्ज करें

यह गोल कोनों के साथ एक बटन प्राप्त करने के लिए पर्याप्त है।

आप सामग्री बटन शैलियों में से एक का उपयोग कर सकते हैं । उदाहरण के लिए:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

यहाँ छवि विवरण दर्ज करें

संस्करण 1.1.0 से शुरू करके आप अपने बटन का आकार भी बदल सकते हैं । बस shapeAppearanceOverlayबटन शैली में विशेषता का उपयोग करें:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

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

तो बस का उपयोग करें:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

आप shapeAppearanceOverlayxml लेआउट में भी आवेदन कर सकते हैं :

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

shapeAppearanceप्रत्येक कोने के लिए अलग-अलग आकार और आयाम रखने की अनुमति देता है:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

यहाँ छवि विवरण दर्ज करें


यह सामग्री विषय का उपयोग करने के भी जरूरी है
Vlad

@Vlad हाँ, सामग्री घटकों के लिए सामग्री विषय की आवश्यकता होती है।
गैब्रिएल मारीओटी

11

सरल तरीका मुझे पता चला कि ड्रा करने योग्य फ़ोल्डर में एक नई xml फ़ाइल बनाना और फिर उस xml फ़ाइल के लिए बटन पृष्ठभूमि को इंगित करना था। मैं इस्तेमाल किया कोड heres:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="#ff8100"/>
<corners android:radius="5dp"/>

</shape>

3
कस्टम ड्रा करने योग्य पृष्ठभूमि में सामग्री-थीम लहर प्रभाव को पुनर्स्थापित करने के लिए, android:foreground="?attr/selectableItemBackground"बटन दृश्य में जोड़ें । देखें stackoverflow.com/questions/38327188/...
श्री-आईडीई

11

ड्रा करने योग्य फ़ोल्डर में round_btn.xml फ़ाइल बनाएं ...

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
     <solid android:color="@color/#FFFFFF"/>    

     <stroke android:width="1dp"
        android:color="@color/#000000"
        />

     <padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

     <corners android:bottomRightRadius="5dip" android:bottomLeftRadius="5dip" 
         android:topLeftRadius="5dip" android:topRightRadius="5dip"/> 
  </shape>

और बटन पृष्ठभूमि के रूप में इस .xml फ़ाइल का उपयोग करें

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />

7

इस लिंक में आपकी आवश्यक सभी जानकारी है। यहाँ

Shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape      xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

    <solid   android:color="#EAEAEA"/>

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

और main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

यह आपको अपना वांछित परिणाम देना चाहिए।

शुभकामनाएँ


6

आइकन के साथ शैली बटन यहाँ छवि विवरण दर्ज करें

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />


4

यदि आप वेक्टर ड्रॉबल्स का उपयोग कर रहे हैं, तो आपको बस अपनी कोणीय परिभाषा में एक कोनों <तत्व को निर्दिष्ट करने की आवश्यकता है। मैंने इसे एक ब्लॉग पोस्ट में शामिल किया है

यदि आप बिटमैप / 9-पैच ड्रॉबल्स का उपयोग कर रहे हैं तो आपको बिटमैप छवि में पारदर्शिता के साथ कोनों को बनाने की आवश्यकता होगी।


0

दराज के फ़ोल्डर

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

लेआउट फ़ोल्डर

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

वर्ग पृष्ठभूमि से बचने के लिए शैली जोड़ना सुनिश्चित करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.