Inicio » Blog » Kotlin

3 noviembre, 2023

Agregar un Button Back en el ActionBar con Kotlin en Android Studio

Es tan simple como configurar el botón de retroceso instanciandolo con el método Override onBackPressed() además de llamar a la actionBar... veamos un ejemplo más práctico ahora mismo.

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

Personalizar la ActionBar y Agregar un Botón de Retroceso en una Actividad Android en Kotlin

En el desarrollo de aplicaciones Android, a menudo necesitas navegar entre diferentes pantallas o actividades. Uno de los escenarios más comunes es abrir una nueva actividad cuando un botón se pulsa en la pantalla principal. En este tutorial, aprenderemos cómo iniciar una nueva actividad en Android utilizando el lenguaje de programación Kotlin.

Back Button Kotlin

La primera Activitidad

MainActivity.kt

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

        val btn = findViewById<Button>(R.id.btn)

        btn.setOnClickListener {
            startActivity(Intent(baseContext, PantallaActivity::class.java))
        }
    }
}

activity_main.xml

<?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=".MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Segunda Pantalla"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Explicación del Código:

Vamos a desglosar el código paso a paso para entender su funcionalidad:

  1. class MainActivity : AppCompatActivity(): Aquí se define la clase MainActivity, que extiende AppCompatActivity. Esta extensión indica que la actividad está utilizando la biblioteca de compatibilidad de Android y proporcionará una ActionBar.

  2. override fun onCreate(savedInstanceState: Bundle?): Este método se llama cuando se crea la actividad. En este método, se realiza la inicialización y configuración de la actividad.

  3. super.onCreate(savedInstanceState): Llama al método onCreate de la clase base para realizar la inicialización estándar.

  4. setContentView(R.layout.activity_main): Esta línea de código establece el diseño de la actividad. El diseño se infla desde el archivo XML llamado activity_main.xml, que define la interfaz de usuario de la actividad principal.

  5. val btn = findViewById<Button>(R.id.btn): Aquí, se encuentra el botón con el ID "btn" en el diseño de la actividad principal y se almacena una referencia a ese botón en la variable btn.

  6. btn.setOnClickListener { ... }: A continuación, se agrega un listener al botón. Esto significa que cuando el botón se pulsa, se ejecutará el código dentro del bloque de llaves {}.

  7. startActivity(Intent(baseContext, PantallaActivity::class.java)): Cuando el botón se pulsa, se inicia una nueva actividad llamada PantallaActivity. Esto se logra mediante la creación de una instancia de Intent y pasando el contexto base (baseContext) y la clase de destino (PantallaActivity::class.java) como argumentos. Esta línea inicia la nueva actividad.

 

La segunda pantalla o actividad

En el desarrollo de aplicaciones Android, a menudo necesitamos personalizar la apariencia y el comportamiento de la ActionBar, además de agregar funcionalidad de navegación hacia atrás. En este tutorial, exploraremos un ejemplo de código en Kotlin que logra exactamente eso.

PantallaActivity.kt

class PantallaActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pantalla)
        val actionbar = supportActionBar
        actionbar!!.title = "Segunda Pantalla"
        actionbar.setDisplayHomeAsUpEnabled(true)
    }

    override fun onSupportNavigateUp(): Boolean {
        onBackPressed()
        return true
    }
}

activity_pantalla.xml

<?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=".PantallaActivity">

</androidx.constraintlayout.widget.ConstraintLayout>

Explicación del Código:

Vamos a desglosar el código paso a paso para comprender su funcionalidad:

  1. PantallaActivity es una clase que extiende AppCompatActivity. Esto significa que la actividad utiliza la biblioteca de compatibilidad de Android y proporcionará una ActionBar.

  2. onCreate(savedInstanceState: Bundle?) es un método de ciclo de vida que se ejecuta cuando la actividad se crea. Dentro de este método, se realizan varias acciones:

    • super.onCreate(savedInstanceState) se llama para asegurarse de que el comportamiento predeterminado de la creación de la actividad se ejecute correctamente.

    • setContentView(R.layout.activity_pantalla) infla el diseño XML definido en activity_pantalla.xml y lo muestra en la pantalla de la actividad.

    • val actionbar = supportActionBar obtiene una referencia a la ActionBar de la actividad.

    • actionbar!!.title = "Segunda Pantalla" establece el título de la ActionBar en "Segunda Pantalla". Esto personaliza el título que se muestra en la parte superior de la pantalla.

    • actionbar.setDisplayHomeAsUpEnabled(true) habilita la flecha de retroceso en la ActionBar. Esto agrega la flecha de retroceso en la esquina superior izquierda de la ActionBar, permitiendo que los usuarios regresen a la pantalla anterior.

  3. onSupportNavigateUp(): Boolean es un método que se llama cuando se presiona la flecha de retroceso en la ActionBar. En este caso, el método realiza dos acciones:

    • onBackPressed() se llama, lo que simula el comportamiento del botón físico de retroceso en Android. Esto lleva a la actividad anterior en la pila de actividades.

    • return true indica que la acción de navegación hacia arriba se manejó con éxito.

Conclusión:

En este tutorial, hemos visto cómo personalizar la ActionBar en una actividad secundaria de una aplicación Android utilizando Kotlin. Además, hemos habilitado un botón de retroceso en la ActionBar que permite a los usuarios regresar a la actividad anterior. La personalización de la ActionBar es una práctica común en el desarrollo de aplicaciones Android, ya que ayuda a mejorar la experiencia del usuario y la navegación en la aplicación.


Leido 128 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Kotlin

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023