{"id":459,"date":"2023-10-28T14:27:54","date_gmt":"2023-10-28T14:27:54","guid":{"rendered":"https:\/\/javigomez.org\/?p=459"},"modified":"2025-09-29T20:33:56","modified_gmt":"2025-09-29T20:33:56","slug":"08-kotlin-palette-buttons-anadir-botones","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/10\/28\/08-kotlin-palette-buttons-anadir-botones\/","title":{"rendered":"08. Kotlin &#8211; Palette Buttons. A\u00f1adir botones"},"content":{"rendered":"\n<p><strong>1. Buttons<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Button\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Iniciar Sesi\u00f3n\"\n        android:paddingLeft=\"10dp\"\n        android:paddingRight=\"10dp\"\n        android:backgroundTint=\"@color\/red\"\n        android:textColor=\"@color\/black\"\n        android:gravity=\"center\"\n        android:drawableLeft=\"@drawable\/car\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>android:layout_width<\/strong><strong> y <\/strong><strong>android:layout_height<\/strong>: Estos par\u00e1metros especifican el ancho y alto del bot\u00f3n. En este caso, se establecen en &#8220;wrap_content&#8221;, lo que significa que el tama\u00f1o del bot\u00f3n se ajustar\u00e1 autom\u00e1ticamente seg\u00fan el contenido.<\/p>\n\n\n\n<p><strong>android:text<\/strong>: Este par\u00e1metro establece el texto que se mostrar\u00e1 en el bot\u00f3n. En este caso, se establece en &#8220;Iniciar Sesi\u00f3n&#8221;.<\/p>\n\n\n\n<p><strong>android:paddingLeft<\/strong><strong> y <\/strong><strong>android:paddingRight<\/strong>: Estos par\u00e1metros establecen el relleno (padding) izquierdo y derecho del bot\u00f3n. En este caso, se establecen en 10dp, lo que significa que habr\u00e1 un espacio de 10 p\u00edxeles a la izquierda y a la derecha del texto del bot\u00f3n.<\/p>\n\n\n\n<p><strong>android:backgroundTint<\/strong>: Este par\u00e1metro establece el color de fondo del bot\u00f3n. En este caso, se establece en &#8220;@color\/red&#8221;, lo que indica que el color de fondo ser\u00e1 el definido en el recurso de color llamado &#8220;red&#8221; (probablemente un color rojo).<\/p>\n\n\n\n<p><strong>android:textColor<\/strong>: Este par\u00e1metro establece el color del texto del bot\u00f3n. En este caso, se establece en &#8220;@color\/black&#8221;, lo que indica que el color del texto ser\u00e1 el definido en el recurso de color llamado &#8220;black&#8221; (probablemente un color negro).<\/p>\n\n\n\n<p><strong>android:gravity<\/strong>: Este par\u00e1metro establece la alineaci\u00f3n del texto dentro del bot\u00f3n. En este caso, se establece en &#8220;center&#8221;, lo que significa que el texto se alinear\u00e1 en el centro del bot\u00f3n tanto horizontal como verticalmente.<\/p>\n\n\n\n<p><strong>android:<\/strong><strong>drawable<\/strong><strong>Left<\/strong>: Este par\u00e1metro establece una imagen o icono que se colocar\u00e1 a la izquierda del texto del bot\u00f3n. En este caso, se establece en &#8220;@drawable\/car&#8221;, lo que indica que se usar\u00e1 el recurso de imagen llamado &#8220;car&#8221;.<\/p>\n\n\n\n<p>Estos son solo algunos de los par\u00e1metros disponibles para personalizar un bot\u00f3n en Android. Puedes utilizar otros par\u00e1metros seg\u00fan tus necesidades, como establecer un icono a la derecha del texto (<strong>android:drawableEnd<\/strong>), cambiar la fuente (<strong>android:typeface<\/strong>),<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 01 Button\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/JheEuRi5gbw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>2. Personalizar Buttons<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>corners.xml<\/strong>\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;corners android:radius=\"12dp\"\/&gt;\n        &lt;corners android:topLeftRadius=\"0dp\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n\n&lt;\/selector&gt;\n\n<strong>oval.xml<\/strong>\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"oval\"&gt;\n        &lt;solid android:color=\"@color\/green\"\/&gt;\n        &lt;size android:width=\"120dp\" android:height=\"120dp\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;\/selector&gt;\n<\/code><\/pre>\n\n\n\n<p>Y a continuaci\u00f3n se especifica en la propiedad background<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> android:background=\"@drawable\/oval\u201c\n android:background=\"@drawable\/corners\"\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 02 ButtonPersonalizacion\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/sDIOR5AsoaI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>3. AppComcatButton<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".PruActivity\"&gt;\n\n    &lt;androidx.appcompat.widget.AppCompatButton\n        android:id=\"@+id\/bntBoton\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        app:layout_constraintTop_toTopOf=\"parent\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        android:text=\"Bot\u00f3n\"\n        \/&gt;\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>package com.example.wildrunning\n\nimport androidx.appcompat.app.AppCompatActivity\nimport android.os.Bundle\nimport android.util.Log\nimport androidx.appcompat.widget.AppCompatButton\n\nclass PruActivity : AppCompatActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_pru)\n\n        var bntBoton=findViewById&lt;AppCompatButton&gt;(R.id.bntBoton)\n        bntBoton.setOnClickListener {\n            Log.i (\"Javi\",\"Bot\u00f3n pulsado\")\n        }\n\n    }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 03 Button kt\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/rl-nHoKxkiQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>4. ImageButton<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;android.widget.ImageButton\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:backgroundTint=\"@color\/green\"\n    android:src=\"@drawable\/car\"\n    \/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>class buttons : AppCompatActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_buttons)\n\n\n        var btBoton=findViewById&lt;Button&gt;(R.id.btBoton)\n        btBoton.setOnClickListener {\n            Toast.makeText(this,\"Bot\u00f3n pulsado\",Toast.LENGTH_SHORT).show()\n        }\n\n        var btImageBoton=findViewById&lt;ImageButton&gt;(R.id.imageBoton)\n        btImageBoton.setOnClickListener {\n            Toast.makeText(this,\"Bot\u00f3n pulsado\",Toast.LENGTH_SHORT).show()\n        }\n\n    }\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 04 ImageButton\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Nq5NYs7xpr0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>5. ChipGroup y Chip<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;com.google.android.material.chip.ChipGroup\n    android:id=\"@+id\/chipGroup\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    app:chipSpacing=\"8dp\"\n    app:singleSelection=\"true\"&gt;\n\n    &lt;com.google.android.material.chip.Chip\n        android:id=\"@+id\/chip1\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Opci\u00f3n 1\" \/&gt;\n\n    &lt;com.google.android.material.chip.Chip\n        android:id=\"@+id\/chip2\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Opci\u00f3n 2\" \/&gt;\n\n    &lt;com.google.android.material.chip.Chip\n        android:id=\"@+id\/chip3\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Opci\u00f3n 3\" \/&gt;\n\n&lt;\/com.google.android.material.chip.ChipGroup&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 05 Chips\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/i2L6GXscJXQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>6. Personalizar ChipGroup<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Dentro de la carpeta themes, en el archivo themes.xml se definen los estilos\n\n\n &lt;style name=\"chEntry\" parent=\"Widget.MaterialComponents.Chip.Entry\"&gt;\n        &lt;item name=\"android:textStyle\"&gt;bold&lt;\/item&gt;\n        &lt;item name=\"android:textColor\"&gt;@color\/white&lt;\/item&gt;\n        &lt;item name=\"chipBackgroundColor\"&gt;@color\/purple&lt;\/item&gt;\n        &lt;item name=\"chipStrokeColor\"&gt;@color\/blue&lt;\/item&gt;\n        &lt;item name=\"chipStrokeWidth\"&gt;2dp&lt;\/item&gt;\n    &lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Y dentro del XML de la Activity\n\n&lt;com.google.android.material.chip.ChipGroup\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"&gt;\n\n    &lt;com.google.android.material.chip.Chip\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Texto 1\"\n        style=\"@style\/chEntry\"\n        \/&gt;\n\n    &lt;com.google.android.material.chip.Chip\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Texto 2\"\n        style=\"@style\/chEntry\"\n        \/&gt;\n\n\n&lt;\/com.google.android.material.chip.ChipGroup&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var cgCondiciones=findViewById&lt;ChipGroup&gt;(R.id.cgCondiciones)\n        var chip: Chip\n        for (i in 0..cgCondiciones.childCount-1){\n            chip=cgCondiciones.getChildAt(i) as Chip\n            chip.setOnCloseIconClickListener {\n                cgCondiciones.removeView(it)\n            }\n            chip.setOnClickListener {\n                var aux = it as Chip\n                Toast.makeText(this,\"Opcion ${aux.text}\",Toast.LENGTH_SHORT).show()\n            }\n        }\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 06 Chips kt\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Voet6hA6tvI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>7. RadioButton<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"vertical\"&gt;\n\n\n\n&lt;RadioGroup\n    android:id=\"@+id\/rgVacaciones\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;RadioButton\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:id=\"@+id\/rbPlaya\"\n        android:text=\"Playa\"\n        android:checked=\"true\"\n        android:buttonTint=\"@color\/green\" \/&gt;\n    &lt;RadioButton\n        android:id=\"@+id\/rbMontana\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Monta\u00f1a\"\/&gt;\n\n&lt;\/RadioGroup&gt;\n\n&lt;\/LinearLayout&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> var rbPlaya=findViewById&lt;RadioButton&gt;(R.id.rbPlaya)\n        var rbMontana=findViewById&lt;RadioButton&gt;(R.id.rbMontana)\n\n        rbPlaya.setOnClickListener {\n            \n            Log.d(\"JAI\", \"Pulsado Playa\")\n        }\n\n        rbMontana.setOnClickListener {\n            Log.d(\"JAI\", \"Pulsado Montana\")\n        }\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-1-1-1.png\" alt=\"\" class=\"wp-image-460\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 07 RadioButton\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/KDOUkUbYG5A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>8. RadioButton personalizados<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>rb_car_bg.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n\n    &lt;item android:drawable=\"@drawable\/rb_car_on\" android:state_checked=\"true\"\/&gt;\n    &lt;item android:drawable=\"@drawable\/rb_car_off\" android:state_checked=\"false\"\/&gt;\n    \n&lt;\/selector&gt;\n\nrb_car_on.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;corners\n            android:bottomLeftRadius=\"10dp\"\n            android:topLeftRadius=\"10dp\"\/&gt;\n        &lt;solid android:color=\"@color\/green\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;item\n    android:drawable=\"@drawable\/ic_car\"\n    android:bottom=\"10dp\"\n    android:left=\"10dp\"\n    android:right=\"10dp\"\n    android:top=\"10dp\"\/&gt;\n&lt;\/layer-list&gt;\n\nrb_car_off.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;corners\n            android:bottomLeftRadius=\"10dp\"\n            android:topLeftRadius=\"10dp\"\/&gt;\n        &lt;solid android:color=\"@color\/blue\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;item\n    android:drawable=\"@drawable\/ic_car\"\n    android:bottom=\"10dp\"\n    android:left=\"10dp\"\n    android:right=\"10dp\"\n    android:top=\"10dp\"\/&gt;\n&lt;\/layer-list&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>rb_train_bg.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n\n    &lt;item android:drawable=\"@drawable\/rb_train_on\" android:state_checked=\"true\"\/&gt;\n    &lt;item android:drawable=\"@drawable\/rb_train_off\" android:state_checked=\"false\"\/&gt;\n\n&lt;\/selector&gt;\n\nrb_train_on.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;corners\n            android:bottomRightRadius=\"10dp\"\n            android:topRightRadius=\"10dp\"\/&gt;\n        &lt;solid android:color=\"@color\/green\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;item\n    android:drawable=\"@drawable\/ic_train\"\n    android:bottom=\"10dp\"\n    android:left=\"10dp\"\n    android:right=\"10dp\"\n    android:top=\"10dp\"\/&gt;\n&lt;\/layer-list&gt;\n\nrb_train_off.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;corners\n            android:bottomRightRadius=\"10dp\"\n            android:topRightRadius=\"10dp\"\/&gt;\n        &lt;solid android:color=\"@color\/blue\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;item\n    android:drawable=\"@drawable\/ic_train\"\n    android:bottom=\"10dp\"\n    android:left=\"10dp\"\n    android:right=\"10dp\"\n    android:top=\"10dp\"\/&gt;\n&lt;\/layer-list&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>rb_plane_bg.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n\n    &lt;item android:drawable=\"@drawable\/rb_plane_on\" android:state_checked=\"true\"\/&gt;\n    &lt;item android:drawable=\"@drawable\/rb_plane_off\" android:state_checked=\"false\"\/&gt;\n\n&lt;\/selector&gt;\n\nrb_plane_on.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;solid android:color=\"@color\/green\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;item\n    android:drawable=\"@drawable\/ic_plane\"\n    android:bottom=\"10dp\"\n    android:left=\"10dp\"\n    android:right=\"10dp\"\n    android:top=\"10dp\"\/&gt;\n&lt;\/layer-list&gt;\n\nrb_plane_off.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;layer-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item&gt;\n    &lt;shape android:shape=\"rectangle\"&gt;\n        &lt;solid android:color=\"@color\/blue\"\/&gt;\n    &lt;\/shape&gt;\n&lt;\/item&gt;\n&lt;item\n    android:drawable=\"@drawable\/ic_plane\"\n    android:bottom=\"10dp\"\n    android:left=\"10dp\"\n    android:right=\"10dp\"\n    android:top=\"10dp\"\/&gt;\n&lt;\/layer-list&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:orientation=\"vertical\"\n    tools:context=\".MainActivity\"&gt;\n\n\n    &lt;RadioGroup\n        android:id=\"@+id\/rgOptions\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginStart=\"20dp\"\n        android:orientation=\"horizontal\"&gt;\n        &lt;RadioButton\n            android:id=\"@+id\/rbCar\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:background=\"@drawable\/rb_car_bg\"\n            android:button=\"@null\"\n            \/&gt;\n        &lt;RadioButton\n            android:id=\"@+id\/rbPlane\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:background=\"@drawable\/rb_plane_bg\"\n            android:button=\"@null\"\n            \/&gt;\n        &lt;RadioButton\n            android:id=\"@+id\/rbTrain\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:background=\"@drawable\/rb_train_bg\"\n            android:button=\"@null\"\n            \/&gt;\n    &lt;\/RadioGroup&gt;\n\n&lt;\/LinearLayout&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-2-1-1.png\" alt=\"\" class=\"wp-image-461\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 08 RadioButton Custom\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/kyeD5CQH5nY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>9. CheckBox desde xml<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;CheckBox\n    android:id=\"@+id\/cbSeguro\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:text=\"Seguro de Viaje\"\n    android:checked=\"true\"\n    android:enabled=\"false\"\n    \/&gt;\n&lt;CheckBox\n    android:id=\"@+id\/cbCancelable\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:text=\"Reserva Cancelable\"\n    android:buttonTint=\"@color\/green\"\n    android:enabled=\"true\"\n    \/&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-3-1-1.png\" alt=\"\" class=\"wp-image-462\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 09 CheckBox\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/NiFPI8nioRE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>10. CheckBox desde xml &#8211; Personalizaci\u00f3n<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cb_custom.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n&lt;item android:drawable=\"@drawable\/cb_custom_on\" android:state_checked=\"true\" \/&gt;\n&lt;item android:drawable=\"@drawable\/cb_custom_off\" android:state_checked=\"false\" \/&gt;\n&lt;\/selector&gt;\n\ncb_custom_off\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;vector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:width=\"32dp\"\n    android:height=\"32dp\"\n    android:viewportHeight=\"48\"\n    android:viewportWidth=\"48\"&gt;\n\n    &lt;group\n        android:scaleX=\".2\"\n        android:scaleY=\".2\"\n        android:translateX=\"6\"\n        android:translateY=\"6\"&gt;\n        &lt;group\n            android:scaleX=\"7.5\"\n            android:scaleY=\"7.5\"&gt;\n            &lt;path\n                android:fillColor=\"#6E6E6E\"\n                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\" \/&gt;\n        &lt;\/group&gt;\n    &lt;\/group&gt;\n&lt;\/vector&gt;\n\ncb_custom_on\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;vector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:width=\"32dp\"\n    android:height=\"32dp\"\n    android:viewportHeight=\"48\"\n    android:viewportWidth=\"48\"&gt;\n\n    &lt;group\n        android:scaleX=\".2\"\n        android:scaleY=\".2\"\n        android:translateX=\"6\"\n        android:translateY=\"6\"&gt;\n        &lt;group\n            android:scaleX=\"7.5\"\n            android:scaleY=\"7.5\"&gt;\n            &lt;path\n                android:fillColor=\"#45D0BB\"\n                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\" \/&gt;\n        &lt;\/group&gt;\n    &lt;\/group&gt;\n&lt;\/vector&gt;\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;CheckBox\n        android:id=\"@+id\/cbCustom1\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Check custom\"\n        android:button=\"@drawable\/cb_custom\"\n        android:enabled=\"true\"\n        \/&gt;\n    &lt;CheckBox\n        android:id=\"@+id\/cbCustom2\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Check custom2\"\n        android:button=\"@drawable\/cb_custom\"\n        android:checked=\"true\"\n        android:enabled=\"true\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-4-1-1.png\" alt=\"\" class=\"wp-image-463\"\/><\/figure>\n\n\n\n<p><strong>11. CheckBox desde c\u00f3digo<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"vertical\"&gt;\n\n\n\n    &lt;CheckBox\n        android:id=\"@+id\/cbSeguro\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Seguro de Viaje\"\n        android:checked=\"true\"\n        android:enabled=\"false\"\n        android:button=\"@drawable\/cb_custom\"\n        \/&gt;\n    &lt;CheckBox\n        android:id=\"@+id\/cbCancelable\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Reserva Cancelable\"\n        android:buttonTint=\"@color\/green\"\n        android:enabled=\"true\"\n        android:button=\"@drawable\/cb_custom\"\n        \/&gt;\n\n\n&lt;\/LinearLayout&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var cbSeguro=findViewById&lt;CheckBox&gt;(R.id.cbSeguro)\n        var cbCancelable=findViewById&lt;CheckBox&gt;(R.id.cbCancelable)\n\n        cbSeguro.setOnClickListener {\n            if (cbSeguro.isChecked)\n                Toast.makeText(this,\"Marcado Seguro\",Toast.LENGTH_SHORT).show()\n            else\n                Toast.makeText(this,\"NO Marcado Seguro\",Toast.LENGTH_SHORT).show()\n        }\n\n        cbCancelable.setOnClickListener {\n            if (cbCancelable.isChecked)\n                Toast.makeText(this,\"Marcado Cancelable\",Toast.LENGTH_SHORT).show()\n            else\n                Toast.makeText(this,\"NO Marcado Cancelable\",Toast.LENGTH_SHORT).show()\n        }\n<\/code><\/pre>\n\n\n\n<p><strong>12. ToggleButton desde XML y c\u00f3digo<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;ToggleButton\n        android:id=\"@+id\/tgNormal\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:textOn=\"S\u00ed\"\n        android:textOff=\"No\"\n        android:checked=\"true\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> var tbNormal : ToggleButton = findViewById&lt;ToggleButton&gt;(R.id.tgNormal)\n        tbNormal.setOnCheckedChangeListener { _, isChecked -&gt;\n            if (isChecked) Toast.makeText(this, \"Activo\",Toast.LENGTH_SHORT).show()\n            else           Toast.makeText(this, \"Inactivo\",Toast.LENGTH_SHORT).show()\n        }\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-5-1-1.png\" alt=\"\" class=\"wp-image-464\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 10 ToggleButton\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/u5wsr0ex_-0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>13. ToggleButton personalizado<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>tg_travel_bg.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:enterFadeDuration=\"@android:integer\/config_shortAnimTime\"\n    android:exitFadeDuration=\"@android:integer\/config_shortAnimTime\"\n    &gt;\n&lt;item android:drawable=\"@drawable\/tg_mountain\" android:state_checked=\"true\"\/&gt;\n&lt;item android:drawable=\"@drawable\/tg_beach\" android:state_checked=\"false\"\/&gt;\n&lt;\/selector&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;ToggleButton\n        android:id=\"@+id\/tgPersonalizado\"\n        android:layout_width=\"72dp\"\n        android:layout_height=\"38dp\"\n        android:checked=\"true\"\n        android:textOn=\"\"\n        android:textOff=\"\"\n        android:background=\"@drawable\/tg_travel_bg\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-6-1-1.png\" alt=\"\" class=\"wp-image-465\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 11 ToggleButton\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/-v_ro91BXF0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>14. Switch desde xml y c\u00f3digo<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var swNormal : Switch = findViewById&lt;Switch&gt;(R.id.swNormal)\n        swNormal.setOnCheckedChangeListener { _, isChecked -&gt;\n            if (isChecked) Toast.makeText(this, \"Activo\",Toast.LENGTH_SHORT).show()\n            else           Toast.makeText(this, \"Inactivo\",Toast.LENGTH_SHORT).show()\n        }\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;Switch\n        android:id=\"@+id\/swNormal\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Notificar cambios por email\"\n        android:thumb=\"@drawable\/ic_car\"\n        android:thumbTint=\"@color\/blue\"\n        android:trackTint=\"@color\/green\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/10\/image-8-7-1-1.png\" alt=\"\" class=\"wp-image-466\"\/><\/figure>\n\n\n\n<p><strong>15. Switch Personalizado<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sw_thumb.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n    &lt;item android:state_checked=\"true\"&gt;\n        &lt;shape android:shape=\"rectangle\"&gt;\n            &lt;solid android:color=\"#fff\"&gt;&lt;\/solid&gt;\n            &lt;size android:width=\"50dp\"\n                android:height=\"40dp\"&gt;&lt;\/size&gt;\n            &lt;corners android:radius=\"40dp\"&gt;&lt;\/corners&gt;\n            &lt;stroke android:width=\"2dp\" android:color=\"@color\/red\"&gt;&lt;\/stroke&gt;\n        &lt;\/shape&gt;\n    &lt;\/item&gt;\n    &lt;item android:state_checked=\"false\"&gt;\n        &lt;shape android:shape=\"rectangle\"&gt;\n            &lt;solid android:color=\"#fff\"&gt;&lt;\/solid&gt;\n            &lt;size android:width=\"50dp\"\n                android:height=\"40dp\"&gt;&lt;\/size&gt;\n            &lt;corners android:radius=\"40dp\"&gt;&lt;\/corners&gt;\n            &lt;stroke android:width=\"2dp\" android:color=\"@color\/green\"&gt;&lt;\/stroke&gt;\n        &lt;\/shape&gt;\n    &lt;\/item&gt;\n&lt;\/selector&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>sw_track.xml\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;selector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n    &lt;item android:state_checked=\"true\"&gt;\n        &lt;shape android:shape=\"rectangle\"&gt;\n            &lt;solid android:color=\"@color\/red\"&gt;&lt;\/solid&gt;\n            &lt;corners android:radius=\"200dp\"&gt;&lt;\/corners&gt;\n        &lt;\/shape&gt;\n    &lt;\/item&gt;\n    &lt;item android:state_checked=\"false\"&gt;\n        &lt;shape android:shape=\"rectangle\"&gt;\n            &lt;solid android:color=\"@color\/green\"&gt;&lt;\/solid&gt;\n            &lt;corners android:radius=\"200dp\"&gt;&lt;\/corners&gt;\n        &lt;\/shape&gt;\n    &lt;\/item&gt;\n&lt;\/selector&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;androidx.appcompat.widget.SwitchCompat\n        android:id=\"@+id\/swCustom\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:textOff=\"Off\"\n        android:textOn=\"On\"\n        android:layout_marginStart=\"10dp\"\n        android:text=\"Notificaci\u00f3n  \"\n        app:showText=\"true\"\n        android:checked=\"false\"\n        android:thumb=\"@drawable\/sw_thumb\"\n        app:track=\"@drawable\/sw_track\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 12 Switch\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/uUHQkdCE7ow?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>16. FloatActionButton<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;com.google.android.material.floatingactionbutton.FloatingActionButton\n    android:id=\"@+id\/fab\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:src=\"@drawable\/ic_add\"\n    android:contentDescription=\"@string\/add_button\"\n    app:backgroundTint=\"@color\/green\"\n    app:elevation=\"6dp\"\n    app:rippleColor=\"@color\/red\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p>En este ejemplo, hemos utilizado com.google.android.material.floatingactionbutton.FloatingActionButton, que es parte del Material Components Library.<\/p>\n\n\n\n<p><strong>android:id<\/strong><strong>=&#8221;@+id\/<\/strong><strong>fab<\/strong><strong>&#8220;: <\/strong>Se asigna un ID \u00fanico al FloatingActionButton para poder referenciarlo en el c\u00f3digo Kotlin.<\/p>\n\n\n\n<p><strong>android:src<\/strong><strong>=&#8221;@<\/strong><strong>drawable<\/strong><strong>\/<\/strong><strong>ic_add<\/strong><strong>&#8220;: <\/strong>Se establece la imagen del FloatingActionButton utilizando el atributo src. Aqu\u00ed, se utiliza un recurso de imagen llamado &#8220;ic_add&#8221; que deber\u00eda existir en la carpeta drawable.<\/p>\n\n\n\n<p><strong>android:contentDescription<\/strong><strong>=&#8221;@<\/strong><strong>string<\/strong><strong>\/<\/strong><strong>add_button<\/strong><strong>&#8220;: <\/strong>Se establece la descripci\u00f3n del contenido para el FloatingActionButton. Esta descripci\u00f3n se utilizar\u00e1 para accesibilidad y se debe definir en el archivo strings.xml utilizando el recurso @string.<\/p>\n\n\n\n<p><strong>app:backgroundTint<\/strong><strong>=&#8221;@color\/<\/strong><strong>colorAccent<\/strong><strong>&#8220;: <\/strong>Se establece el color de fondo del FloatingActionButton utilizando el atributo backgroundTint. Aqu\u00ed, se utiliza el recurso de color llamado &#8220;colorAccent&#8221;.<\/p>\n\n\n\n<p><strong>app:elevation<\/strong><strong>=&#8221;6dp&#8221;: <\/strong>Se establece la elevaci\u00f3n del FloatingActionButton utilizando el atributo elevation. Esto crea una sombra debajo del bot\u00f3n y le da una apariencia elevada.<\/p>\n\n\n\n<p><strong>app:rippleColor<\/strong><strong>=&#8221;@color\/<\/strong><strong>colorAccent<\/strong><strong>&#8220;: <\/strong>Se establece el color de la animaci\u00f3n de ondulaci\u00f3n (ripple) al hacer clic en el FloatingActionButton. Aqu\u00ed, se utiliza el recurso de color llamado &#8220;colorAccent&#8221;.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;com.google.android.material.floatingactionbutton.FloatingActionButton\n        android:id=\"@+id\/fabButton\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:src=\"@drawable\/ic_car\"\n        android:layout_gravity=\"left\"\n        android:layout_margin=\"10dp\"\n        android:backgroundTint=\"@color\/green\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var fabButton = findViewById&lt;FloatingActionButton&gt;(R.id.fabButton)\n        fabButton.setOnClickListener {\n            Toast.makeText(this,\"fab Pulsado\",Toast.LENGTH_SHORT).show()\n        }\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Kotlin U08 13 FloatingActionButton\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/fsiMiyGsXkM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1. Buttons android:layout_width y android:layout_height: Estos par\u00e1metros especifican el ancho y alto del bot\u00f3n. En este caso, se establecen en &#8220;wrap_content&#8221;, lo que significa que &hellip; <\/p>\n","protected":false},"author":1,"featured_media":347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[35,64,74,77,159,189,212,278,279,320,329],"class_list":["post-459","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kotlin","tag-appcompatbutton","tag-buttons","tag-checkbos","tag-chips","tag-floatingactionbutton","tag-imagebutton","tag-kotlin","tag-radio-button","tag-radiobutton","tag-switch","tag-togglebutton"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=459"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/459\/revisions"}],"predecessor-version":[{"id":927,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/459\/revisions\/927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/347"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}