Coin arrondi pour la visualisation de texte sous Android


171

J'ai une vue de texte et je veux que son coin soit de forme ronde. Je sais déjà que cela peut être fait en utilisant android:background="@drawable/somefile". Dans mon cas, cette balise est déjà incluse et ne peut donc pas être réutilisée. par exemple android:background="@drawable/mydialogbox"est déjà là pour créer une image en arrière-plan

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_gravity="top"
    android:background="@drawable/mydialogbox"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textview_name"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    </LinearLayout>

</RelativeLayout>

alors quand je veux textview(textview_name)aussi avec le coin rond, comment cela peut être réalisé.


4
si vous avez votre réponse, acceptez la réponse afin que d'autres puissent obtenir de l'aide de votre contribution
MilapTank

Réponses:


438

1) Créez rounded_corner.xmldans le drawabledossier et ajoutez le contenu suivant,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >         
   <stroke
          android:width="1dp"
          android:color="@color/common_border_color" />

   <solid android:color="#ffffff" />

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

   <corners android:radius="5dp" />
</shape>

2) Définissez ce dessinable dans la TextViewpropriété background, par exemple:

android:background="@drawable/rounded_corner"

J'espère que cela vous sera utile.


16
La réponse est juste que le type qui a posté ne l'a pas expliqué en détail. Vous devez créer un xml [par exemple. round_view.xml] dans votre dossier dessinable avec le code ci-dessus. Et dans votre mise en page entourant votre textview, mettez ceci comme paramètre android: background = "@ drawable / round_view"
Sharjeel Ahmed

4
android: background = "@ drawable / round_corner" n'utilise pas l'extension ici!
Boris Gafurov

4
Ajoutez android:shape="rectangle"si cela
n'a

Et reconstruisez votre projet s'il ne fonctionnait pas automatiquement
adek111

18

A côté radius, il y a une propriété à coin rond comme topRightRadius, topLeftRadius, bottomRightRadius,bottomLeftRadius

Exemple TextViewavec fond de redbordure with corner andgrise

bg_rounded.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="10dp"
        android:color="#f00" />

    <solid android:color="#aaa" />

    <corners
        android:radius="5dp"
        android:topRightRadius="100dp" />
</shape>

Affichage

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_rounded"
    android:text="Text"
    android:padding="20dp"
    android:layout_margin="10dp"
    />

Résultat

entrez la description de l'image ici


16

Étant donné que votre vue de niveau supérieur a déjà un jeu de propriétés android: background, vous pouvez utiliser un <layer-list>( lien ) pour créer un nouveau dessin XML qui combine à la fois votre ancien arrière-plan et votre nouvel arrière-plan aux coins arrondis.

Chaque <item>élément de la liste est dessiné sur le suivant, donc le dernier élément de la liste est celui qui se termine en haut.

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <bitmap android:src="@drawable/mydialogbox" />
    </item>
    <item>
        <shape>
            <stroke
                android:width="1dp"
                android:color="@color/common_border_color" />

            <solid android:color="#ffffff" />

            <padding
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>

6

créer un fichier xml gradient.xml sous le dossier dessinable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners android:radius="50dip" />
            <stroke android:width="1dip" android:color="#667162" />
            <gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#ffffff" />
        </shape>
    </item>
</selector>

puis ajoutez ceci à votre TextView

android:background="@drawable/gradient"

6
  1. Faites un clic droit sur le dossier dessinable et créez un nouveau fichier
  2. Nommez le fichier en fonction de vous et ajoutez l'extension en tant que .xml .
  3. Ajoutez le code suivant dans le fichier
  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <corners android:radius="5dp" />
      <stroke android:width="1dp"  />
      <solid android:color="#1e90ff" />
  </shape>
  1. Ajoutez la ligne où vous voulez le bord arrondi android:background="@drawable/corner"

4

Vous pouvez utiliser la forme rectangulaire fournie (sans dégradé, sauf si vous en voulez un) comme suit:

Dans drawable/rounded_rectangle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <stroke android:width="1dp" android:color="#ff0000" />
    <solid android:color="#00ff00" />
</shape>

Puis dans votre vue texte:

android:background="@drawable/rounded_rectangle"

Bien sûr, vous souhaiterez personnaliser les dimensions et les couleurs.


4

Il y a deux étapes

1) Créez ce fichier dans votre dossier dessinable: - rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
         <corners android:radius="10dp" />  // set radius of corner
         <stroke android:width="2dp" android:color="#ff3478" /> // set color and width of border
         <solid android:color="#FFFFFF" /> // inner bgcolor
</shape>

2) Définissez ce fichier dans votre TextViewpropriété d'arrière-plan.

android:background="@drawable/rounded_corner"

Vous pouvez également utiliser ce dessinable dans Button ou Edittext


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

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="#ffffff"/>

        </shape>
    </item>
</layer-list>

3

Avec la bibliothèque de composants matériels, vous pouvez utiliser le MaterialShapeDrawable.

Avec un TextView:

    <TextView
        android:id="@+id/textview"
        ../>

Vous pouvez appliquer par programme un MaterialShapeDrawable:

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

TextView textView = findViewById(R.id.textview);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED,radius)
        .build();

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
ViewCompat.setBackground(textView,shapeDrawable);

entrez la description de l'image ici

Si vous souhaitez changer la couleur d'arrière-plan et la bordure, appliquez simplement:

shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.....));
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color....));

0

Vous pouvez utiliser SVG pour arrondir les coins et charger dans un ImageView et utiliser ConstraintLayout pour amener ImageView sur TextView

Je l'ai utilisé pour ImageView arrondie et TextView arrondie


0

Le simple fait d'utiliser une image d'angle arrondi comme arrière-plan de cette vue le rendra.

android:background="@drawable/my_custom_image"
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.