En este tutorial se explica cómo encerrar un Texto con un círculo en Android Studio, sin usar una imagen. El círculo es creado en un archivo XML, en la carpeta Drawable , luego se agrega como Background al Text View.
En Android Studio se pueden crear varios elementos, que se conocen como elementos de diseño de forma. Estos son un archivo XML al cual se le dan características de diseño.
Por ejemplo, diversas formas como círculos, rectángulos, etc. Se puede cambiar el color de fondo, se puede crear un gradiente de color, o bien una línea y el ancho de la línea. Y más opciones, en este tutorial solo crearemos un círculo.
Puedes ver más información en la documentación de Android, en el siguiente link. Android shape.
Creando un círculo en XML.
- Primero creamos un nuevo Recurso XML, en la carpeta Drawable, al cual llamaremos circulo.xml. En este archivo vamos a diseñar el circulo, usando como elemento raíz <shape>.
- Lo siguiente es dibujar el círculo usando el elemento android:shape=”oval”. Ajustar el radio, el color de la linea y el relleno.
- Por último, hay que agregar el archivo al TextView. Esto se hace con el elemento Android:background = “@drawable/circulo”
Ejemplo.
En este ejemplo crearemos un circulo y se lo agregaremos a un TextView para que quede encerrado el texto, usando los pasos anteriores.
Crear circulo.xml
Primero creamos un nuevo recurso xml. En la carpeta res/drawable damos click derecho y buscamos la opción de New-> Drawable resource file, le damos por nombre circulo.xml.
Personalizar el círculo.
Luego, en el archivo que acabamos de crear vamos a dibujar el círculo, para esto usamos el siguiente código:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="35dp"></corners>
<stroke android:color="@color/negro"
android:width="2dp">
</stroke>
<solid android:color="@color/transparente"></solid>
</shape>El elemento base es <shape> y debe de tener el elemento “xmlns:android=”http://schemas.android.com/apk/res/android” como obligatorio.
Para crear un circulo se usa el elemento android:shape=”oval”.
Luego se configuran las características del círculo.
En el elemento <corners>, se le da un radio. Este elemento tiene más opciones por si queremos que sea un ovalo.
En el elemento <stroke>, se configura la línea, se puede cambiar el grosor y color de la línea. En este caso le damos un color negro, y un ancho de 2dpi.
Con el elemento <solid>, se puede configurar el color de fondo. En este caso le dejamos un fondo transparente.
Hay muchas más opciones, pero con estas logramos nuestro objetivo. Puedes jugar con los parámetros para ver diferentes resultados.
Lo único que queda es agregar este elemento a nuestro TextView.
Agregar el círculo al Textview.
Para esto simplemente agregamos el archivo circulo.xml como el fondo (background) del TextView, usando el comando:
android:background="@drawable/circulo"
El código de un Text View simple queda así:
<TextView
android:id="@+id/lista_titulo"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="@drawable/circulo"
/>Nuestro Text View se verá como se muestra en la siguiente imagen.
