web-dev-qa-db-fra.com

Android: Créer un TextView circulaire?

Mon XML simple actuel est ci-dessous, mais je voudrais que les 3 TextViews qu'il contient soient circulaires plutôt que rectangulaires.

Comment puis-je changer mon code pour le faire?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <TextView
        Android:id="@+id/tvSummary1"
        Android:layout_width="270dp"
        Android:layout_height="60dp" >
    </TextView>

    <TextView
        Android:id="@+id/tvSummary2"
        Android:layout_width="270dp"
        Android:layout_height="60dp" >
    </TextView>

    <TextView
        Android:id="@+id/tvSummary3"
        Android:layout_width="270dp"
        Android:layout_height="60dp" >
    </TextView>

</LinearLayout>

Remarque: je veux un réel cercle pas le rectangle incurvé bord montré ci-dessous:

enter image description here

EDIT:

code actuel:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <TextView
        Android:id="@+id/tvSummary1"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:text=" " 
        Android:gravity="left|center_vertical"
        Android:background="@drawable/circle"/>

    <TextView
        Android:id="@+id/tvSummary2"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:background="@drawable/circle" >
    </TextView>

    <TextView
        Android:id="@+id/tvSummary3"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:background="@drawable/circle" >
    </TextView>

</LinearLayout>

Courant de sortie:

enter image description here

javaandroidtextviewxml-layout
49
codeme2020

Je recherchais également une solution à ce problème et, aussi facile et confortable que je l’ai trouvé, était de convertir la forme d’un TextView rectangulaire en circulaire. Avec cette méthode sera parfaite:

  1. Créez un nouveau fichier XML dans le dossier pouvant être dessiné appelé "circle.xml" (par exemple) et remplissez-le avec le code suivant:

    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">

    <solid Android:color="#9FE554" />

    <size
        Android:height="60dp"
        Android:width="60dp" />

</shape>

Avec ce fichier, vous créerez la nouvelle forme de TextView. Dans ce cas, j'ai créé un cercle de vert. Si vous souhaitez ajouter une bordure, vous devez ajouter le code suivant au fichier précédent:

    <stroke
        Android:width="2dp"
        Android:color="#FFFFFF" />

  1. Créez un autre fichier XML ("rounded_textview.xml") dans le dossier pouvant être dessiné avec le code suivant:

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/circle" />
</selector>

Ce fichier servira à changer la manière dont TextView nous éligamos.

  1. Enfin, dans les propriétés TextView, nous souhaitons modifier la section way, nous nous sommes dirigés vers "l'arrière-plan" et nous avons sélectionné le deuxième fichier XML créé ("rounded_textview.xml").

    <TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="H"
    Android:textSize="30sp"
    Android:background="@drawable/rounded_textview"
    Android:textColor="@Android:color/white"
    Android:gravity="center"
    Android:id="@+id/mark" />

Avec ces étapes, au lieu d'avoir un TextView TextView rectangle ont une circulaire. Il suffit de changer la forme, pas les fonctionnalités de TextView. Le résultat serait le suivant:

enter image description here

De plus, je dois dire que ces étapes peuvent être appliquées à tout autre composant ayant l'option "fond" dans les propriétés.

La chance!!

81
Vicky Vicent

La solution typique est de définir la forme et de l’utiliser comme arrière-plan, mais comme le nombre de chiffres varie, ce n’est plus un cercle parfait, il ressemble à un rectangle à bords arrondis ou à un ovale. J'ai donc développé cette solution, elle fonctionne très bien. J'espère que ça va aider quelqu'un.

Circular Text View

Here is the code of custom TextView 

import Android.content.Context;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.util.AttributeSet;
import Android.widget.TextView;

public class CircularTextView extends TextView
{
private float strokeWidth;
int strokeColor,solidColor;

public CircularTextView(Context context) {
    super(context);
}

public CircularTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CircularTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


@Override
public void draw(Canvas canvas) {

    Paint circlePaint = new Paint();
    circlePaint.setColor(solidColor);
    circlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    Paint strokePaint = new Paint();
    strokePaint.setColor(strokeColor);
    strokePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    int  h = this.getHeight();
    int  w = this.getWidth();

    int diameter = ((h > w) ? h : w);
    int radius = diameter/2;

    this.setHeight(diameter);
    this.setWidth(diameter);

    canvas.drawCircle(diameter / 2 , diameter / 2, radius, strokePaint);

    canvas.drawCircle(diameter / 2, diameter / 2, radius-strokeWidth, circlePaint);

    super.draw(canvas);
}

public void setStrokeWidth(int dp)
{
    float scale = getContext().getResources().getDisplayMetrics().density;
    strokeWidth = dp*scale;

}

public void setStrokeColor(String color)
{
    strokeColor = Color.parseColor(color);
}

public void setSolidColor(String color)
{
    solidColor = Color.parseColor(color);

}
}

Ensuite, dans votre fichier xml, donnez un peu de rembourrage et assurez-vous que la gravité est au centre

<com.app.tot.customtextview.CircularTextView
        Android:id="@+id/circularTextView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="11"
        Android:gravity="center"
        Android:padding="3dp"/>

Et vous pouvez définir la largeur du trait

circularTextView.setStrokeWidth(1);
circularTextView.setStrokeColor("#ffffff");
circularTextView.setSolidColor("#000000");
65
umerk44

Créez un fichier texview_design.xml et remplissez-le avec le code suivant. Mettez-le dans res/drawable.

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >

        <solid Android:color="#98AFC7" />

        <stroke
            Android:width="2dp"
            Android:color="#98AFC7" />

        <corners
            Android:bottomLeftRadius="20dp"
            Android:bottomRightRadius="20dp"
            Android:topLeftRadius="20dp"
            Android:topRightRadius="20dp" />

    </shape>

Ensuite, dans votre fichier XML principal, ajoutez simplement la ligne suivante pour chaque TextView:

  Android:background="@drawable/texview_design"

Deuxième voie (non recommandé): circle Téléchargez ce cercle et placez-le dans votre dossier drawable, puis faites-en votre TextView's Contexte. puis réglez le gravity sur center.

alors cela ressemblera à ceci:

enter image description here

42
Tushar Gogna

C'est un rectangle qui empêche le fond de la forme ovale de devenir circulaire.
Le fait de voir un carré corrigera tout.

J'ai trouvé cette solution propre et adaptée à la taille et à la taille du texte.

public class EqualWidthHeightTextView extends TextView {

    public EqualWidthHeightTextView(Context context) {
        super(context);
    }

    public EqualWidthHeightTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public EqualWidthHeightTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int r = Math.max(getMeasuredWidth(),getMeasuredHeight());
        setMeasuredDimension(r, r);

    }
}


sage

<com.commons.custom.ui.EqualWidthHeightTextView
    Android:id="@+id/cluster_count"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    Android:text="10+"
    Android:background="@drawable/oval_light_blue_bg"
    Android:textColor="@color/white" />


oval_light_blue_bg.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"<br>
       Android:shape="oval">
   <solid Android:color="@color/light_blue"/>
   <stroke Android:color="@color/white" Android:width="1dp" />
</shape>
20
Javanator

1.Créez un fichier XML circle_text_bg.xml dans votre dossier res/drawable avec le code ci-dessous

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
     <solid Android:color="#fff" />

    <stroke
        Android:width="1dp"
        Android:color="#98AFC7" />
    <corners
         Android:bottomLeftRadius="50dp"
         Android:bottomRightRadius="50dp"
         Android:topLeftRadius="50dp"
         Android:topRightRadius="50dp" />
    <size
         Android:height="20dp"
         Android:width="20dp" />
</shape>

2. Utilisez circle_text_bg comme arrière-plan pour votre affichage de texte. NB: Pour obtenir un cercle parfait, la hauteur et la largeur de la vue texte doivent être identiques . n aperçu de ce que votre vue texte avec le texte 1, 2, 3 avec cet arrière-plan devrait ressembler à ceci

9
Hackman

C'est ma solution qui fonctionne réellement

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval"
    >
    <!-- The fill color -->
    <solid Android:color="#ffff" />
    <!-- Just to add a border -->
    <stroke
        Android:color="#8000"
        Android:width="2dp"
    />
</shape>

Assurez-vous que votre largeur et votre hauteur TextView correspondent (soyez les mêmes en dp), si vous voulez un cercle parfait (non étiré).

Assurez-vous que le texte s’inscrit dans un cercle, soit en raccourcissant votre texte OR en élargissant votre cercle OR, réduisant ainsi la taille de votre texte OR réduisez votre/vos padding, le cas échéant. OR une combinaison des suggestions ci-dessus.

[EDIT]

Pour ce que je peux voir dans vos images, vous voulez ajouter trop de texte sur une ligne, pour les cercles purs.
Considérez que le texte doit avoir un aspect carré, vous pouvez donc l’envelopper (utilisez \n) ou simplement mettre les nombres à l’intérieur des cercles et placer les écritures au-dessus ou au-dessous du cercle correspondant.

8
Fantômas

Vous pouvez essayer ceci dans round_tv.xml dans un dossier pouvant être tiré:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <stroke Android:color="#22ff55" Android:width="3dip"/>

    <corners
        Android:bottomLeftRadius="30dp"
        Android:bottomRightRadius="30dp"
        Android:topLeftRadius="30dp"
        Android:topRightRadius="30dp" />

    <size
        Android:height="60dp"
        Android:width="60dp" />

</shape>

Appliquez ce qui peut être dessiné dans vos textviews comme:

<TextView
    Android:id="@+id/tv"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/round_tv"
    Android:gravity="center_vertical|center_horizontal"
    Android:text="ddd"
    Android:textColor="#000"
    Android:textSize="20sp" />

Sortie:

enter image description here

J'espère que cela t'aides.

Éditer: Si votre texte est trop long, la forme ovale est préférable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">

    <stroke Android:color="#55ff55" Android:width="3dip"/>

    <corners
        Android:bottomLeftRadius="30dp"
        Android:bottomRightRadius="30dp"
        Android:topLeftRadius="30dp"
        Android:topRightRadius="30dp" />

    <size
        Android:height="60dp"
        Android:width="60dp" />

</shape>

Sortie:

enter image description here

Si vous avez toujours besoin d'un cercle approprié, alors vous devrez définir sa hauteur de manière dynamique après y avoir inséré du texte. La nouvelle hauteur doit être équivalente à sa nouvelle largeur afin de former un cercle approprié.

5
MysticMagicϡ

utilisez ceci dans votre dessin

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
    Android:shape="oval">


    <solid Android:color="#55ff55"/>


    <size Android:height="60dp"
        Android:width="60dp"/>

</shape>

Définir l'arrière-plan pour la vue texte comme ceci

4
Remees M Syde

Une grande partie de la réponse ici semble être de la forme que l'on peut dessiner, alors que Android le supporte lui-même avec la fonctionnalité de formes. C'est quelque chose qui a parfaitement fonctionné pour moi.Vous pouvez le faire de deux manières

tilisant une hauteur et une largeur fixes, cela resterait le même quel que soit le texte que vous le mettez, comme indiqué ci-dessous

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">

<solid Android:color="@color/alpha_white" />

    <size Android:width="25dp" Android:height="25dp"/>

<stroke Android:color="@color/color_primary" Android:width="1dp"/>

</shape>

sing Padding qui réajuste la forme indépendamment du texte dans le textview il comme montré ci-dessous

<solid Android:color="@color/alpha_white" />

<padding
    Android:bottom="@dimen/semi_standard_margin"
    Android:left="@dimen/semi_standard_margin"
    Android:right="@dimen/semi_standard_margin"
    Android:top="@dimen/semi_standard_margin" />

<stroke Android:color="@color/color_primary" Android:width="2dp"/>

semi_standard_margin = 4dp

3
Mushtaq Jameel

J'utilise: / drawable/circulo.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">
    <solid Android:angle="270"
        Android:color="@color/your_color" />

</shape>

Et puis je l'utilise dans mon TextView comme:

Android:background="@drawable/circulo"

pas besoin de le compliquer.

2
bheatcoker

Essayez ci-dessous fichier dessinable. Créez un fichier nommé "cercle" dans votre res/drawable dossier et copie ci-dessous code:

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval" >

    <solid Android:color="#FFFFFF" />

    <stroke
        Android:width="1dp"
        Android:color="#4a6176" />

    <padding
        Android:left="10dp"
        Android:right="10dp"
        Android:top="10dp"
        Android:bottom="10dp"
         />

    <corners Android:radius="10dp" />

</shape>

Appliquez-le dans votre TextView comme ci-dessous:

<TextView
        Android:id="@+id/tvSummary1"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:text="Hello World" 
        Android:gravity="left|center_vertical"
        Android:background="@drawable/round_bg">

    </TextView>

enter image description here

0
GrIsHu