08. Kotlin – Palette Buttons. Añadir botones

1. Buttons

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Iniciar Sesión"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:backgroundTint="@color/red"
        android:textColor="@color/black"
        android:gravity="center"
        android:drawableLeft="@drawable/car"
        />

android:layout_width y android:layout_height: Estos parámetros especifican el ancho y alto del botón. En este caso, se establecen en “wrap_content”, lo que significa que el tamaño del botón se ajustará automáticamente según el contenido.

android:text: Este parámetro establece el texto que se mostrará en el botón. En este caso, se establece en “Iniciar Sesión”.

android:paddingLeft y android:paddingRight: Estos parámetros establecen el relleno (padding) izquierdo y derecho del botón. En este caso, se establecen en 10dp, lo que significa que habrá un espacio de 10 píxeles a la izquierda y a la derecha del texto del botón.

android:backgroundTint: Este parámetro establece el color de fondo del botón. En este caso, se establece en “@color/red”, lo que indica que el color de fondo será el definido en el recurso de color llamado “red” (probablemente un color rojo).

android:textColor: Este parámetro establece el color del texto del botón. En este caso, se establece en “@color/black”, lo que indica que el color del texto será el definido en el recurso de color llamado “black” (probablemente un color negro).

android:gravity: Este parámetro establece la alineación del texto dentro del botón. En este caso, se establece en “center”, lo que significa que el texto se alineará en el centro del botón tanto horizontal como verticalmente.

android:drawableLeft: Este parámetro establece una imagen o icono que se colocará a la izquierda del texto del botón. En este caso, se establece en “@drawable/car”, lo que indica que se usará el recurso de imagen llamado “car”.

Estos son solo algunos de los parámetros disponibles para personalizar un botón en Android. Puedes utilizar otros parámetros según tus necesidades, como establecer un icono a la derecha del texto (android:drawableEnd), cambiar la fuente (android:typeface),

2. Personalizar Buttons

corners.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners android:radius="12dp"/>
        <corners android:topLeftRadius="0dp"/>
    </shape>
</item>

</selector>

oval.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/green"/>
        <size android:width="120dp" android:height="120dp"/>
    </shape>
</item>
</selector>

Y a continuación se especifica en la propiedad background

 android:background="@drawable/oval“
 android:background="@drawable/corners"

3. AppComcatButton

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".PruActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/bntBoton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="Botón"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

package com.example.wildrunning

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import androidx.appcompat.widget.AppCompatButton

class PruActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pru)

        var bntBoton=findViewById<AppCompatButton>(R.id.bntBoton)
        bntBoton.setOnClickListener {
            Log.i ("Javi","Botón pulsado")
        }

    }
}

4. ImageButton

<android.widget.ImageButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/green"
    android:src="@drawable/car"
    />

class buttons : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_buttons)


        var btBoton=findViewById<Button>(R.id.btBoton)
        btBoton.setOnClickListener {
            Toast.makeText(this,"Botón pulsado",Toast.LENGTH_SHORT).show()
        }

        var btImageBoton=findViewById<ImageButton>(R.id.imageBoton)
        btImageBoton.setOnClickListener {
            Toast.makeText(this,"Botón pulsado",Toast.LENGTH_SHORT).show()
        }

    }

5. ChipGroup y Chip

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipSpacing="8dp"
    app:singleSelection="true">

    <com.google.android.material.chip.Chip
        android:id="@+id/chip1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opción 1" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opción 2" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opción 3" />

</com.google.android.material.chip.ChipGroup>

6. Personalizar ChipGroup

Dentro de la carpeta themes, en el archivo themes.xml se definen los estilos


 <style name="chEntry" parent="Widget.MaterialComponents.Chip.Entry">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/white</item>
        <item name="chipBackgroundColor">@color/purple</item>
        <item name="chipStrokeColor">@color/blue</item>
        <item name="chipStrokeWidth">2dp</item>
    </style>

Y dentro del XML de la Activity

<com.google.android.material.chip.ChipGroup
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Texto 1"
        style="@style/chEntry"
        />

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Texto 2"
        style="@style/chEntry"
        />


</com.google.android.material.chip.ChipGroup>

var cgCondiciones=findViewById<ChipGroup>(R.id.cgCondiciones)
        var chip: Chip
        for (i in 0..cgCondiciones.childCount-1){
            chip=cgCondiciones.getChildAt(i) as Chip
            chip.setOnCloseIconClickListener {
                cgCondiciones.removeView(it)
            }
            chip.setOnClickListener {
                var aux = it as Chip
                Toast.makeText(this,"Opcion ${aux.text}",Toast.LENGTH_SHORT).show()
            }
        }

7. RadioButton

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">



<RadioGroup
    android:id="@+id/rgVacaciones"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/rbPlaya"
        android:text="Playa"
        android:checked="true"
        android:buttonTint="@color/green" />
    <RadioButton
        android:id="@+id/rbMontana"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Montaña"/>

</RadioGroup>

</LinearLayout>

 var rbPlaya=findViewById<RadioButton>(R.id.rbPlaya)
        var rbMontana=findViewById<RadioButton>(R.id.rbMontana)

        rbPlaya.setOnClickListener {
            
            Log.d("JAI", "Pulsado Playa")
        }

        rbMontana.setOnClickListener {
            Log.d("JAI", "Pulsado Montana")
        }

8. RadioButton personalizados

rb_car_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/rb_car_on" android:state_checked="true"/>
    <item android:drawable="@drawable/rb_car_off" android:state_checked="false"/>
    
</selector>

rb_car_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners
            android:bottomLeftRadius="10dp"
            android:topLeftRadius="10dp"/>
        <solid android:color="@color/green"/>
    </shape>
</item>
<item
    android:drawable="@drawable/ic_car"
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp"/>
</layer-list>

rb_car_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners
            android:bottomLeftRadius="10dp"
            android:topLeftRadius="10dp"/>
        <solid android:color="@color/blue"/>
    </shape>
</item>
<item
    android:drawable="@drawable/ic_car"
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp"/>
</layer-list>

rb_train_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/rb_train_on" android:state_checked="true"/>
    <item android:drawable="@drawable/rb_train_off" android:state_checked="false"/>

</selector>

rb_train_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners
            android:bottomRightRadius="10dp"
            android:topRightRadius="10dp"/>
        <solid android:color="@color/green"/>
    </shape>
</item>
<item
    android:drawable="@drawable/ic_train"
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp"/>
</layer-list>

rb_train_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners
            android:bottomRightRadius="10dp"
            android:topRightRadius="10dp"/>
        <solid android:color="@color/blue"/>
    </shape>
</item>
<item
    android:drawable="@drawable/ic_train"
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp"/>
</layer-list>

rb_plane_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/rb_plane_on" android:state_checked="true"/>
    <item android:drawable="@drawable/rb_plane_off" android:state_checked="false"/>

</selector>

rb_plane_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/green"/>
    </shape>
</item>
<item
    android:drawable="@drawable/ic_plane"
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp"/>
</layer-list>

rb_plane_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/blue"/>
    </shape>
</item>
<item
    android:drawable="@drawable/ic_plane"
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp"/>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <RadioGroup
        android:id="@+id/rgOptions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rbCar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rb_car_bg"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/rbPlane"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rb_plane_bg"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/rbTrain"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rb_train_bg"
            android:button="@null"
            />
    </RadioGroup>

</LinearLayout>

9. CheckBox desde xml

<CheckBox
    android:id="@+id/cbSeguro"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Seguro de Viaje"
    android:checked="true"
    android:enabled="false"
    />
<CheckBox
    android:id="@+id/cbCancelable"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Reserva Cancelable"
    android:buttonTint="@color/green"
    android:enabled="true"
    />

10. CheckBox desde xml – Personalización

cb_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/cb_custom_on" android:state_checked="true" />
<item android:drawable="@drawable/cb_custom_off" android:state_checked="false" />
</selector>

cb_custom_off

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportHeight="48"
    android:viewportWidth="48">

    <group
        android:scaleX=".2"
        android:scaleY=".2"
        android:translateX="6"
        android:translateY="6">
        <group
            android:scaleX="7.5"
            android:scaleY="7.5">
            <path
                android:fillColor="#6E6E6E"
                android:pathData="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
        </group>
    </group>
</vector>

cb_custom_on

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportHeight="48"
    android:viewportWidth="48">

    <group
        android:scaleX=".2"
        android:scaleY=".2"
        android:translateX="6"
        android:translateY="6">
        <group
            android:scaleX="7.5"
            android:scaleY="7.5">
            <path
                android:fillColor="#45D0BB"
                android:pathData="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z" />
        </group>
    </group>
</vector>

<CheckBox
        android:id="@+id/cbCustom1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Check custom"
        android:button="@drawable/cb_custom"
        android:enabled="true"
        />
    <CheckBox
        android:id="@+id/cbCustom2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Check custom2"
        android:button="@drawable/cb_custom"
        android:checked="true"
        android:enabled="true"
        />

11. CheckBox desde código

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">



    <CheckBox
        android:id="@+id/cbSeguro"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Seguro de Viaje"
        android:checked="true"
        android:enabled="false"
        android:button="@drawable/cb_custom"
        />
    <CheckBox
        android:id="@+id/cbCancelable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Reserva Cancelable"
        android:buttonTint="@color/green"
        android:enabled="true"
        android:button="@drawable/cb_custom"
        />


</LinearLayout>

var cbSeguro=findViewById<CheckBox>(R.id.cbSeguro)
        var cbCancelable=findViewById<CheckBox>(R.id.cbCancelable)

        cbSeguro.setOnClickListener {
            if (cbSeguro.isChecked)
                Toast.makeText(this,"Marcado Seguro",Toast.LENGTH_SHORT).show()
            else
                Toast.makeText(this,"NO Marcado Seguro",Toast.LENGTH_SHORT).show()
        }

        cbCancelable.setOnClickListener {
            if (cbCancelable.isChecked)
                Toast.makeText(this,"Marcado Cancelable",Toast.LENGTH_SHORT).show()
            else
                Toast.makeText(this,"NO Marcado Cancelable",Toast.LENGTH_SHORT).show()
        }

12. ToggleButton desde XML y código

 <ToggleButton
        android:id="@+id/tgNormal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textOn="Sí"
        android:textOff="No"
        android:checked="true"
        />

 var tbNormal : ToggleButton = findViewById<ToggleButton>(R.id.tgNormal)
        tbNormal.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) Toast.makeText(this, "Activo",Toast.LENGTH_SHORT).show()
            else           Toast.makeText(this, "Inactivo",Toast.LENGTH_SHORT).show()
        }

13. ToggleButton personalizado

tg_travel_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:enterFadeDuration="@android:integer/config_shortAnimTime"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    >
<item android:drawable="@drawable/tg_mountain" android:state_checked="true"/>
<item android:drawable="@drawable/tg_beach" android:state_checked="false"/>
</selector>

 <ToggleButton
        android:id="@+id/tgPersonalizado"
        android:layout_width="72dp"
        android:layout_height="38dp"
        android:checked="true"
        android:textOn=""
        android:textOff=""
        android:background="@drawable/tg_travel_bg"
        />

14. Switch desde xml y código

var swNormal : Switch = findViewById<Switch>(R.id.swNormal)
        swNormal.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) Toast.makeText(this, "Activo",Toast.LENGTH_SHORT).show()
            else           Toast.makeText(this, "Inactivo",Toast.LENGTH_SHORT).show()
        }

 <Switch
        android:id="@+id/swNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Notificar cambios por email"
        android:thumb="@drawable/ic_car"
        android:thumbTint="@color/blue"
        android:trackTint="@color/green"
        />

15. Switch Personalizado

sw_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="#fff"></solid>
            <size android:width="50dp"
                android:height="40dp"></size>
            <corners android:radius="40dp"></corners>
            <stroke android:width="2dp" android:color="@color/red"></stroke>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="#fff"></solid>
            <size android:width="50dp"
                android:height="40dp"></size>
            <corners android:radius="40dp"></corners>
            <stroke android:width="2dp" android:color="@color/green"></stroke>
        </shape>
    </item>
</selector>

sw_track.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/red"></solid>
            <corners android:radius="200dp"></corners>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/green"></solid>
            <corners android:radius="200dp"></corners>
        </shape>
    </item>
</selector>

 <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/swCustom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="Off"
        android:textOn="On"
        android:layout_marginStart="10dp"
        android:text="Notificación  "
        app:showText="true"
        android:checked="false"
        android:thumb="@drawable/sw_thumb"
        app:track="@drawable/sw_track"
        />

16. FloatActionButton

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:contentDescription="@string/add_button"
    app:backgroundTint="@color/green"
    app:elevation="6dp"
    app:rippleColor="@color/red" />

En este ejemplo, hemos utilizado com.google.android.material.floatingactionbutton.FloatingActionButton, que es parte del Material Components Library.

android:id=”@+id/fab“: Se asigna un ID único al FloatingActionButton para poder referenciarlo en el código Kotlin.

android:src=”@drawable/ic_add“: Se establece la imagen del FloatingActionButton utilizando el atributo src. Aquí, se utiliza un recurso de imagen llamado “ic_add” que debería existir en la carpeta drawable.

android:contentDescription=”@string/add_button“: Se establece la descripción del contenido para el FloatingActionButton. Esta descripción se utilizará para accesibilidad y se debe definir en el archivo strings.xml utilizando el recurso @string.

app:backgroundTint=”@color/colorAccent“: Se establece el color de fondo del FloatingActionButton utilizando el atributo backgroundTint. Aquí, se utiliza el recurso de color llamado “colorAccent”.

app:elevation=”6dp”: Se establece la elevación del FloatingActionButton utilizando el atributo elevation. Esto crea una sombra debajo del botón y le da una apariencia elevada.

app:rippleColor=”@color/colorAccent“: Se establece el color de la animación de ondulación (ripple) al hacer clic en el FloatingActionButton. Aquí, se utiliza el recurso de color llamado “colorAccent”.

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_car"
        android:layout_gravity="left"
        android:layout_margin="10dp"
        android:backgroundTint="@color/green"
        />

var fabButton = findViewById<FloatingActionButton>(R.id.fabButton)
        fabButton.setOnClickListener {
            Toast.makeText(this,"fab Pulsado",Toast.LENGTH_SHORT).show()
        }