Tutoriales de aplicaciones y video juegos.
Aprende a crear apps, juegos y más!
  • Home
  • Android Studio
  • Unity
  • Blender
  • Inkscape
  • Autocad 2009
Android Studio

Android botón con icono y texto.

by admin June 9, 2020 No Comments
Edit Text, teclado virtual, Android Studio.
Edit Text, solo números.

En este tutorial se explican 3 principales tipos de botones en Android Studio. El botón con icono y texto, el botón de solo imagen y el botón de solo texto.

Los botones son parte esencial de nuestra aplicación. En Android podemos encontrar 3 tipos principales de botones. Pero además podemos personalizar un botón a nuestro antojo, creando un archivo XML donde le damos los parámetros se colores, si se ve la línea, la forma, etc.

En este tutorial nos enfocaremos a los 3 botones básicos que son: Botón que contiene solo texto, botón en forma de imagen o icono y botón con icono a un lado del texto.

¿Cómo crear un botón con icono y texto en Android Studio?

  1. Primero escribimos el código de un botón normal. Con alto y ancho = “wrap_content”. Y el texto del botón.
  2. En seguida nos aseguramos de tener en la carpeta de drawable el icono que usaremos, en nuestro caso se llama icono.png.
  3. Después, en nuestro caso queremos que el icono esté a la izquierda y el texto a la derecha. Así que usamos el comando: android: drawableLeft =”@drawable/icono”
  4. Con esto ya tienes un botón con icono y texto.

Botón básico (Button) solo texto.

El código más sencillo para un botó, es el que mostramos en seguida. Cabe mencionar que un botón tiene varios parámetros en los cuales podemos personalizarlo y hacerlo muy diferente a como es normalmente.

El código básico de un botón en XML es:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calcular"
    />

Botón en Android Studio

Solo tenemos 3 parámetros, los primeros dos son la altura y anchura del botón, los cuales en este caso se ajustan al contenido del botón.

Y el texto que llevará el botón, el cual se recomienda agregarlo desde los recursos String.

A este botón se le pueden agregar varios parámetros para personalizarlo, claro que el código del botón será más complejo. Pero quedará bastante mejor.

Botón de solo imagen (Image Button).

Es otro tipo de botón, el cual básicamente consta de un botón que tiene un icono o una imagen de fondo, sin ningún texto.

El código base para este botón es:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icono"
    />

Botón de imagen en Android Studio

Solo le damos los 3 parámetros básicos que son la altura, lo ancho y la imagen que tendrá de fondo.

En este caso en la carpeta drawable debemos tener una imagen con el nombre button_icon.png

Botón con icono a un lado del texto.

El otro tipo de botón que vamos a mencionar, es un botón que contiene un icono y a un lado el texto.

Para hacer esto necesitamos escribir el código de un botón normal y le agregamos el comando:

android:drawableLeft=”@drawable/button_icon”

Con el comando anterior, estamos diciendo que agregaremos un icono desde la carpeta drawable llamado button_icon.png. Este icono se localizará  a la izquierda por lo tanto el texto estará a la derecha.

Si queremos el icono al lado derecho usamos:

android:drawableRight=”@drawable/button_icon”

El código complete para tener un icono y texto en un botón queda así.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calcular"    android:drawableLeft="@drawable/icono"
    />

Botón texto con icono en Android Studio

Para más tutoriales de Android Studio ve la sección de Android Studio.

Puedes ver la documentación de Android Studio para más información.

Edit Text, teclado virtual, Android Studio.
Edit Text, solo números.
  • Previous Edit Text, teclado virtual, Android Studio.10 months ago
  • Next Blender, cambios más notorios 2.79 a 2.810 months ago

Categories

  • matplotlib
  • Swift
  • Kotlin
  • Arduino
  • Algebra
  • Matematicas
  • Excel
  • Doodly
  • Autocad 2009
  • Personajes 3D
  • Código
  • Animaciones 2D
  • Personajes 2D
  • Navegando en Unity
  • Android Studio
  • Blender
  • Inkscape
  • Python
  • Unity

Recent Posts

  • Tipos de marcadores, Matplotlib Python.
  • Tipos de líneas predeterminadas y personalizadas, Matplotlib Python.
  • Graficar en Python. Tipos de líneas, colores y marcadores en matplotlib.
  • Python matplotlib colores predeterminados y hexadecimal.
  • Swift, Sentencia Switch (elegir entre varias opciones)
2021 Tutoriales de aplicaciones y video juegos.. Donna Theme powered by WordPress
Usamos Cookies para mejorar la experiencia del usuario, mostrandole contenido y anuncios personalizados. Si usted continua utilizando este sitio asumiremos que esta de acuerdo. Aceptar Cancelar Leer Más
Cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

SAVE & ACCEPT