Come creare EditText con angoli arrotondati?

280

C'è un modo per creare EditTextche ha gli angoli arrotondati?

— pixel
fonte

566

C'è un modo più semplice di quello scritto da CommonsWare. Basta creare una risorsa disegnabile che specifica il modo in cui EditTextverrà disegnata:

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

Quindi, fai semplicemente riferimento a questo disegno nel tuo 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>

Otterrai qualcosa di simile a:

testo alternativo

modificare

Sulla base del commento di Mark, voglio aggiungere il modo in cui puoi creare stati diversi per il tuo 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>

Questi sono gli stati:

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

E ... ora, EditTextdovrebbe apparire come:

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

— Cristian
fonte

15

Solo che la tua soluzione utilizza lo stesso disegno per tutti gli stati. Un normale EditTextha sfondi diversi per focalizzato, disabilitato, premuto e selezionato, oltre al valore predefinito. Concentrati, in particolare, possono essere importanti per il futuro se disponiamo di dispositivi Android privi di touchscreen, come Google TV.

— Commons War

Questo è fantastico! Funziona bene sul dispositivo ma impedisce alla visualizzazione "Layout grafico" di visualizzare la mia attività quando includo la casella di modifica arrotondata. Il registro degli errori mi dà un 'UnsupportedOperationException: null'. Qualche idea?

— Ben Clayton,

Buono a sapersi ... in realtà non so come ripararlo. Immagino sia un bug ADT di Eclipse.

— Cristian,

risposta eccellente. Quando provo a farlo con l'ultimo ADT, non succede nulla, ma la schermata di progettazione dell'interfaccia utente diventa in qualche modo ombreggiata. Ma ottima risposta. Mi ha salvato dal mio capo :)

— Jay Mayu il

2

se il tuo raggio è lo stesso per tutti e 4 gli angoli usa android:radiusinvece di definire 4 linee

— Viswanath Lekshmanan

129

Ecco la stessa soluzione (con qualche codice bonus extra) in un solo file 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>

Devi solo impostare l'attributo in background sul file edittext_rounded_corners.xml:

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

— Norfeldt
fonte

ottenere l'errore come "0.5dp" nell'attributo "larghezza" non è un formato valido.

— Maveň

Ho provato a usare la soluzione sopra ma sfortunatamente, mentre ho appena impostato topRightRadiuse topLeftRadiustutti e quattro gli angoli finiscono arrotondati. Per favore aiuto. :(

— ikartik90,

30

Prova questo,

1.Crea il file arrotondato_edittext.xml nel tuo 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.Applica lo sfondo per il tuo EditText in file xml

                <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. Otterrai un output in questo modo

— sangin pangare
fonte

1

Sachin l'immagine di output mostra gli angoli quadrati non arrotondati come richiesto dall'interrogatore. Questo potrebbe essere un buon modo per ottenere una casella di contorno.

— JesseBoyd,

2

@JesseBoyd, La tua preoccupazione è giusta ma arrotondata_edittext in questo file XML basta cambiare i valori di tutti i raggi secondo le tue esigenze.

— sachin pangare,

17

Grazie per la risposta di Norfeldt. Ho apportato una leggera modifica al suo gradiente per un migliore effetto ombra interno.

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

Sembra fantastico in un layout con sfondo chiaro ..

— Sayka
fonte

7

A mio modo di vedere, ha già angoli arrotondati.

Nel caso in cui li desideri più arrotondati, dovrai:

Clona tutte le immagini PNG a nove patch che compongono uno EditTextsfondo (disponibile nel tuo SDK)
Modifica ciascuno per avere angoli più arrotondati
Clonare la StateListDrawablerisorsa XML che combina quegli EditTextsfondi in un singolo Drawablee modificarlo in modo che punti ai file PNG a nove patch più arrotondati
Usa quel nuovo StateListDrawablecome sfondo per il tuo EditTextwidget

— CommonsWare
fonte

3

Se vuoi solo l'angolo dovrebbe curvare non tutta l'estremità, usa il codice qui sotto.

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

Curverà solo i quattro angoli di EditText.

— Kirtikumar A.
fonte

2

Solo per aggiungere alle altre risposte, ho scoperto che la soluzione più semplice per ottenere gli angoli arrotondati era impostare quanto segue come sfondo per il tuo 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>

— Un droide
fonte

2

Con la Libreria dei componenti materiali è possibile utilizzare MaterialShapeDrawableper disegnare forme personalizzate .

Con un EditTextpuoi fare:

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

Quindi crea un 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);

Richiede la versione 1.1.0 della libreria.

— Gabriele Mariotti
fonte