{"id":471,"date":"2023-11-04T18:46:12","date_gmt":"2023-11-04T18:46:12","guid":{"rendered":"https:\/\/javigomez.org\/?p=471"},"modified":"2025-09-29T20:33:56","modified_gmt":"2025-09-29T20:33:56","slug":"08-kotlin-palette-widget-imagenes-videos-web-calendar-progress-barr-seek-bar-rating-search-y-divider","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/11\/04\/08-kotlin-palette-widget-imagenes-videos-web-calendar-progress-barr-seek-bar-rating-search-y-divider\/","title":{"rendered":"09. Kotlin \u2013 Palette Widget. Im\u00e1genes, Videos, Web, Calendar, Progress Barr, Seek Bar, Rating, Search y Divider"},"content":{"rendered":"\n<p><strong>1. ImageView<\/strong><\/p>\n\n\n\n<p>Introducir una imagen desde un sitio local<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ImageView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"500dp\"\n        android:src=\"@drawable\/flash\"\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 U09 01 Imagen Disco\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/4NnZpm-QUo0?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>2. ImageView. Cargando im\u00e1genes desde una URL<\/p>\n\n\n\n<p><strong>Gradle (Module)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dependencies {\nimplementation(\"androidx.core:core-ktx:1.12.0\")    implementation(\"androidx.appcompat:appcompat:1.6.1\")    implementation(\"com.google.android.material:material:1.10.0\")    implementation(\"androidx.constraintlayout:constraintlayout:2.1.4\")\n\n<strong>    implementation(\"com.squareup.picasso:picasso:2.8\")\n    implementation (\"com.github.bumptech.glide:glide:4.16.0\")\n<\/strong>\ntestImplementation(\"junit:junit:4.13.2\")    androidTestImplementation(\"androidx.test.ext:junit:1.1.5\")    androidTestImplementation(\"androidx.test.espresso:espresso-core:3.5.1\")\n}\n<\/code><\/pre>\n\n\n\n<p><strong>AndroidManifest.xml<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"&gt;\n\n    &lt;uses-permission android:name=\"android.permission.INTERNET\"\/&gt;\n\n    &lt;application\n<\/code><\/pre>\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    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"vertical\"&gt;\n\n    &lt;ImageView\n        android:id=\"@+id\/imageView\"\n        android:layout_width=\"200dp\"\n        android:layout_height=\"200dp\" \/&gt;\n\n    &lt;ImageView\n        android:id=\"@+id\/imageView2\"\n        android:layout_width=\"200dp\"\n        android:layout_height=\"200dp\" \/&gt;\n&lt;\/LinearLayout&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>val imageView = findViewById&lt;ImageView&gt;(R.id.imageView)\nval imageView2 = findViewById&lt;ImageView&gt;(R.id.imageView2)\n\nPicasso.get().load(&quot;https:\/\/javigomez.org\/ESIC\/579.jpg%22\n    .placeholder(R.drawable.ic_launcher_foreground)\n    .error(R.drawable.ic_launcher_background)\n    .into(imgSuper)\n\nGlide.with(this)\n    .load(&quot;https:\/\/javigomez.org\/SOT\/img\/444.jpg%22\n    .error(R.drawable.ic_launcher_foreground)\n    .placeholder(R.drawable.ic_launcher_background)\n    .into(imageView2)\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 U09 02 Imagen URL\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/v80kR2b895w?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. ShapeableImageView. Personalizar los marcos de las im\u00e1genes<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>style_image.xml<\/strong>\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;resources&gt;\n    &lt;style name=\"Circular\"&gt;\n        &lt;item name=\"cornerSize\"&gt;50%&lt;\/item&gt;\n    &lt;\/style&gt;\n\n    &lt;style name=\"RoundedSquare\"&gt;\n        &lt;item name=\"cornerSize\"&gt;20%&lt;\/item&gt;\n    &lt;\/style&gt;\n\n    &lt;style name=\"CornetCut\"&gt;\n        &lt;item name=\"cornerSize\"&gt;15dp&lt;\/item&gt;\n        &lt;item name=\"cornerFamily\"&gt;cut&lt;\/item&gt;\n    &lt;\/style&gt;\n\n    &lt;style name=\"DiamondCut\"&gt;\n        &lt;item name=\"cornerSize\"&gt;75dp&lt;\/item&gt;\n        &lt;item name=\"cornerFamily\"&gt;cut&lt;\/item&gt;\n    &lt;\/style&gt;\n\n    &lt;style name=\"SpedificCornerCut\"&gt;\n        &lt;item name=\"cornerSizeTopRight\"&gt;75dp&lt;\/item&gt;\n        &lt;item name=\"cornerFamilyTopRight\"&gt;cut&lt;\/item&gt;\n        &lt;item name=\"cornerSizeBottomLeft\"&gt;75dp&lt;\/item&gt;\n        &lt;item name=\"cornerFamilyBottomLeft\"&gt;cut&lt;\/item&gt;\n    &lt;\/style&gt;\n\n    &lt;style name=\"SpedificCornerRounded\"&gt;\n        &lt;item name=\"cornerSizeTopRight\"&gt;75dp&lt;\/item&gt;\n        &lt;item name=\"cornerFamilyTopRight\"&gt;rounded&lt;\/item&gt;\n        &lt;item name=\"cornerSizeBottomLeft\"&gt;75dp&lt;\/item&gt;\n        &lt;item name=\"cornerFamilyBottomLeft\"&gt;rounded&lt;\/item&gt;\n    &lt;\/style&gt;\n\n&lt;\/resources&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;com.google.android.material.imageview.ShapeableImageView\n        android:id=\"@+id\/sivCircular\"\n        android:layout_width=\"150dp\"\n        android:layout_height=\"150dp\"\n        android:layout_margin=\"8dp\"\n        android:src=\"@drawable\/flash\"\n        app:shapeAppearanceOverlay=\"@style\/Circular\u201c\n        app:strokeColor=\"@color\/green\"\n        app:strokeWidth=\"5dp\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/javigomez.org\/wp-content\/uploads\/2023\/11\/image-1024x175.png\" alt=\"\" class=\"wp-image-472\"\/><\/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 U09 03 Imagen Shapeable\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/HLovGmvfXNQ?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. WebView<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;WebView\n        android:id=\"@+id\/webView\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"1500dp\"\n        tools:ignore=\"WebViewLayout\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<p>AndroidManifest.xml<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"&gt;\n\n    &lt;uses-permission android:name=\"android.permission.INTERNET\"\/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var webView = findViewById&lt;WebView&gt;(R.id.webView)\n\n\n        \/\/Esto es necesario para habilitar js en el navegador\n        \/\/y poner esta ventana como navegador por defecto\n\n        var webSettings: WebSettings=webView.getSettings()\n        webSettings.javaScriptEnabled=true\n        webView.setWebViewClient(WebViewClient())\n\n        webView.loadUrl(&quot;https:\/\/javigomez.org\/&quot;)\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 U09 04 webView\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/1Wc-vXsK75A?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. VideoView<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;VideoView\n    android:id=\"@+id\/vvLocal\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"250dp\"\n\n    \/&gt;\n    &lt;VideoView\n    android:id=\"@+id\/vvWeb\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"250dp\"\n    \/&gt;\n<\/code><\/pre>\n\n\n\n<p>Creamos un directorio para guardar los videos en local. Los llamamos <strong>raw<\/strong><\/p>\n\n\n\n<p>Luego abrimos el directorio de <strong>raw<\/strong> e incorporamos el archivo de video<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var vvLocal = findViewById&lt;VideoView&gt;(R.id.vvLocal)\n        var mcLocal = MediaController(this)\n        mcLocal.setAnchorView(vvLocal)\n        var path = &quot;android.resource:\/\/&quot; + packageName + &quot;\/&quot; + R.raw.movie\n        vvLocal.setVideoURI(Uri.parse(path))\n        vvLocal.setMediaController(mcLocal)\n        vvLocal.start() \/\/Inicia autom\u00e1ticamente\n\n\n        var vvWeb = findViewById&lt;VideoView&gt;(R.id.vvWeb)\n        var mcWeb = MediaController(this)\n        mcWeb.setAnchorView(vvWeb)\n        vvWeb.setVideoPath(&quot;https:\/\/javigomez.org\/ESIC\/multi\/movie.mp4%22\n        vvWeb.setMediaController(mcWeb)\n<\/code><\/pre>\n\n\n\n<p><strong>6. Calendar<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;CalendarView\n        android:id=\"@+id\/cvEjemplo\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        \/&gt;\n    &lt;TextView\n        android:id=\"@+id\/tvFecha\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_margin=\"16dp\"\n        android:text=\"Fecha seleccionada\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var cvEjemplo = findViewById&lt;CalendarView&gt;(R.id.cvEjemplo)\n        var tvFecha= findViewById&lt;TextView&gt;(R.id.tvFecha)\n\n\n\n        cvEjemplo.setOnDateChangeListener { cv,year,month,day -&gt;\n            var date = \"$day\/${month+1}\/$year\"\n            tvFecha.text=\"Fecha seleccionada: $date\"<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/11\/image-25-1-1-1.png\" alt=\"\" class=\"wp-image-475\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>var cvEjemplo = findViewById&lt;CalendarView&gt;(R.id.cvEjemplo)\n        var tvFecha= findViewById&lt;TextView&gt;(R.id.tvFecha)\n        cvEjemplo.setOnDateChangeListener { cv,year,month,day -&gt;\n            var date = \"$day\/${month+1}\/$year\"\n            tvFecha.text=\"Fecha seleccionada: $date\"\n        }\n\n        \/\/Marcar una fecha en el calendario\n        var calendar = Calendar.getInstance()\n        calendar.set(2026,5,8)\n        cvEjemplo.date=calendar.timeInMillis\n\n        \/\/empezar por el lunes\ncvEjemplo.firstDayOfWeek = Calendar.MONDAY\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 U09 06 Calendar\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/jhdo6GBz8PQ?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. ProgressBarr<\/strong><\/p>\n\n\n\n<p><strong>ProgressBar circulares<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;ProgressBar\n        android:id=\"@+id\/pbMedium\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        style=\"?android:attr\/progressBarStyle\"\n        \/&gt;\n    &lt;ProgressBar\n        android:id=\"@+id\/pbSmall\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        style=\"?android:attr\/progressBarStyleSmall\"\n        \/&gt;\n    &lt;ProgressBar\n        android:id=\"@+id\/pbLarge\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        style=\"?android:attr\/progressBarStyleLarge\"\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\/11\/image-25-2-1-1.png\" alt=\"\" class=\"wp-image-478\"\/><\/figure>\n\n\n\n<p><strong>ProgressBar lineales<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ProgressBar\n        android:id=\"@+id\/pbIndeterminado\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        style=\"?android:attr\/progressBarStyleHorizontal\"\n        android:indeterminate=\"true\"\n        android:indeterminateTint=\"@color\/green\"\n        \/&gt;\n\n    &lt;ProgressBar\n        android:id=\"@+id\/pbDeterminado\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        style=\"?android:attr\/progressBarStyleHorizontal\"\n        android:max=\"300\"\n        android:progress=\"100\"\n        android:progressBackgroundTint=\"@color\/red\"\n        android:progressTint=\"@color\/green\"\n        \/&gt;\n\n    &lt;ProgressBar\n        android:id=\"@+id\/pbBarraSecundaria\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        style=\"?android:attr\/progressBarStyleHorizontal\"\n        android:max=\"300\"\n        android:progress=\"110\"\n        android:progressBackgroundTint=\"@color\/black\"\n        android:progressTint=\"@color\/green\"\n        android:secondaryProgress=\"130\"\n        android:secondaryProgressTint=\"@color\/red\"\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\/11\/image-25-4-1-1.png\" alt=\"\" class=\"wp-image-480\"\/><\/figure>\n\n\n\n<p><strong>ProgressBar desde c\u00f3digo<\/strong><\/p>\n\n\n\n<p>Se puede establecer los valores iniciales de un ProgressBar en el evento OnCreate de la Activity, pero no se puede mostrar como avanza dentro de este evento. Para ver el avance ser\u00e1 necesario crear una corrutina. Para hacer una corrutina ser\u00e1 necesario especificar en el gradle<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dependencies {\n\n    implementation 'androidx.core:core-ktx:1.7.0'\n    implementation 'androidx.appcompat:appcompat:1.6.1'\n    implementation 'com.google.android.material:material:1.8.0'\n    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'\n    testImplementation 'junit:junit:4.13.2'\n    androidTestImplementation 'androidx.test.ext:junit:1.1.5'\n    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'\n\n    implementation(\"org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.2\")\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var pbDeterminado = findViewById&lt;ProgressBar&gt;(R.id.pbDeterminado)\n        var pbSecundaria = findViewById&lt;ProgressBar&gt;(R.id.pbSecundaria)\n        pbDeterminado.max=300\n        pbDeterminado.progress=0\n        pbSecundaria.max=300\n        pbSecundaria.progress=0\n        pbSecundaria.secondaryProgress=0\n\n        GlobalScope.launch {\n            progressManager(pbDeterminado)\n            progressManager(pbSecundaria)\n        }\n    }\n\n    private fun progressManager(pb:ProgressBar){\n        while (pb.progress &lt; pb.max){\n            \/\/pb.progress+=5\n            pb.incrementProgressBy(5)\n            if (pb.id == R.id.pbSecundaria) pb.incrementSecondaryProgressBy(10)\n            sleep(100L)\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 U09 07 ProgressBar\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/sEi1rxqBGuE?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. SeekBar<\/strong><\/p>\n\n\n\n<p>SeekBar es un componente de interfaz de usuario en Android que permite a los usuarios seleccionar un valor dentro de un rango espec\u00edfico, deslizando un indicador a lo largo de una barra<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SeekBar\n    android:id=\"@+id\/seekBar\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:max=\"100\"\n    android:progress=\"50\" \n\n    android:progressTint=\"@color\/green\"\n    android:progressBackgroundTint=\"@color\/red\"\n    android:thumbTint=\"@color\/red\"\n\n\/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>sb_thumb.xml<\/strong>\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;shape\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:shape=\"rectangle\"\n    android:tint=\"@color\/purple_200\"&gt;\n    &lt;size\n        android:width=\"32dp\"\n        android:height=\"32dp\" \/&gt;\n&lt;\/shape&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>sb_progress_bg.xml<\/strong>\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 android:id=\"@android:id\/background\"\n        android:gravity=\"center_vertical|fill_horizontal\"&gt;\n        &lt;shape android:shape=\"rectangle\"\n            android:tint=\"@color\/blue\"&gt;\n            &lt;corners android:radius=\"8dp\"\/&gt;\n            &lt;size android:height=\"20dp\" \/&gt;\n        &lt;\/shape&gt;\n    &lt;\/item&gt;\n    &lt;item android:id=\"@android:id\/progress\"\n        android:gravity=\"center_vertical|fill_horizontal\"&gt;\n        &lt;scale android:scaleWidth=\"100%\"&gt;\n            &lt;selector&gt;\n                &lt;item android:state_enabled=\"false\"\n                    android:drawable=\"@android:color\/transparent\" \/&gt;\n                &lt;item&gt;\n                    &lt;shape android:shape=\"rectangle\"\n                        android:tint=\"@color\/red\"&gt;\n                        &lt;corners android:radius=\"8dp\"\/&gt;\n                        &lt;size android:height=\"24dp\" \/&gt;\n                    &lt;\/shape&gt;\n                &lt;\/item&gt;\n            &lt;\/selector&gt;\n        &lt;\/scale&gt;\n    &lt;\/item&gt;\n&lt;\/layer-list&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SeekBar\n        android:id=\"@+id\/sbCustom\"\n        android:layout_marginTop=\"30dp\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:progress=\"30\"\n        android:thumb=\"@drawable\/sb_thumb\"\n        android:progressDrawable=\"@drawable\/sb_progress_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\/11\/image-25-5-1-1.png\" alt=\"\" class=\"wp-image-483\"\/><\/figure>\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&lt;SeekBar\n    android:id=\"@+id\/sbCustom\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:max=\"100\"\n    android:progress=\"20\"\n\n    android:progressTint=\"@color\/green\"\n    android:progressBackgroundTint=\"@color\/red\"\n    android:thumbTint=\"@color\/red\"\n\n    \/&gt;\n&lt;TextView\n    android:id=\"@+id\/tvValor\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"match_parent\"\n    android:text=\"Valor:\"\/&gt;\n\n&lt;\/LinearLayout&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>class MainActivity : AppCompatActivity() {\n\n    lateinit var sbCustom: SeekBar\n    lateinit var tvValor: TextView\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n\n        sbCustom = findViewById&lt;SeekBar&gt;(R.id.sbCustom)\n        tvValor = findViewById&lt;TextView&gt;(R.id.tvValor)\n\n\n        sbCustom.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {\n            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {\n                tvValor.setText(\"Valor: \" + p1)\n            }\n\n            override fun onStartTrackingTouch(p0: SeekBar?) {\n\n            }\n\n            override fun onStopTrackingTouch(p0: SeekBar?) {\n\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 U09 08 SeekBar\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/_AZAajXrTq8?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. RatingBar<\/strong><\/p>\n\n\n\n<p>RatingBar es un componente de interfaz de usuario en Android que permite a los usuarios seleccionar una calificaci\u00f3n o valoraci\u00f3n mediante un conjunto de estrellas.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;RatingBar\n        android:id=\"@+id\/rbEjemplo\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:numStars=\"5\"\n        android:rating=\"2.5\"\n        android:progressBackgroundTint=\"@color\/green\"\n        android:progressTint=\"@color\/red\"\n        android:stepSize=\"0.5\"\n        android:isIndicator=\"false\"\n        style=\"@android:style\/Widget.Material.Light.RatingBar.Small\"\n        \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tvRating\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"3.5\"\n        \/&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var rbEjemplo = findViewById&lt;RatingBar&gt;(R.id.rbEjemplo)\n        var tvRating = findViewById&lt;TextView&gt;(R.id.tvRating)\n        rbEjemplo.rating = 2.5f\n        rbEjemplo.setOnRatingBarChangeListener { ratingBar, rating, _ -&gt;\n            tvRating.text=\"${rating}\/${ratingBar.numStars}\"\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\/11\/image-25-6-1-1.png\" alt=\"\" class=\"wp-image-484\"\/><\/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 U09 09 RatingBar\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/NnjJDbmDWSE?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. SearchView<\/strong><\/p>\n\n\n\n<p>El SearchView es un componente de interfaz de usuario en Android que permite a los usuarios introducir y buscar texto en una aplicaci\u00f3n<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>searchview_bg.xml<\/strong>\n\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:shape=\"rectangle\"&gt;\n\n    &lt;corners\n        android:radius=\"16dp\"\/&gt;\n    &lt;stroke\n        android:color=\"#C0BEBE\"\n        android:width=\"4dp\"\/&gt;\n\n&lt;\/shape&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SearchView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:iconifiedByDefault=\"false\"\n        android:queryHint=\"Nombre:\"\n        android:layout_marginTop=\"30dp\"\n        android:layout_marginHorizontal=\"16dp\"\n        android:background=\"@drawable\/searchview_bg\"\n        android:queryBackground=\"@android:color\/transparent\"\n        \/&gt;\n       &lt;ListView\n           android:id=\"@+id\/lvUsers\"\n           android:layout_marginHorizontal=\"16dp\"\n           android:layout_width=\"match_parent\"\n           android:layout_height=\"wrap_content\"\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\/11\/image-25-7-1-1.png\" alt=\"\" class=\"wp-image-485\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>val users=arrayOf(\"Alberto\",\"Alvaro\",\"Ana\",\"Amparo\",\"Bartolo\",\"Bernardo\",\"Carla\",\"Carlos\",\"Carolina\")\n\n        val adapterUser: ArrayAdapter&lt;String&gt; = ArrayAdapter(this,android.R.layout.simple_list_item_1,users)\n\n        var svUsers=findViewById&lt;SearchView&gt;(R.id.svUsers)\n        var lvUsers=findViewById&lt;ListView&gt;(R.id.lvUsers)\n\n        lvUsers.adapter=adapterUser\n\n        svUsers.setOnQueryTextListener(object: SearchView.OnQueryTextListener{\n            override fun onQueryTextSubmit(query: String?): Boolean {\n                svUsers.clearFocus()\n                if (users.contains(query))\n                    adapterUser.filter.filter(query)\n                return false\n            }\n\n            override fun onQueryTextChange(query: String?): Boolean {\n                adapterUser.filter.filter(query)\n                return false\n            }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SearchView\n        android:id=\"@+id\/svUsers\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:iconifiedByDefault=\"false\"\n        android:queryHint=\"Nombre:\"\n        android:layout_marginTop=\"30dp\"\n        android:layout_marginHorizontal=\"16dp\"\n        android:background=\"@drawable\/searchview_bg\"\n        android:queryBackground=\"@android:color\/transparent\"\n        \/&gt;\n\n    &lt;ListView\n        android:id=\"@+id\/lvUsers\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginHorizontal=\"16dp\" \/&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\/11\/image-25-8-1-1.png\" alt=\"\" class=\"wp-image-486\"\/><\/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 U09 10 SearchView\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/07y7BmVilz8?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>11. Divider<\/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    &lt;TextView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_margin=\"10dp\"\n        android:text=\"Texto en la parte superior\" \/&gt;\n\n    &lt;View\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"4dp\"\n        android:background=\"@color\/red\"\n        android:layout_marginHorizontal=\"10dp\"\n        \/&gt;\n\n    &lt;View\n        android:layout_width=\"4dp\"\n        android:layout_height=\"100dp\"\n        android:layout_gravity=\"center\"\n        android:background=\"@color\/green\"\/&gt;\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\/11\/image-25-9-1-1.png\" alt=\"\" class=\"wp-image-487\"\/><\/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 U09 11 View\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/T7y7PsfuEVY?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. ImageView Introducir una imagen desde un sitio local 2. ImageView. Cargando im\u00e1genes desde una URL Gradle (Module) AndroidManifest.xml 3. ShapeableImageView. Personalizar los marcos de &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":[30,66,121,191,212,270,281,298,299,343,349],"class_list":["post-471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kotlin","tag-andorid-studio","tag-calendarview","tag-divider","tag-imageview","tag-kotlin","tag-progressbar","tag-ratingbar","tag-searchview","tag-seekbar","tag-videoview","tag-webview"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/471","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=471"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/471\/revisions"}],"predecessor-version":[{"id":926,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/471\/revisions\/926"}],"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=471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}