Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Android: ¿Cómo crear un TextView circular?

Mi XML simple actual está abajo, sin embargo yo quisiera que los 3 TextViews dentro de él fueran circulares, algo que rectangular.

¿Cómo puedo cambiar mi código para hacerlo?

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

Nota: Quiero un círculo real no el rectángulo de borde curvo que se muestra a continuación:

Introduzca aquí la descripción de la imagen

EDITAR:

Código actual:

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

Salida de corriente:

Introduzca aquí la descripción de la imagen

  • Botón bajo ListView no visible en android
  • Shape Drawable Tamaño no funciona
  • ¿Por qué no puedo crear el borde redondo para un rincón específico?
  • Pregunta teórica: cargar el archivo XML-Layout externo en Android
  • Horizontalmente las vistas de centro dentro de Android GridLayout
  • Match_parent no funciona como se esperaba
  • Cómo llenar los espacios vacíos con contenido debajo de la imagen en android
  • Android (cambio de cadena en código java)
  • 11 Solutions collect form web for “Android: ¿Cómo crear un TextView circular?”

    La solución típica es definir la forma y utilizarla como fondo, pero como el número de dígitos varía no es más un círculo perfecto, parece rectángulo con bordes redondos u Oval. Así que tengo desarrollar esta solución, está funcionando muy bien. Espero que ayude a alguien.

    Vista de texto circular

     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); } } 

    Luego en usted xml, dar un poco de relleno y asegúrese de que es la gravedad es el centro

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

    Y puede ajustar el ancho del trazo

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

    También estaba buscando una solución a este problema y tan fácil y cómodo que encontré, era convertir la forma de un TextView rectangular a cirular. Con este método será perfecto:

    1. Cree un nuevo archivo XML en la carpeta dibujable llamada "circle.xml" (por ejemplo) y rellénelo con el código siguiente:

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

    Con este archivo creará la nueva forma de TextView. En este caso, he creado un círculo de verde. Si desea agregar un borde, debería agregar el siguiente código al archivo anterior:

      <stroke android:width="2dp" android:color="#FFFFFF" /> 
    1. Cree otro archivo XML ("rounded_textview.xml") en la carpeta dibujable con el código siguiente:

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

    Este archivo servirá para cambiar la forma en la que elegimos.

    1. Por último, en las propiedades de TextView queremos cambiar la sección de forma, nos dirigimos al "fondo" y seleccionamos el segundo archivo XML creado ("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" /> 

    Con estos pasos, en lugar de tener un TextView TextView rectagular tiene una circular. Simplemente cambie la forma, no la funcionalidad de TextView. El resultado sería el siguiente:

    Introduzca aquí la descripción de la imagen

    También tengo que decir que estos pasos se pueden aplicar a cualquier otro componente que tiene la opción de "fondo" en las propiedades.

    ¡¡Suerte!!

    Cree un archivo texview_design.xml y rellénelo con el código siguiente. Póngalo en 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> 

    A continuación, en su archivo XML principal, simplemente añada la siguiente línea para cada TextView:

      android:background="@drawable/texview_design" 

    Segunda vía (no recomendada): circulo Descargue este círculo y colóquelo en su carpeta TextView's y luego convertirlo en TextView's fondo de su TextView's . Y luego poner la gravity en el center .

    Entonces se verá así:

    Introduzca aquí la descripción de la imagen

    Encontré esta solución para ser limpia y trabajando para textize variable y longitud del texto.

     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 h = this.getMeasuredHeight(); int w = this.getMeasuredWidth(); int r = Math.max(w,h); setMeasuredDimension(r, r); } } 

    Es un rect que impide el fondo oval de la forma de obtener circular. Hacer una vista cuadrada lo arreglará todo.

     <com.commons.custom.ui.EqualWidthHeightTextView android:id="@+id/cluster_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" 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" android:shape="oval"> <solid android:color="@color/light_blue"/> <stroke android:color="@color/white" android:width="1dp" /> </shape> 

    Esta es mi solución de trabajo

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

    Asegúrese de que su ancho de texto y la altura coinciden (ser igual en dp), si desea un círculo perfecto (no estirado).

    Asegúrese de que el texto encaje en un círculo, ya sea acortando su texto o agrandando su círculo O reduciendo su tamaño de texto O reduciendo su relleno / s, si lo hay. O una combinación de las sugerencias anteriores.

    [EDITAR]

    Por lo que puedo ver en tus imágenes, quieres añadir demasiado texto en una línea, para círculos puros.
    Tenga en cuenta que el texto debe tener un aspecto cuadrado , por lo que puede envolverlo (use \n ) o simplemente poner los números dentro de los círculos y poner los escritos arriba o más el círculo correspondiente.

    Puede probar esto en round_tv.xml en la carpeta round_tv.xml :

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

    Aplicar que dibujable en sus vistas de texto como:

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

    Salida:

    Introduzca aquí la descripción de la imagen

    Espero que esto ayude.

    Editar: Si su texto es demasiado largo, forma Oval es más preferido.

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

    Salida:

    Introduzca aquí la descripción de la imagen

    Si todavía necesita un círculo adecuado, entonces supongo que tendrá que establecer su altura de forma dinámica después de establecer el texto en ella, la nueva altura debe ser tanto como su nuevo ancho para hacer un círculo adecuado.

    Utilizar esto en su dibujable

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

    Establecer el fondo para la vista de texto

    Gran parte de la respuesta aquí parece ser hacks a la forma drawable, mientras que android en sí mismo apoya esto con la funcionalidad de formas. Esto es algo que funcionó perfectamente para mí. Usted puede hacer esto de dos maneras

    Usando una altura y un ancho fijos , eso permanecería igual sin importar el texto que usted lo puso como se muestra abajo

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

    Usando Padding que reajusta la forma sin importar el texto en el textview él como demostrado abajo

     <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

    Yo uso: /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> 

    Y luego lo uso en mi TextView como:

     android:background="@drawable/circulo" 

    No hay necesidad de complicado.

    1.Create un xml circle_text_bg.xml en su carpeta res / drawable con el código de abajo

     <?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. Utilice circle_text_bg como fondo para su texto. Nota: Para obtener un círculo perfecto, la altura y el ancho de la vista de texto deben ser los mismos. Vista previa de lo que su texto con el texto 1, 2, 3 con este fondo debería ser así

    Pruebe debajo de archivo dibujable. Cree un archivo llamado "circle" en su carpeta res/drawable y copie el código a continuación:

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

    Aplíquelo en su TextView como se muestra a continuación:

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

    Introduzca aquí la descripción de la imagen

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.