Barra inferior expandible en Android

ExpandableBottomBar BottomNavigationView BottomNavigationView ,,
 

ExpandableBottomBar in Android

ventajas:

  • Se trata de destinos de nivel superior a los que se puede acceder desde cualquier lugar de la aplicación.
  • Es una extensión del componente Material Design (BottomNavigationView).
  • Fácil de usar.

Desventajas:

  • Se usa solo cuando solo hay de tres a cinco destinos.
  • Solo se puede utilizar con móviles y tabletas.
  • La longitud de las etiquetas de texto debe ser menor.
  • Debe usarse cuando el usuario pasará más del 90% del tiempo en una aplicación en la misma ventana.

Acercarse: 

Paso 1: agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias. Permite a los desarrolladores usar directamente ExpandableBottomBar directamente en archivos XML.
 

XML

dependencies {         
        implementation 'com.github.st235:expandablebottombar:1.1.8'     
}

 

Paso 2: ahora agregue el siguiente código en el archivo string.xml . En este archivo, agregue todos los nombres de los campos que se mostrarán en ExpandableBottomBar .

XML

<resources>
    <string name="algo">Algorithm</string>
    <string name="course">Course</string>
    <string name="profile">Profile</string>
</resources>

 

Paso 3: Cree un AlgorithmFragment haciendo clic con el botón derecho en el paquete Java, seleccione nuevo -> Fragmento (en blanco).

Paso 4: siga el paso anterior para CourseFragment y LoginFragment .

Paso 5: ahora agregue el siguiente código en el archivo fragment_algorithm.xml . Aquí se agrega un TextView en el diseño. 
 

fragment_algorithm.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragment_algo"
    tools:context=".AlgorithmFragment">
  
    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Algorithm" />
  
</FrameLayout>

Paso 6: ahora agregue el siguiente código en el archivo fragment_course.xml . Aquí se agrega un TextView en el diseño. 
 

fragment_course.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragment_course"
    tools:context=".CourseFragment">
  
    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Course" />
  
</FrameLayout>

 

Paso 7: ahora agregue el siguiente código en el archivo fragment_profile.xml . Aquí se agrega un TextView en el diseño. 
 

fragment_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragment_profile"
    tools:context=".ProfileFragment">
  
    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Profile" />
  
</FrameLayout>

 

Paso 8: ahora agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregue ExpandableBottomBar a nuestro diseño. 
 

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">
  
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout"/>
  
    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
        android:id="@+id/expandable_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:exb_backgroundColor="#2e2e2e"
        app:exb_backgroundCornerRadius="25dp"
        app:exb_itemInactiveColor="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.991" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

 

Paso 9: ahora agregue el siguiente código en el archivo MainActivity.kt . En este archivo, agregue onItemSelectedListener que ayuda a navegar entre los fragmentos. Cambiará el fragmento cuando el usuario toque el icono. Aquí el método addItem se usa explícitamente para agregar elementos a ExpandableBottomBar , pero también se puede hacer agregando elementos en la carpeta  del menú .
 

MainActivity.kt

package org.geeksforgeeks.expandablebottombar
  
import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import github.com.st235.lib_expandablebottomba
                            .ExpandableBottomBar
import github.com.st235.lib_expandablebottombar
                            .ExpandableBottomBarMenuItem
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val bottomBar: ExpandableBottomBar = 
                       findViewById(R.id.expandable_bottom_bar)
  
        //set up the base fragment
        supportFragmentManager.beginTransaction()
                              .add(R.id.layout, AlgorithmFragment())
                              .commit()
  
        //addItem function is used to set items in ExpandableBottomBar
        bottomBar.addItems(
            ExpandableBottomBarMenuItem.Builder(context = this)
                .addItem(R.id.fragment_algo, R.drawable.ic_algorithm,
                         R.string.algo, Color.GREEN)
                .addItem(R.id.fragment_course, R.drawable.ic_course,
                         R.string.course, Color.YELLOW)
                .addItem(R.id.fragment_profile, R.drawable.ic_account,
                         R.string.profile, Color.MAGENTA)
                .build()
        )
  
        //It will help the user to switch between different fragment.
        bottomBar.onItemSelectedListener = { view, menuItem ->
            when(menuItem.itemId){
                R.id.fragment_algo ->
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.layout, AlgorithmFragment())
                        .commit()
                R.id.fragment_course ->
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.layout, CourseFragment())
                        .commit()
                R.id.fragment_profile ->
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.layout, ProfileFragment())
                        .commit()
            }
        }
  
  
    }
}

 

Producción:
 

Enlace de referencia: https://github.com/st235/ExpandableBottomBar
 

Publicación traducida automáticamente

Artículo escrito por madhavmaheshwarimm20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *