Nueva barra de navegación inferior de Android o BottomNavigationView

133

Vi que salió la nueva directriz y se usó en la google photosúltima aplicación. No tengo idea de cómo usar la nueva barra de navegación inferior. Vea a través del nuevo soporte lib, no encontré ninguna pista.

ingrese la descripción de la imagen aquí

No se puede encontrar ninguna muestra oficial.

¿Cómo usar la nueva barra inferior? No quiero hacer ninguna personalización.

zjywill
fuente
Puedes echar un vistazo a mi respuesta: stackoverflow.com/a/44967021/2412582
Prashant
Consulte stackoverflow.com/a/49031168/2468324
Ankit Bisht el

Respuestas:

175

Creo que podrías estar buscando esto.

Aquí hay un fragmento rápido para comenzar:

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Notice how you don't use the setContentView method here! Just
        // pass your layout to bottom bar, it will be taken care of.
        // Everything will be just like you're used to.
        mBottomBar = BottomBar.bind(this, R.layout.activity_main,
                savedInstanceState);

        mBottomBar.setItems(
                new BottomBarTab(R.drawable.ic_recents, "Recents"),
                new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
                new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
                new BottomBarTab(R.drawable.ic_friends, "Friends")
        );

        mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onItemSelected(final int position) {
                // the user selected a new tab
            }
        });
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mBottomBar.onSaveInstanceState(outState);
    }
}

Aquí hay un enlace de referencia.

https://github.com/roughike/BottomBar

EDITAR nuevos lanzamientos.

La Vista de navegación inferior ha estado en las pautas de diseño de materiales durante algún tiempo, pero no nos ha sido fácil implementarla en nuestras aplicaciones. Algunas aplicaciones han creado sus propias soluciones, mientras que otras han confiado en bibliotecas de código abierto de terceros para hacer el trabajo. Ahora que la biblioteca de soporte de diseño está viendo la adición de esta barra de navegación inferior, ¡analicemos cómo podemos usarla!

Cómo utilizar ?

Para empezar, necesitamos actualizar nuestra dependencia.

compile com.android.support:design:25.0.0

Diseño xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Content Container -->

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Crear menú según su requisito.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

Manejo de estados habilitados / deshabilitados. Hacer archivo selector.

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

Manejar eventos de clic.

BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:

                        break;
                    case R.id.action_schedules:

                        break;
                    case R.id.action_music:

                        break;
                }
                return false;
            }
});

Editar: con Androidx solo necesita agregar las siguientes dependencias.

implementation 'com.google.android.material:material:1.2.0-alpha01'

Diseño

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_gravity="bottom"
            app:menu="@menu/bottom_navigation_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</FrameLayout>

Si desea leer más sobre sus métodos y cómo funciona, lea esto.

Seguramente te ayudará.

Jay Rathod RJ
fuente
la barra inferior de la muestra aún se puede personalizar por usted mismo, cualquier forma de usar la lib de Android de origen. Pensé que podría en la biblioteca de soporte. ¿O aún no es público?
zjywill
@zjywill No está personalizado, pero es una forma de usar la funcionalidad oficial de la barra de navegación inferior en nuestra aplicación. Solo prueba este código.
Jay Rathod RJ
1
No le sugeriría que use la barra inferior aproximada, ya que la API no está completamente implementada y he encontrado problemas de representación. No puede cambiar el ícono en tiempo de ejecución, y siguió ignorando los colores que configuré para el fondo de los botones.
Alon Kogan
Responda que, ¿cómo puedo guardar el historial
Mitul Goti
1
¡La reflexión de Java sobre mShiftingMode me ayudó! No sé lo que están pensando por lo exponga este campo
Plátano droide
48

Debe usar BottomNavigationView de la biblioteca de soporte de Android v25. Representa una barra de navegación inferior estándar para la aplicación.

Aquí hay una publicación en Medium que tiene una guía paso a paso: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze

Maksim Turaev
fuente
2
stackoverflow.com/questions/40153888/… hola maxim .. Implementé esto, pero no aparece ..
Sagar Chavada
@SagarChavada es posible que desee mirar en esta publicación
Maksim Turaev
55
@DroidDev eso se debe a que BottomNavigationView se lanzó el día en que se publicó esta respuesta. Antes de eso, solo había soluciones de terceros disponibles.
¿Sabes si puedes hacer vistas personalizadas con un adaptador?
Radu
1
@ Alan, parece que BottomNavigationView es una parte de la Biblioteca de soporte que tiene un nivel mínimo de API 9, así que supongo que funcionará. Todavía puede verificarlo en el emulador para estar 100% seguro.
Maksim Turaev
17

Mi respuesta original trató con el BottomNavigationView, pero ahora hay un BottomAppBar. Agregué una sección en la parte superior para eso con un enlace de implementación.

Barra de aplicaciones inferior

El BottomAppBaradmite un botón de acción flotante.

ingrese la descripción de la imagen aquí

Imagen de aquí . Consulte la documentación y este tutorial para obtener ayuda para configurar BottomAppBar.

Vista de navegación inferior

El siguiente ejemplo completo muestra cómo hacer que una Vista de navegación inferior sea similar a la imagen de la pregunta. Consulte también Navegación inferior en la documentación.

ingrese la descripción de la imagen aquí

Agregar la biblioteca de soporte de diseño

Agregue esta línea al archivo build.grade de su aplicación junto a otras cosas de la biblioteca de soporte.

implementation 'com.android.support:design:28.0.0'

Reemplace el número de versión con lo que sea actual.

Crear el diseño de la actividad

Lo único que hemos agregado al diseño es el BottomNavigationView. Para cambiar el color del icono y el texto cuando se hace clic, puede usar un en selectorlugar de especificar el color directamente. Esto se omite por simplicidad aquí.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white" />

</RelativeLayout>

Tenga en cuenta que solíamos layout_alignParentBottomponerlo en la parte inferior.

Definir los elementos del menú.

El xml anterior para la Vista de navegación inferior a la que se hace referencia bottom_nav_menu. Esto es lo que define cada elemento en nuestra opinión. Lo haremos ahora. Todo lo que tiene que hacer es agregar un recurso de menú tal como lo haría para una Barra de acción o Barra de herramientas.

bottom_nav_menu.xml

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

    <item
        android:id="@+id/action_recents"
        android:enabled="true"
        android:icon="@drawable/ic_action_recents"
        android:title="Recents"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_action_favorites"
        android:title="Favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_nearby"
        android:enabled="true"
        android:icon="@drawable/ic_action_nearby"
        android:title="Nearby"
        app:showAsAction="ifRoom" />
</menu>

Deberá agregar los iconos apropiados a su proyecto. Esto no es muy difícil si va a Archivo> Nuevo> Activo de imagen y elige Barra de acción e íconos de pestaña como Tipo de ícono.

Agregar un elemento al oyente seleccionado

No pasa nada especial aquí. Simplemente agregamos un oyente a la barra de navegación inferior en el onCreatemétodo de nuestra actividad .

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_recents:
                        Toast.makeText(MainActivity.this, "Recents", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_favorites:
                        Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_nearby:
                        Toast.makeText(MainActivity.this, "Nearby", Toast.LENGTH_SHORT).show();
                        break;

                }
                return true;
            }
        });
    }
}

Necesitas más ayuda?

Aprendí a hacer esto viendo el siguiente video de YouTube. La voz de la computadora es un poco extraña, pero la demostración es muy clara.

Suragch
fuente
16

También puede usar Diseño de pestaña con vista de pestaña personalizada para lograr esto.

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingTop="8dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside"
        android:src="@drawable/ic_recents_selector" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAllCaps="false"
        android:textColor="@color/tab_color"
        android:textSize="12sp"/>
</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager

        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/AppTabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="?attr/colorPrimary" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;

    private int[] mTabsIcons = {
            R.drawable.ic_recents_selector,
            R.drawable.ic_favorite_selector,
            R.drawable.ic_place_selector};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setup the viewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(viewPager);

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }

        mTabLayout.getTabAt(0).getCustomView().setSelected(true);
    }


    private class MyPagerAdapter extends FragmentPagerAdapter {

        public final int PAGE_COUNT = 3;

        private final String[] mTabsTitle = {"Recents", "Favorites", "Nearby"};

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public View getTabView(int position) {
            // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView title = (TextView) view.findViewById(R.id.title);
            title.setText(mTabsTitle[position]);
            ImageView icon = (ImageView) view.findViewById(R.id.icon);
            icon.setImageResource(mTabsIcons[position]);
            return view;
        }

        @Override
        public Fragment getItem(int pos) {
            switch (pos) {

                case 0:
                    return PageFragment.newInstance(1);

                case 1:
                    return PageFragment.newInstance(2);
                case 2:
                    return PageFragment.newInstance(3);

            }
            return null;
        }

        @Override
        public int getCount() {
            return PAGE_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTabsTitle[position];
        }
    }

}

Descargar proyecto de muestra completo

waleedsarwar86
fuente
8
De acuerdo con las pautas de diseño de Google, uno no debe usar un movimiento deslizante para cambiar entre pestañas. google.com/design/spec/components/…
Carl B
1
Sería genial si acreditaras al autor que escribió los comportamientos :)
Nikola Despotoski
13

Google ha lanzado BottomNavigationView después de la versión 25.0.0 de la biblioteca de soporte de diseño. Pero vino con las siguientes limitaciones:

  1. No puedes eliminar títulos ni el ícono central.
  2. No puede cambiar el tamaño del texto de los títulos.
  3. ̶̶̶̶̶
  4. No tiene un comportamiento de navegación inferior: por lo tanto, no hay integración con FAB o SnackBar a través de CordinatorLayout.
  5. Cada menuItem es una extensión pura de FrameLayout, por lo que no tiene ningún efecto de revelación de círculo agradable

Entonces, el máximo que puede hacer con esta primera versión de BottomNavigationView es: (sin ningún tipo de reflexión o implementación de la biblioteca usted mismo).

ingrese la descripción de la imagen aquí

Entonces, si quieres alguno de estos. Puede usar una biblioteca de terceros como roughike / BottomBar o implementar la biblioteca usted mismo.

Sanf0rd
fuente
44
Solo para el registro, puede cambiar el color de fondo y puede cambiar el tamaño del texto del título (aunque he encontrado otros problemas con el método que estoy usando). usando android: background = "xxx" cambiará su color de fondo, pero si también especifica un app:itemBackground="xxx"todos los elementos comparten este color y no puede ver el fondo (a menos que agregue transparencia, pero aún así, todos los iconos comparten el mismo color) . Muy lamentable que el equipo de Android haya lanzado un componente tan malo ... siempre un 75% completo, perdiendo la milla extra que lo haría genial.
Martin Marconcini
podemos cambiar el color de fondo
Steve
hola, estoy usando la misma lib y funciona bien, pero aquí quiero mostrar solo iconos sin títulos en el centro de la barra inferior. ¿Es posible? y ya traté de poner elementos vacíos en el menú, pero aún los iconos se muestran solo en la parte superior. ¿Cómo puedo mostrar solo iconos sin títulos en el centro de la barra inferior?
user512
hola, comprueba mi respuesta para esto aquí stackoverflow.com/questions/40183239/…
Sanf0rd
@MartinMarconcini ¿Cómo cambió el tamaño del texto para la vista de navegación inferior?
Ponsuyambu Velladurai
10

Como Sanf0rd mencionó, Google lanzó BottomNavigationView como parte de la Biblioteca de soporte de diseño versión 25.0.0 . Las limitaciones que mencionó son principalmente ciertas, excepto que PUEDE cambiar el color de fondo de la vista e incluso el color del texto y el color del ícono. También tiene una animación cuando agrega más de 4 elementos (lamentablemente no se puede habilitar o deshabilitar manualmente).

Escribí un tutorial detallado al respecto con ejemplos y un repositorio adjunto, que puedes leer aquí: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- biblioteca de soporte de diseño /


Lo esencial

Debe agregarlos en el nivel de su aplicación build.gradle:

compile 'com.android.support:appcompat-v7:25.0.0'  
compile 'com.android.support:design:25.0.0'

Puede incluirlo en su diseño de esta manera:

<android.support.design.widget.BottomNavigationView  
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/darkGrey"
        app:itemIconTint="@color/bottom_navigation_item_background_colors"
        app:itemTextColor="@color/bottom_navigation_item_background_colors"
        app:menu="@menu/menu_bottom_navigation" />

Puede especificar los elementos a través de un recurso de menú como este:

<?xml version="1.0" encoding="utf-8"?>  
<menu  
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_one"
        android:icon="@android:drawable/ic_dialog_map"
        android:title="One"/>
    <item
        android:id="@+id/action_two"
        android:icon="@android:drawable/ic_dialog_info"
        android:title="Two"/>
    <item
        android:id="@+id/action_three"
        android:icon="@android:drawable/ic_dialog_email"
        android:title="Three"/>
    <item
        android:id="@+id/action_four"
        android:icon="@android:drawable/ic_popup_reminder"
        android:title="Four"/>
</menu>

Y puede configurar el tinte y el color del texto como una lista de colores, de modo que el elemento seleccionado actualmente esté resaltado:

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

    <item
        android:color="@color/colorAccent"
        android:state_checked="false"/>
    <item
        android:color="@android:color/white"
        android:state_checked="true"/>

</selector>

Finalmente, puede manejar la selección de los elementos con un OnNavigationItemSelectedListener:

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {  
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;
        switch (item.getItemId()) {
            case R.id.action_one:
                // Switch to page one
                break;
            case R.id.action_two:
                // Switch to page two
                break;
            case R.id.action_three:
                // Switch to page three
                break;
        }
        return true;
    }
});
Balázs Gerlei
fuente
1
¡Excelente! Sugerencia: elimine la aplicación: itemBackground = "@ color / darkGrey" para lograr un efecto de ondulación circular nativo.
Gark
8

Otra biblioteca alternativa que puede probar: - https://github.com/Ashok-Varma/BottomNavigation

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:layout_gravity="bottom"
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();
Ashok Varma
fuente
1
Otra biblioteca similar es AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong
3

Creo que esto también es útil.

Retazo

public class MainActivity : AppCompatActivity, BottomNavigationBar.Listeners.IOnTabSelectedListener
{
    private BottomBar _bottomBar;

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        SetContentView(Resource.Layout.MainActivity);

        _bottomBar = BottomBar.Attach(this, bundle);
        _bottomBar.SetItems(
            new BottomBarTab(Resource.Drawable.ic_recents, "Recents"),
            new BottomBarTab(Resource.Drawable.ic_favorites, "Favorites"),
            new BottomBarTab(Resource.Drawable.ic_nearby, "Nearby")
        );
        _bottomBar.SetOnItemSelectedListener(this);
        _bottomBar.HideShadow();
        _bottomBar.UseDarkTheme(true);
        _bottomBar.SetTypeFace("Roboto-Regular.ttf");

        var badge = _bottomBar.MakeBadgeForTabAt(1, Color.ParseColor("#f02d4c"), 1);
        badge.AutoShowAfterUnSelection = true;
    }

    public void OnItemSelected(int position)
    {

    }

    protected override void OnSaveInstanceState(Bundle outState)
    {
        base.OnSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        _bottomBar.OnSaveInstanceState(outState);
    }
}

Enlaces

https://github.com/pocheshire/BottomNavigationBar

Es https://github.com/roughike/BottomBar portado a C # para desarrolladores de Xamarin

Pocheshire
fuente
3

He creado una clase privada que utiliza una vista de cuadrícula y un recurso de menú:

private class BottomBar {

    private GridView mGridView;
    private Menu     mMenu;
    private BottomBarAdapter mBottomBarAdapter;
    private View.OnClickListener mOnClickListener;

    public BottomBar (@IdRes int gridviewId, @MenuRes int menuRes,View.OnClickListener onClickListener) {
        this.mGridView = (GridView) findViewById(gridviewId);
        this.mMenu = getMenu(menuRes);
        this.mOnClickListener = onClickListener;

        this.mBottomBarAdapter = new BottomBarAdapter();
        this.mGridView.setAdapter(mBottomBarAdapter);
    }

    private Menu getMenu(@MenuRes int menuId) {
        PopupMenu p = new PopupMenu(MainActivity.this,null);
        Menu menu = p.getMenu();
        getMenuInflater().inflate(menuId,menu);
        return menu;
    }

    public GridView getGridView(){
        return mGridView;
    }

    public void show() {
        mGridView.setVisibility(View.VISIBLE);
        mGridView.animate().translationY(0);
    }

    public void hide() {
        mGridView.animate().translationY(mGridView.getHeight());
    }



    private class BottomBarAdapter extends BaseAdapter {

        private LayoutInflater    mInflater;

        public BottomBarAdapter(){
            this.mInflater = LayoutInflater.from(MainActivity.this);
        }

        @Override
        public int getCount() {
            return mMenu.size();
        }

        @Override
        public Object getItem(int i) {
            return mMenu.getItem(i);
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {

            MenuItem item = (MenuItem) getItem(i);

            if (view==null){
                view = mInflater.inflate(R.layout.your_item_layout,null);
                view.setId(item.getItemId());
            }

            view.setOnClickListener(mOnClickListener);
            view.findViewById(R.id.bottomnav_icon).setBackground(item.getIcon());
            ((TextView) view.findViewById(R.id.bottomnav_label)).setText(item.getTitle());

            return view;
        }
    }

your_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/item1_id"
        android:icon="@drawable/ic_item1"
        android:title="@string/title_item1"/>
    <item android:id="@+id/item2_id"
        android:icon="@drawable/ic_item2"
        android:title="@string/title_item2"/>
    ...
</menu>

y un elemento de diseño personalizado your_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="16dp">
    <ImageButton android:id="@+id/bottomnav_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="4dp"/>
    <TextView android:id="@+id/bottomnav_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="4dp"
        style="@style/mystyle_label" />
</LinearLayout>

uso dentro de su mainactividad:

BottomBar bottomBar = new BottomBar(R.id.YourGridView,R.menu.your_menu, mOnClickListener);

y

private View.OnClickListener mOnClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.item1_id:
                //todo item1
                break;
            case R.id.item2_id:
                //todo item2
                break;
            ...
        }
    }
}

y en layout_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    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:fitsSystemWindows="true">
    ...
    <FrameLayout android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <GridView android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/your_background_color"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:numColumns="4"
        android:stretchMode="columnWidth"
        app:layout_anchor="@id/fragment_container"
        app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
G Dias
fuente
3

Hay un nuevo BottomNavigationView oficial en la versión 25 de la Biblioteca de soporte de diseño

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html add in gradle compile 'com.android.support:design:25.0.0'

XML

<android.support.design.widget.BottomNavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:design="http://schema.android.com/apk/res/android.support.design"
    android:id="@+id/navigation"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    design:menu="@menu/my_navigation_items" />
Mrk_Slk
fuente
1

Esta biblioteca, BottomNavigationViewEx , extiende Google BottomNavigationView. Puede personalizar fácilmente la biblioteca de Google para que tenga la barra de navegación inferior de la manera que desee. Puede desactivar el modo de cambio, cambiar la visibilidad de los iconos y textos y mucho más. Definitivamente pruébalo.

Anky An
fuente
0

He referido esta publicación de github y he configurado las páginas three layoutspara three fragmenten la barra de pestañas inferior.

FourButtonsActivity.java:

bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
            new BottomBarFragment(LibraryFragment.newInstance(R.layout.library_fragment_layout), R.drawable.ic_update_white_24dp, "Recents"),
            new BottomBarFragment(PhotoEffectFragment.newInstance(R.layout.photo_effect_fragment), R.drawable.ic_local_dining_white_24dp, "Food"),
            new BottomBarFragment(VideoFragment.newInstance(R.layout.video_layout), R.drawable.ic_favorite_white_24dp, "Favorites")

    );

Para establecer el recuento de insignias:

  BottomBarBadge unreadMessages = bottomBar.makeBadgeForTabAt(1, "#E91E63", 4);
  unreadMessages.show();
  unreadMessages.setCount(4);
  unreadMessages.setAnimationDuration(200);
  unreadMessages.setAutoShowAfterUnSelection(true);

LibraryFragment.java:

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LibraryFragment extends Fragment {
    private static final String STARTING_TEXT = "Four Buttons Bottom Navigation";

    public LibraryFragment() {
    }

    public static LibraryFragment newInstance(int resource) {
        Bundle args = new Bundle();
        args.putInt(STARTING_TEXT, resource);

        LibraryFragment sampleFragment = new LibraryFragment();
        sampleFragment.setArguments(args);

        return sampleFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        View view = LayoutInflater.from(getActivity()).inflate(
                getArguments().getInt(STARTING_TEXT), null);
        return view;


    }
Steve
fuente
0

Puede crear los diseños de acuerdo con las respuestas mencionadas anteriormente Si alguien quiere usar esto en kotlin: -

 private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.images -> {
          // do your work....
            return@OnNavigationItemSelectedListener true
        }
       R.id.videos ->
         {
          // do your work....
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

luego, en oncreate, puede configurar el oyente anterior a su punto de vista

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
Rohan Sharma
fuente
-1
<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

navigation.xml (menú interior)

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home"
        app:showAsAction="always|withText"
        android:enabled="true"/>

onCreate()Método interior ,

BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.navigation);
//Dont forgot this line     
BottomNavigationViewHelper.disableShiftMode(navigation);

Y crear clase como a continuación.

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}
Kishore Reddy
fuente