Wie erstelle ich EditText mit abgerundeten Ecken?


Antworten:


566

Es gibt einen einfacheren Weg als den von CommonsWare. Erstellen Sie einfach eine zeichnbare Ressource, die angibt, EditTextwie 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>

Verweisen Sie dann 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 Zustände für Ihre erstellen können 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>

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

15
Abgesehen davon, dass Ihre Lösung für alle Zustände dieselbe Zeichnungsfunktion verwendet. Ein Stammgast EditTexthat neben der Standardeinstellung verschiedene Hintergründe für fokussiert, deaktiviert, gedrückt und ausgewählt. Insbesondere die Fokussierung kann in Zukunft wichtig sein, wenn wir einige Android-Geräte ohne Touchscreen wie Google TV erhalten.
CommonsWare

Das ist toll! Es funktioniert auf dem Gerät einwandfrei, verhindert jedoch, dass in der Ansicht "Grafisches Layout" meine Aktivität angezeigt wird, wenn ich das abgerundete Bearbeitungsfeld einbinde. Das Fehlerprotokoll gibt mir eine 'UnsupportedOperationException: null'. Irgendwelche Ideen?
Ben Clayton

Gut zu wissen ... eigentlich weiß ich nicht, wie ich das beheben soll. Ich denke, es ist ein ADT-Fehler von Eclipse.
Cristian

ausgezeichnete Antwort. Wenn ich versuche, dies mit dem neuesten ADT zu tun, passiert nichts, aber der UI-Entwurfsbildschirm wird irgendwie schattiert. Aber ausgezeichnete Antwort. Hat mich von meinem Chef gerettet :)
Jay Mayu

2
Wenn Ihr Radius für alle 4 Ecken gleich ist, verwenden Sie android:radiusstatt 4 Linien zu definieren
Viswanath Lekshmanan

129

Hier ist die gleiche 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>

Sie setzen dann einfach das Hintergrundattribut auf die Datei edittext_rounded_corners.xml:

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

Der Fehler "0.5dp" im Attribut "width" ist kein gültiges Format.
Maveň

Ich habe versucht, die obige Lösung zu verwenden, aber leider, während ich gerade gesetzt habe topRightRadiusund topLeftRadiusalle vier Ecken abgerundet sind. Bitte helfen Sie. :(
ikartik90

30

Probier diese,

1.Erstellen Sie die Datei round_edittext.xml 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 der 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 diese

Geben Sie hier die Bildbeschreibung ein


1
Sachin Ihr Ausgabebild zeigt quadratische Ecken, die nicht wie vom Fragesteller gewünscht abgerundet sind. Dies könnte ein guter Weg sein, um die Box mit einem Umriss zu versehen.
JesseBoyd

2
@JesseBoyd, Ihr Anliegen ist richtig, aber round_edittext in dieser XML-Datei ändert einfach die Werte aller Radius gemäß Ihren Anforderungen.
Sachin Pangare

17

Danke für Norfeldts Antwort. Ich habe den Farbverlauf leicht 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 hellen Hintergrundlayout.

Geben Sie hier die Bildbeschreibung ein


7

Meiner Meinung nach 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 EditTextHintergrund bilden (in Ihrem SDK enthalten).
  2. Ändern Sie jede, um mehr abgerundete Ecken zu haben
  3. Klonen Sie das XML StateListDrawable Ressource, die diese EditTextHintergründe zu einer einzigen kombiniert Drawable, und ändern Sie sie so, dass sie auf Ihre abgerundeten PNG-Dateien mit neun Patches verweist
  4. Verwenden Sie das neue StateListDrawableals Hintergrund für Ihr EditTextWidget

3

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 gekrümmt EditText.


2

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>

2

Mit der Materialkomponenten - Bibliothek können Sie mit der MaterialShapeDrawableauf individuelle Formen zu zeichnen .

Mit einem können EditTextSie tun:

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

Dann erstellen Sie ein 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);

Geben Sie hier die Bildbeschreibung ein

Es erfordert die Version 1.1.0 der Bibliothek.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.