Nueva barra de navegación inferior Android o BottomNavigationView

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

enter image description here

No se puede encontrar ninguna muestra oficial.

¿Cómo usar la nueva barra inferior? No quiero hacer ningún personalizar.

    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 nuevas versiones.

    La vista de navegación inferior ha estado en las pautas de diseño de materiales durante algún tiempo, pero no ha sido fácil para nosotros implementarlo 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, ¡echemos un vistazo a 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"?>     

    Crear menú según su requisito.

     < ?xml version="1.0" encoding="utf-8"?>      

    Manejo de estados habilitados / deshabilitados. Haga el archivo de selector.

     < ?xml version="1.0" encoding="utf-8"?>     

    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; } }); 

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

    Seguramente te ayudará.

    Debería usar BottomNavigationView desde v25 Android Support Library. 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

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

    custom_tab.xml

     < ?xml version="1.0" encoding="utf-8"?>     

    activity_main.xml

     < ?xml version="1.0" encoding="utf-8"?>     

    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 Complete Sample Project

    Google lanzó 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 puede eliminar títulos e icono del centro.
    2. No puedes cambiar el tamaño del texto de los títulos.
    3. Y̶o̶u̶ ̶c̶a̶n̶’̶t̶ ̶c̶h̶a̶n̶g̶e̶ ̶t̶h̶e̶ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶.
    4. No tiene un comportamiento de navegación inferior: así que no hay integración con FAB o SnackBar a través de CordinatorLayout.
    5. Cada elemento de menú es una extensión pura de FrameLayout por lo que no tiene ningún efecto de revelación de círculo agradable

    Así que lo máximo que puedes hacer con esta primera versión de BottomNavigationView es: (sin ningún reflection ni implementación de la lib por tu cuenta).

    enter image description here

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

    Como Sanf0rd mencionó, Google lanzó BottomNavigationView como parte de Design Support Library versión 25.0.0 . Las limitaciones que mencionó son en su mayoría verdaderas, excepto que PUEDE cambiar el color de fondo de la vista e incluso el color del texto y el color del tinte del icono. 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 repository adjunto, que puede leer aquí: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- design-support-library /


    La esencia de esto

    build.gradle agregarlos en su nivel de 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:

      

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

     < ?xml version="1.0" encoding="utf-8"?>       

    Y puede establecer el color del tinte y del texto como una lista de colores, de modo que el elemento seleccionado actualmente se resalte:

     < ?xml version="1.0" encoding="utf-8"?>     

    Finalmente, puede manejar la selección de los elementos con 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; } }); 

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

      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(); 

    Cómo agregar una barra de navegación inferior

    La respuesta aceptada es buena, pero encontré que la organización es un poco difícil de seguir y que parte del contenido es innecesario. El siguiente ejemplo completo muestra cómo hacer que una barra de navegación inferior sea similar a la imagen en la pregunta.

    enter image description here

    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:26.1.0' 

    Reemplace el número de versión con lo que sea actual. Utilice la compile lugar de la implementation si todavía está utilizando Android Studio 2.x.

    Crear el diseño de la actividad

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

    activity_main.xml

     < ?xml version="1.0" encoding="utf-8"?>    

    Tenga en cuenta que usamos layout_alignParentBottom para ponerlo realmente en la parte inferior.

    Definir los elementos del menú

    El xml anterior para la Vista de navegación inferior se refiere a bottom_nav_menu . Esto es lo que define cada artículo en nuestra vista. Lo haremos ahora. Todo lo que tiene que hacer es agregar un recurso de menú como lo haría para una Barra de acciones o una Barra de herramientas.

    bottom_nav_menu.xml

     < ?xml version="1.0" encoding="utf-8"?>      

    Tendrá que agregar los íconos apropiados a su proyecto. Esto no es muy difícil si va a Archivo> Nuevo> Activo de imagen y elige Barra de acciones e Íconos de pestaña como Tipo de icono.

    Agregar un elemento seleccionado oyente

    No hay nada especial pasando aquí. Solo agregamos un oyente a la barra de navegación inferior en el método onCreate 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í cómo hacerlo viendo el siguiente video de YouTube. La voz de la computadora es un poco extraña, pero la demostración es muy clara.

    • Tutorial de Android Studio – Vista de navegación inferior

    hice una clase privada que usa 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"?>    ...  

    y un elemento de diseño personalizado your_item_layout.xml

     < ?xml version="1.0" encoding="utf-8"?>     

    uso dentro de su mainactivity:

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

    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 restre the BottomBar's state, otherwise we would // lose the current tab on orientation change. _bottomBar.OnSaveInstanceState(outState); } } 

    Campo de golf

    https://github.com/pocheshire/BottomNavigationBar

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

    Hay una nueva versión oficial de BottomNavigationView en la versión 25 de Design Support Library

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

    XML

      

    He referido esta publicación de github y he establecido los three layouts para three fragment páginas de three fragment en la barra de tabs 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 la insignia:

      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; } 
      

    navigation.xml (menú interno)

     < ?xml version="1.0" encoding="utf-8"?>   

    Dentro del método onCreate() ,

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

    Y crea clase como abajo.

     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); } } } 

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