wake-up-neo.com

Wie erstelle ich EditText mit abgerundeten Ecken?

Gibt es eine Möglichkeit, EditText mit abgerundeten Ecken zu erstellen?

androidandroid-edittextviewsrounded-corners
258
pixel

Es gibt einen einfacheren Weg als den von CommonsWare. Erstellen Sie einfach eine zeichnungsfähige Ressource, die angibt, wie EditText gezeichnet wird:

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

Dann verweisen Sie einfach auf diese Zeichnung in Ihrem Layout:

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

Sie erhalten so etwas wie:

alt text

Bearbeiten

Basierend auf Marks Kommentar möchte ich hinzufügen, wie Sie verschiedene Status für Ihr EditText erstellen können:

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

Dies sind die Staaten:

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

Und ... jetzt sollte das EditText so aussehen:

<?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>
534
Cristian

Hier ist dieselbe Lösung (mit zusätzlichem Bonuscode) in nur einer XML-Datei:

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

Dann setzen Sie das background-Attribut einfach auf die Datei edittext_rounded_corners.xml:

<EditText  Android:id="@+id/editText_name"
      Android:background="@drawable/edittext_rounded_corners"/>
125
Norfeldt

Probier diese,

1.Erstellen Sie eine round_edittext.xml-Datei in Ihrem Drawable

    <?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.Wenden Sie den Hintergrund für Ihren EditText in einer XML-Datei an

                <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.Sie erhalten eine Ausgabe wie folgt

enter image description here

28
sachin pangare

Danke für die Antwort von Norfeldt. Ich habe den Farbverlauf geringfügig geändert, um einen besseren inneren Schatteneffekt zu erzielen.

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

Sieht gut aus in einem Layout mit hellem Hintergrund.

enter image description here

16
Sayka

Meines Erachtens hat es bereits abgerundete Ecken.

Wenn Sie möchten, dass sie runder sind, müssen Sie:

  1. Klonen Sie alle PNG-Bilder mit neun Patches, die einen EditText -Hintergrund bilden (in Ihrem SDK enthalten).
  2. Ändern Sie jedes, um mehr gerundete Ecken zu haben
  3. Klonen Sie die XML-Ressource StateListDrawable, die diese EditText Hintergründe zu einer einzigen Drawable kombiniert, und ändern Sie sie so, dass sie auf Ihre runderen PNG-Dateien mit neun Patches verweist
  4. Verwenden Sie dieses neue StateListDrawable als Hintergrund für Ihr EditText Widget
7
CommonsWare

Wenn Sie möchten, dass nur die Ecke nicht das ganze Ende krümmt, verwenden Sie den folgenden Code.

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

Es werden nur die vier Winkel von EditText gekrümmt.

3
Kirtikumar A.

Um die anderen Antworten zu ergänzen, stellte ich fest, dass die einfachste Lösung zum Erreichen der abgerundeten Ecken darin bestand, Folgendes als Hintergrund für Ihren Edittext festzulegen.

<?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>
1
A Droid