Como crear un Button en Android utilizando Kotlin

Android Kotlin Button Example

Hola amigos! Vamos a desarrollar este ejemplo utilizando Kotlin les dejare el ejemplo de como utilizarlo con el Widget Button y algunas opciones que podemos hacer con este.

Crear Proyecto Kotlin

Vamos a crear nuestra aplicación utilizando Kotlin. (Aquí)

Kotlin Button Design

Crearemos el diseño de nuestra aplicación ya que desarrollaremos varios ejemplos el diseño nos quedara de la siguiente manera. Teniendo ubicado nuestro Widget Button en la barra de herramientas.

Agregaremos dos archivos xml para el diseño de uno de uno de nuestros botones.

btn_center_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <gradient android:startColor="#44e3ff"
 android:centerColor="#12434c"
 android:endColor="#258191"
 android:angle="90" />
</shape>

btn_oval_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient android:startColor="#ffc456"
        android:centerColor="#7a5d28"
        android:endColor="#ad853a"
        android:angle="90"
    />
</shape>

Ahora continuamos con el diseño de nuestro main_activity.xml donde añadiremos los Button para programarlos con Kotlin.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">
 <LinearLayout
 android:id="@+id/Ll_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center"
 android:orientation="vertical">
 </LinearLayout>

 <Button
 android:id="@+id/button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginEnd="8dp"
 android:layout_marginStart="8dp"
 android:layout_marginTop="128dp"
 android:text="Button"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center"
 android:orientation="vertical">
 <Button
 android:id="@+id/button_changing"
 android:padding="15dp"
 android:background="@drawable/btn_center_gradient"
 android:textColor="#FFFFFF"
 android:text="Changing Button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

 </LinearLayout>
</android.support.constraint.ConstraintLayout>

Y este seria el resultado del diseño de nuestra aplicación. Kotlin.

Código MainActivity Button Kotlin

Continuamos con la programación de nuestra aplicación Kotlin. Vamos a crear un Button dinamico utilizando Kotlin y también mostraremos un mensaje Toast al dar click en un Button y luego cambiaremos el fondo del Button de forma dinamica siempre utilizando Kotlin.

Si pueden observar se crea el evento OnClickListener para el Button cuando sea presionado mostrara un mensaje Toast Kotlin.

// Obtenemos la referencia del Button Kotlin
val btnMsg = findViewById(R.id.button) as Button
// Evento onclickListener del Button Kotlin
btnMsg.setOnClickListener {
 // Mensaje que mostrara al dar click en el Button
 Toast.makeText(this@MainActivity, "You clicked me.", Toast.LENGTH_SHORT).show()
}

Podrán ver que se crea una instancia de tipo LinearLayout esto es para referencia a nuestro Layout donde agregaremos nuestro Button de forma dinámica utilizando Kotlin.

val ll_main = findViewById(R.id.Ll_layout) as LinearLayout
// Crear Button Kotlin
val button_dynamic = Button(this)
// Añadis parametros de diametro al Button Kotlin
button_dynamic.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
button_dynamic.text = "Dynamic Button"
// Añadir Button Kotlin al Linear Layout
ll_main.addView(button_dynamic)

El Button siguiente lo utilizamos para camiar el BackgroundResource de forma dinámica del Button utilizando Kotlin.

// Variable Contador
var button_background : Int = 1;
// Obtenemos la referencica del Button Kotlin
var button_change = findViewById(R.id.button_changing) as Button;
// Evento onclickListener del Button
button_change.setOnClickListener {
 // Cambia el BackGroundResouce al dar click
 if(button_background==2){
 button_change.setBackgroundResource(R.drawable.btn_center_gradient);
 button_background=1;
 } else if(button_background==1){
 button_change.setBackgroundResource(R.drawable.btn_oval_gradient);
 button_background=2;
 }
}

El código completo.

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.ViewGroup
import android.widget.Button
import android.widget.LinearLayout
import android.widget.Toast

class MainActivity : AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_main)

 // Obtenemos la referencia del Button Kotlin
 val btnMsg = findViewById(R.id.button) as Button
 // Evento onclickListener del Button Kotlin
 btnMsg.setOnClickListener {
 // Mensaje que mostrara al dar click en el Button
 Toast.makeText(this@MainActivity, "You clicked me.", Toast.LENGTH_SHORT).show()
 }

 val ll_main = findViewById(R.id.Ll_layout) as LinearLayout
 // Crear Button Kotlin
 val button_dynamic = Button(this)
 // Añadis parametros de diametro al Button Kotlin
 button_dynamic.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
 button_dynamic.text = "Dynamic Button"
 // Añadir Button Kotlin al Linear Layout
 ll_main.addView(button_dynamic)

 // Variable Contador
 var button_background : Int = 1;
 // Obtenemos la referencica del Button Kotlin
 var button_change = findViewById(R.id.button_changing) as Button;
 // Evento onclickListener del Button
 button_change.setOnClickListener {
 // Cambia el BackGroundResouce al dar click
 if(button_background==2){
 button_change.setBackgroundResource(R.drawable.btn_center_gradient);
 button_background=1;
 } else if(button_background==1){
 button_change.setBackgroundResource(R.drawable.btn_oval_gradient);
 button_background=2;
 }
 }
 }
}

Crear Emulador AVD

Para finalizar nuestro ejemplo vamos a crear un emulador avd. (Aquí). Ejecutaremos nuestra aplicación para obtener el siguiente resultado.

 Y listo nuestro ejemplo quedaría completo. Espero que el ejemplo haya sido de tu agrado y el contenido este claro de entender. Gracias!

Curso Kotlin Español