Comment créer EditText avec des coins arrondis?


Réponses:


566

Il existe un moyen plus simple que celui écrit par CommonsWare. Il suffit de créer une ressource à dessiner qui spécifie la façon dont le EditTextsera dessiné:

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

Ensuite, référencez simplement ce dessin dans votre mise en page:

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

Vous obtiendrez quelque chose comme:

texte alternatif

Éditer

Sur la base du commentaire de Mark, je veux ajouter la façon dont vous pouvez créer différents états pour votre 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>

Ce sont les états:

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

Et ... maintenant, le EditTextdevrait ressembler à:

<?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
Sauf que votre solution utilise le même drawable pour tous les états. Un habitué EditTexta des arrière-plans différents pour la mise au point, la désactivation, la pression et la sélection, outre la valeur par défaut. La concentration, en particulier, peut être importante à l'avenir si nous obtenons des appareils Android dépourvus d'écrans tactiles, comme Google TV.
CommonsWare

C'est bien! Cela fonctionne bien sur l'appareil, mais empêche la vue «Mise en page graphique» d'afficher mon activité lorsque j'inclus la zone d'édition arrondie. Le journal des erreurs me donne une «UnsupportedOperationException: null». Des idées?
Ben Clayton

Bon à savoir ... en fait, je ne sais pas comment y remédier. Je suppose que c'est un bug ADT d'Eclipse.
Cristian

excellente réponse. Quand j'essaye de le faire avec le dernier ADT, rien ne se passe mais l'écran de conception de l'interface utilisateur devient un peu ombré. Mais excellente réponse. M'a sauvé de mon patron :)
Jay Mayu

2
si votre rayon est le même pour les 4 coins, utilisez android:radiusplutôt que de définir 4 lignes
Viswanath Lekshmanan

129

Voici la même solution (avec du code bonus supplémentaire) dans un seul fichier 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>

Vous définissez ensuite l'attribut background sur le fichier edittext_rounded_corners.xml:

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

obtenir l'erreur comme "0.5dp" dans l'attribut "width" n'est pas un format valide.
Maveň

J'ai essayé d'utiliser la solution ci-dessus, mais malheureusement, alors que je viens de régler topRightRadiuset que topLeftRadiusles quatre coins sont arrondis. Veuillez aider. :(
ikartik90

30

Essaye celui-là,

1.Créez le fichier round_edittext.xml dans votre 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.Appliquez l'arrière-plan de votre EditText dans un fichier 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.Vous obtiendrez une sortie comme celle-ci

entrez la description de l'image ici


1
Sachin votre image de sortie montre des coins carrés non arrondis comme demandé par le questionneur. Cela pourrait être un bon moyen d'obtenir un contour de la boîte.
JesseBoyd

2
@JesseBoyd, votre inquiétude est juste mais round_edittext dans ce fichier xml change juste les valeurs de tous les rayons selon vos besoins.
sachin pangare

17

Merci pour la réponse de Norfeldt. J'ai fait un léger changement dans son dégradé pour un meilleur effet d'ombre intérieure.

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

A l'air bien dans une mise en page claire.

entrez la description de l'image ici


7

Par ma façon de penser, il a déjà des coins arrondis.

Au cas où vous voudriez qu'ils soient plus arrondis, vous devrez:

  1. Clonez toutes les images PNG à neuf correctifs qui constituent un EditTextarrière-plan (trouvées dans votre SDK)
  2. Modifiez chacun pour avoir des coins plus arrondis
  3. Clonez la StateListDrawableressource XML qui combine ces EditTextarrière-plans en un seul Drawableet modifiez-la pour pointer vers vos fichiers PNG à neuf correctifs plus complets
  4. Utilisez ce nouveau StateListDrawablecomme arrière-plan pour votre EditTextwidget

3

Si vous voulez que le coin ne courbe pas la fin entière, utilisez le code ci-dessous.

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

Il ne courbera que les quatre angles de EditText.


2

Juste pour ajouter aux autres réponses, j'ai trouvé que la solution la plus simple pour atteindre les coins arrondis était de définir ce qui suit comme arrière-plan de votre 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>

2

Avec la bibliothèque de composants de matériaux, vous pouvez utiliser le MaterialShapeDrawablepour dessiner des formes personnalisées .

Avec un, EditTextvous pouvez faire:

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

Créez ensuite 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);

entrez la description de l'image ici

Il nécessite la version 1.1.0 de la bibliothèque.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.