java - programacion - Android: ¿Cómo crear una vista circular de texto?

manual de programacion android pdf

Question

Mi XML simple actual está debajo, sin embargo, me gustaría que los 3 TextViews dentro de él sean circulares, en lugar de rectangulares.

¿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 curva que se muestra a continuación:

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:

Answer 1

Esta es mi solución realmente funcional

<?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 el ancho y el alto de su TextView coinciden (sea el mismo en dp), si desea un círculo perfecto (no estirado).

Asegúrese de que el texto encaje en un círculo, ya sea acortando el texto O ampliando su círculo O reduciendo el tamaño del texto O reduciendo su (s) relleno (s), si corresponde. O una combinación de las sugerencias anteriores.

[EDITAR]

Por lo que puedo ver en tus fotos, deseas agregar 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 coloque los números dentro de los círculos y coloque las escrituras arriba o debajo del círculo correspondiente.

Answer 2

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>

Aplica ese dibujable en tus textviews 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:

Espero que esto ayude.

Editar: si el texto es demasiado largo, la forma oval es más preferida.

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

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

Answer 3

Pruebe a continuación el archivo dibujable. Crea un archivo llamado "círculo" en tu carpeta res/drawable y copia debajo del código:

   <?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 siguiente manera:

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

Answer 4

Cree un archivo texview_design.xml y rellene el siguiente código. Ponlo en res / dibujable.

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

Luego, en su archivo XML principal solo agregue la siguiente línea para cada TextView:

  android:background="@drawable/texview_design"

Segunda vía (no recomendada): Descarga este círculo y TextView''s en tu carpeta TextView''s y luego haz que sea tu fondo TextView''s . y luego establece la gravity en el center .

Entonces se verá así:

Answer 5

usa esto en tu dibujo

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

Answer 6

Gran parte de la respuesta aquí parece ser pirateo de la forma dibujable, mientras que Android en sí misma lo soporta con la funcionalidad de formas. Esto es algo que funcionó perfectamente para mí. Puedes hacerlo de dos maneras

Si utiliza una altura y un ancho fijos , se mantendría igual independientemente del texto que coloque, como se muestra a continuación.

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

Uso de relleno que reajusta la forma independientemente del texto en la textview texto como se muestra a continuación

<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

Answer 7

Encontré que esta solución es limpia y funciona para variar el tamaño del texto y la 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 evita que el fondo de forma ovalada se vuelva circular. Hacer ver un cuadrado 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>

Answer 8

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

Answer 9

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

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

   <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, creé un círculo de verde. Si desea agregar un borde, deberá agregar el siguiente código al archivo anterior:

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

2. Cree otro archivo XML ("rounded_textview.xml") en la carpeta dibujable con el siguiente código:

   <?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 que TextView elegimos.

3. Finalmente, en las propiedades de TextView queremos cambiar la sección de ruta, 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 TextView TextView rectangular, tenga una circular. Simplemente cambie la forma, no la funcionalidad de TextView. El resultado sería el siguiente:

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

¡¡Suerte!!

Answer 10

La solución típica es definir la forma y usarla como fondo, pero a medida que el número de dígitos varía ya no es un círculo perfecto, se ve como un rectángulo con bordes redondos u Ovales. Así que he desarrollado esta solución, está funcionando muy bien. Espero que ayude a alguien.

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 tu xml, dale algo de relleno y asegúrate de que la gravedad sea central

<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 establecer el ancho de trazo

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

Answer 11

1.Cree un xml circle_text_bg.xml en su carpeta res / dibujable con el siguiente código

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