Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

Como crear un ToggleButton en Android utilizando Kotlin

Android ToggleButton Kotlin Example


Hola continuamos con este curso y en esta ocasión aprenderemos a utilizar el ToggleButton con programación Kotlin. Desarrolla este ejemplo e implementarlo en tus aplicaciones.
Android Studio - ToggleButton Kotlin

Crear Proyecto Android Kotlin. (Aquí)

Crearemos nuestro proyecto para desarrollar este ejemplo paso a paso. Y utilizar el ToggleButton para crear una aplicación Kotlin.
Android Studio - ToggleButton Kotlin
Para tener un poco mas claro lo que es el ToggleButton les dejare la siguiente tabla.

Diferentes atributos del botón de alternar de Android

Los diferentes atributos del botón de alternar son:
No.Atributos XMLDescripción
1android:disabledAlphaValor de alfa para establecer cuando el indicador está deshabilitado.
2android:textOffTexto para mostrar cuando el botón de alternar está desactivado.
3android:textOnTexto para mostrar cuando el botón de alternar está activado.
Los atributos en el Botón de alternar también se heredan de TextView y del botón Compuesto. Algunos de los atributos populares heredados de TextView son:
No.  Atributos XMLDescripción
1android:backgroundEstablece el fondo para alternar el botón.
2android:backgroundTintSe usa para configurar el tinte al fondo.
3android:clickableEstablece verdadero cuando desea hacer que el botón de alternar pueda hacer clic. De lo contrario, establezca falso.
4android:drawableBottomDibujable para dibujar en la parte inferior del texto.
5android:drawableEndDibujable para dibujar al final del texto.
6android:drawableLeftDibujable para dibujar a la izquierda del texto.
7android:drawablePaddingRelleno del dibujable.
8android:drawableRightDibujable para dibujar a la derecha del texto.
9android:drawableStartDibujable para dibujar al comienzo del texto.
10android:drawableTopDibujable para dibujar en la parte superior del texto.
11android:textEstablece el texto del botón Alternar.
12android:textAllCapsMuestra texto en letras mayúsculas.
13android:textColorEstablece el color del texto.
14android:textSizeEstablece el tamaño del texto. Por ejemplo, 12sp, 13sp, etc.
15android:textStyleEstablece el estilo del texto. Por ejemplo, negrita, cursiva, negrita, etc.
16android:typefaceEstablece el tipo de letra del texto. Por ejemplo, normal, sin, monoespacio, etc.
Los atributos del botón de alternar heredados del botón Compuesto son:
No.Atributos XMLDescripción
1android:buttonDibujable para gráfico de botones (por ejemplo, casilla de verificación y botón de opción).
2android:buttonTintGráfico de tinte a botón.
Ahora continuamos con el diseño de nuestra aplicación.

Layout ToggleButton Kotlin Example


Crearemos el diseño de nuestra aplicación con la cual crearemos varios ejemplos del uso del ToggleButton junto a Kotlin. Nuestra aplicación creara un control dinámico y lo añadirá a un LinearLayout. También mostraremos otro ejemplo termina paso a paso nuestra ejemplo.

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

<ToggleButton
android:id="@+id/toggleButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"/>

<LinearLayout
android:id="@+id/lnLayoutDinamic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

</LinearLayout>
<LinearLayout
android:id="@+id/lnLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
>

<ToggleButton
android:id="@+id/toggleButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

<Button
android:id="@+id/btnToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change Toggle State"
/>

</LinearLayout>

</LinearLayout>

El diseño de nuestra aplicación quedaría de la siguiente manera. Kotlin ToggleButton App.
Android Studio - ToggleButton Kotlin

Código MaintActivity Kotlin ToggleButton Example


Ahora seguiremos con la programación de nuestra aplicación. Nuestro control ToggleButton Kotlin Example explicaremos el código.

import android.graphics.Color
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.Toast
import android.widget.ToggleButton
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Obtenemos las referencias del ToggleButton
val toggleButton1 = findViewById<ToggleButton>(R.id.toggleButton1)
toggleButton1?.setOnCheckedChangeListener { buttonView, isChecked ->
// Mostrar mensaje al presionar ToggleButton
val msg = "Toggle Button is " + if (isChecked) "ON" else "OFF"
Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
}

// Obtenemos las referencias del linearLayout
val linearLayout = findViewById<LinearLayout>(R.id.lnLayoutDinamic)
// Crear ToggleButton dinamico
val toggleDinamic= ToggleButton(this)
toggleDinamic.layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
// Evento onclick del ToggleButton
toggleDinamic.setOnCheckedChangeListener { buttonView, isChecked ->
// Mostrar mensaje al presionar ToggleButton
val msg = "Toggle Button es " + if (isChecked) "ON" else "OFF"
Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
}
// Añadir ToggleButton dinamico al LinearLayout
linearLayout?.addView(toggleDinamic)

// Evento onchecked del ToggleButton
toggleButton2.setOnCheckedChangeListener { buttonView, isChecked ->
if (isChecked) {
// El ToggleButton esta ON
Toast.makeText(applicationContext,"Toggle ON",Toast.LENGTH_SHORT).show()
// Cambiar el color del LinearLayout
lnLayoutDinamic.setBackgroundColor(Color.GREEN)
} else {
// El ToggleButton esta OFF
Toast.makeText(applicationContext,"Toggle OFF",Toast.LENGTH_SHORT).show()
// Cambiar el color del LinearLayout
lnLayoutDinamic.setBackgroundColor(Color.GRAY)
}
}

// Evento onclick del LinearLayout
lnLayout.setOnClickListener{
// Si el ToggleButton esta Check realiza lo siguiente
if(toggleButton2.isChecked){
// El ToggleButton esta ON
Toast.makeText(applicationContext,"Toggle on",Toast.LENGTH_SHORT).show()
// Cambiar Color del LinearLayout
lnLayout.setBackgroundColor(Color.GREEN)
}else{
// El ToggleButton esta OFF
Toast.makeText(applicationContext,"Toggle off",Toast.LENGTH_SHORT).show()
// Cambiar el color del LinearLayout
lnLayout.setBackgroundColor(Color.GRAY)
}
}
// Evento click del Button
btnToggle.setOnClickListener{
// Cambiar el estado del ToggleButton
toggleButton2.isChecked = if(toggleButton2.isChecked)false else true
}
}
}

Y para terminar nuestra aplicación.

Crear Emulador AVD (Aquí)


Crear un emulador para ejecutar nuestra aplicación de ToggleButton Kotlin Example App.

Android Studio - ToggleButton Kotlin

Android Studio - ToggleButton Kotlin

Gracias!

Curso Kotlin Español

Android Studio - ToggleButton Kotlin

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner