गोलाकार कोनों के साथ EditText कैसे बनाएं?

Question

क्या ऐसा कोई तरीका है जिससे EditTextगोल कोनों को बनाया जा सके?

Answer 1

कॉमन्सवेयर द्वारा लिखित एक से एक आसान तरीका है। बस एक EditTextआकर्षित करने योग्य संसाधन बनाएं जो कि जिस तरह से खींचा जाएगा वह निर्दिष्ट करता है :

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

फिर, इस लेआउट को अपने लेआउट में देखें:

<?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"
    >
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:padding="5dip"
    android:background="@drawable/rounded_edittext" />
</LinearLayout>

आपको कुछ ऐसा मिलेगा:

संपादित करें

मार्क की टिप्पणी के आधार पर, मैं उस तरीके को जोड़ना चाहता हूं जिससे आप अपने लिए अलग राज्य बना सकते हैं EditText:

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_states.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
     android:state_pressed="true" 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_focused" />
    <item 
     android:state_focused="true" 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_focused" />
    <item 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_edittext" />
</selector>

ये राज्य हैं:

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
 <stroke android:width="2dp" android:color="#FF0000" />
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

और ... अब, EditTextजैसा दिखना चाहिए:

<?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">
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    android:background="@drawable/rounded_edittext_states"
    android:padding="5dip"/>
</LinearLayout>

Comments

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

— कॉमन्सवेयर

यह भी खूब रही! यह डिवाइस पर ठीक काम करता है लेकिन जब मैं राउंडेड एडिट बॉक्स को शामिल करता हूं, तो मेरी गतिविधि को प्रदर्शित करने से 'ग्राफिकल लेआउट' को रोकता है। त्रुटि लॉग मुझे 'UnsupportedOperationException: null' देता है। कोई विचार?

— बेन क्लेटन

जानकर अच्छा लगा ... वास्तव में मुझे नहीं पता कि इसे कैसे ठीक करना है। मुझे लगता है कि यह एक ग्रहण एडीटी बग है।

— क्रिस्टियान

शानदार जवाब। जब मैं इसे नवीनतम एडीटी के साथ करने की कोशिश करता हूं, तो कुछ भी नहीं होता है, लेकिन यूआई डिजाइन स्क्रीन छायांकित की तरह हो जाती है .. हालांकि इसकी घोषणा करना। लेकिन उत्कृष्ट जवाब। मेरे मालिक से मुझे छीन लिया :)

— Jay Mayu

यदि आपकी त्रिज्या android:radius4 लाइनों को परिभाषित करने के बजाय सभी 4 कोनों के लिए समान है

— विश्वनाथ लीक्षमान

Answer 2

यहाँ एक ही समाधान (कुछ अतिरिक्त बोनस कोड के साथ) सिर्फ एक XML फ़ाइल में है:

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/edittext_rounded_corners.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:state_focused="true">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />
         <corners
            android:radius="15dp" />
    </shape>
</item>

<item android:state_pressed="true" android:state_focused="false">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />      
        <corners
            android:radius="15dp" />       
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="true">
    <shape>
        <solid android:color="#FFFFFF"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />  
        <corners
            android:radius="15dp" />                          
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient 
            android:startColor="#F2F2F2"
            android:centerColor="#FFFFFF"
            android:endColor="#FFFFFF"
            android:angle="270"
        />
        <stroke
            android:width="0.7dp"                
            android:color="#BDBDBD" /> 
        <corners
            android:radius="15dp" />            
    </shape>
</item>

<item android:state_enabled="true">
    <shape>
        <padding 
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
            />
    </shape>
</item>

</selector>

आप तब पृष्ठभूमि विशेषता को edittext_rounded_corners.xml फ़ाइल में सेट करते हैं:

<EditText  android:id="@+id/editText_name"
      android:background="@drawable/edittext_rounded_corners"/>

Comments

विशेषता "चौड़ाई" में "0.5dp" के रूप में त्रुटि प्राप्त करना एक वैध प्रारूप नहीं है।

— मेवेद

मैंने उपरोक्त समाधान का उपयोग करने की कोशिश की, लेकिन दुर्भाग्य से, जब मैंने बस सेट किया topRightRadiusऔर topLeftRadiusसभी चार कोनों को गोल किया। कृपया मदद कीजिए। :(

— ikartik90

Answer 3

इसको आजमाओ,

1. अपनी Drawable में Rounded_edittext.xml फ़ाइल बनाएँ

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" android:padding="15dp">
        <solid android:color="#FFFFFF"/>
        <corners
            android:bottomRightRadius="0dp"
            android:bottomLeftRadius="0dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp"/>
        <stroke android:width="1dip" android:color="#f06060" />
    </shape>

2. xml फ़ाइल में अपने EditText की पृष्ठभूमि

                <EditText
                android:id="@+id/edit_expiry_date"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:background="@drawable/rounded_edittext"
                android:hint="@string/shop_name"
                android:inputType="text"/>

3. आप इस तरह उत्पादन मिल जाएगा

Comments

सचिन आपकी आउटपुट छवि से पता चलता है कि प्रश्न के अनुरोध के अनुसार वर्ग कोनों को गोल नहीं किया गया है। यह आउटलाइन के लिए बॉक्स प्राप्त करने का एक अच्छा तरीका हो सकता है।

— JesseBoyd

@JesseBoyd, आपकी चिंता सही है लेकिन इस xml फ़ाइल में rounded_edittext बस आपकी आवश्यकता के अनुसार सभी त्रिज्या के मूल्यों को बदल देता है।

— साचिन पंगारे

Answer 4

नॉरफ़ेल्ट के उत्तर के लिए धन्यवाद। मैंने बेहतर आंतरिक छाया प्रभाव के लिए इसके बदलाव में थोड़ा बदलाव किया है।

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient
            android:centerY="0.2"
            android:startColor="#D3D3D3"
            android:centerColor="#65FFFFFF"
            android:endColor="#00FFFFFF"
            android:angle="270"
            />
        <stroke
            android:width="0.7dp"
            android:color="#BDBDBD" />
        <corners
            android:radius="15dp" />
    </shape>
</item>

एक प्रकाश पृष्ठभूमि लेआउट में बहुत अच्छा लग रहा है ..

Answer 5

मेरे सोचने के तरीके से, यह पहले से ही गोल कोनों में है।

यदि आप उन्हें अधिक गोल चाहते हैं, तो आपको निम्नलिखित की आवश्यकता होगी:

1. एक EditTextपृष्ठभूमि बनाने वाले नौ-पैच PNG चित्रों के सभी क्लोन करें (आपके SDK में पाया गया)
2. अधिक गोल कोनों के लिए प्रत्येक को संशोधित करें
3. XML StateListDrawableसंसाधन को क्लोन करें जो उन EditTextबैकग्राउंड को एक सिंगल में जोड़ता है Drawable, और इसे संशोधित करके आपके अधिक-गोल नौ-पैच PNG फ़ाइलों को इंगित करता है
4. StateListDrawableअपने EditTextविजेट के लिए पृष्ठभूमि के रूप में उस नए का उपयोग करें

Answer 6

यदि आप चाहते हैं कि केवल कोने ही पूरे छोर पर वक्र न हों, तो नीचे दिए गए कोड का उपयोग करें।

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

    <corners android:radius="10dp" />

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

    <gradient
        android:angle="90"
        android:endColor="@color/White"
        android:startColor="@color/White" />

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

</shape>

यह केवल चार कोणों को वक्र करेगा EditText।

Answer 7

बस अन्य उत्तरों में जोड़ने के लिए, मैंने पाया कि गोल कोनों को प्राप्त करने का सबसे सरल समाधान निम्नलिखित था, जो आपके Edittext की पृष्ठभूमि के रूप में निम्नलिखित सेट करना था।

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

    <solid android:color="@android:color/white"/>
    <corners android:radius="8dp"/>

</shape>

Answer 8

सामग्री अवयव पुस्तकालय के साथ आप उपयोग कर सकते हैं MaterialShapeDrawable कस्टम आकृतियों को आकर्षित करने लिए ।

के साथ EditText आप कर सकते हैं:

    <EditText
        android:id="@+id/edittext"
        ../>

फिर एक बनाएँ MaterialShapeDrawable:

float radius = getResources().getDimension(R.dimen.default_corner_radius);

EditText editText = findViewById(R.id.edittext);
//Apply the rounded corners 
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED,radius)
                .build();

MaterialShapeDrawable shapeDrawable = 
            new MaterialShapeDrawable(shapeAppearanceModel);
//Apply a background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.white));
//Apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color.colorAccent));

ViewCompat.setBackground(editText,shapeDrawable);

यह पुस्तकालय के संस्करण 1.1.0 की आवश्यकता है ।