Android nuova barra di Navigazione Inferiore o BottomNavigationView

Visto il nuovo orientamento è venuto fuori e utilizzato in google photos ultimo app.
Non hanno idea di come utilizzare la nuova Barra di Navigazione Inferiore.
Vedere attraverso il nuovo supporto lib, non ha trovato di piombo.

Android nuova barra di Navigazione Inferiore o BottomNavigationView

Non è possibile trovare qualsiasi campione ufficiale.

Come utilizzare la nuova barra Inferiore? Non ho voglia di fare qualsiasi personalizzare.

InformationsquelleAutor zjywill | 2016-03-16

 

13 Replies
  1. 169

    Penso che si potrebbe guardare per questo.

    Ecco un breve frammento di iniziare:

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

    Ecco il link di riferimento.

    https://github.com/roughike/BottomBar

    MODIFICA di Nuove Versioni.

    Fondo di Navigazione a Vista in materiale di linee guida di progettazione per qualche tempo, ma non è stato facile per noi per implementare nella nostra app. Alcune applicazioni hanno costruito le loro soluzioni, mentre altri si sono affidati a terzi librerie open-source per ottenere il lavoro fatto. Ora il design libreria di supporto è visto l’aggiunta della barra di navigazione inferiore, facciamo un tuffo nel come si possa usare!

    Come si utilizza ?

    Per cominciare, abbiamo bisogno di aggiornare la nostra dipendenza!

    compile com.android.support:design:25.0.0

    Design 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>

    Creare menu secondo il vostro 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>

    Gestione Abilitato /Disabilitato. Rendere il selettore di file.

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

    Gestire gli eventi click.

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

    Se volete saperne di più su di esso i metodi e come funziona leggere questo.

    Sicuramente sarà di aiuto.

    • la barra inferiore nel campione ancora personalizzare con la vostra auto, è un modo per usare origine android lib. Ho pensato che potrebbe in il sostegno lib. O non si pubblica sicurezza?
    • Non personalizzati, ma è il modo di utilizzare ufficiali barra di navigazione inferiore funzionalità della nostra applicazione. Basta provare questo codice.
    • Io non suggerisco di usare roughhike barra inferiore dato che l’API non è completamente implementato e ho incontrato problemi di rendering. Non è possibile modificare l’Icona in fase di runtime, e hanno continuato ad ignorare i colori che ho impostato per i pulsanti di sfondo.
    • Come possiamo gestire la cronologia di navigazione all’interno di ogni scheda?….Si prega di suggerire
    • Si prega di rispondere che come posso salvare la storia
    • C’è un modo per disabilitare la funzione “zoom” effetto quando si seleziona uno dei barra inferiore di elementi? Voglio il testo e l’icona è la stessa dimensione per tutto il tempo, indipendentemente dal suo elemento è selezionato.
    • Scorrimento è veramente rotto, troppo. Plus non è possibile attivare i titoli quando si dispone di più di 3 elementi senza perdere la funzione di transizione di colore.
    • secondo google di linee guida di progettazione la barra in basso le icone e le textview dovrebbe essere di zoom quando vengono toccati. Riferimento : material.google.com/components/…
    • Se ci sono più di tre schede i titoli nella barra in basso non dovrebbe essere visualizzate in base al google guida alla progettazione. Essi dovrebbero essere visibili quando la rispettiva scheda è toccato. Riferimento : material.google.com/components/…
    • In realtà, la libreria permette ora e funziona molto meglio di prima. Sono solo linee guida e comunque IMO, che in parte è semplicemente stupido. Ci sono troppe persone (o Dau) chi non capire la barra in basso senza titoli.
    • Ciao @0101100101 Ora ho anche bisogno di visualizzazione di titoli permanentemente per una barra inferiore con quattro schede :). Come hai detto tu, comunque, è solo una linea guida e IMO la gente ha bisogno di che.. Hai detto ora la libreria permette effettivamente di destra. La prego mi dia quella riga di codice in modo che sarebbe molto utile per me.
    • L’ultima volta che ho provato con la versione 2.0, ho appena non aggiungi app:bb_behavior="shifting" e ha funzionato.
    • La mia prima scheda di continuo, viene selezionato tutte le idee perché?
    • Io trovo corretto. Per ottenere la vostra app presenti sul play store, un bar con 4 o 5 schede non deve mostrare i titoli per inerti :'(
    • per 4 o più icone, mostrando il suo alcune animazioni. come posso rimuovere ?
    • Controllare il mio aggiornati risposta si otterrà l’idea di rimuovere l’animazione.
    • grazie, ha funzionato.
    • c’è un modo per disegnare badge BottomNavigationItem utilizzando la libreria di supporto?
    • Java riflessione sul mShiftingMode mi ha aiutato! Non so cosa stanno pensando, non esporre questo campo
    • si prega di fornire referrer originale risposta “Come disattivare BottomNavigationView modalità shift?” per la sezione “Per rimuovere l’animazione o la modalità shift”, come precisa da parte della tua risposta è copiato da lì. stackoverflow.com/questions/40176244/…
    • Per qualche ragione, la mia OnNavigationItemSelectedListener non viene mai detta quando si seleziona una scheda. Qualcuno faccia lo stesso problema?
    • roughike è deprecato ora
    • Grazie per la segnalazione, ma potrebbe non leggere la risposta completa. roughike/BottomBar risposta fu la prima ufficiale di di Navigazione Inferiore Vista pubblicato. Poi se leggi la risposta completa troverete la MODIFICA di Nuove Versioni e si troveranno piena attuazione ufficiali di Navigazione Inferiore Vista release.
    • era solo un po ‘ di informazioni per gli utenti. Ma hai ragione.
    • Utilizzare state-checked invece di state-enabled. Per maggiori informazioni
    • Grazie per le info che ho aggiornato la stessa risposta !!!!

  2. 48

    Si dovrebbe usare BottomNavigationView da v25 Android Support Library.
    Esso rappresenta uno standard barra di navigazione inferiore per l’applicazione.

    Ecco un post sul Mezzo che ha un guida passo passo:
    https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze

    • stackoverflow.com/questions/40153888/… ciao maxim.. ho implementato questo, ma la sua non si presenta..
    • si consiglia di guardare in questo post
    • che è perché il BottomNavigationView è stato rilasciato il giorno che questa risposta è stato pubblicato. Prima che solo soluzioni di terze parti sono disponibili.
    • Sapete se si può fare visualizzazioni personalizzate con un adattatore per farlo?
    • Sarà BottomNavigationView di lavoro per le applicazioni che hanno un minSDKVersion di 14 anche se l’obiettivo è di 25?
    • sembra BottomNavigationView è una parte della Libreria di Supporto che ha min supportati dalle API di livello 9, quindi credo che non funzionerà. È comunque possibile verificare su emulatore per essere sicuri al 100%.

  3. 16

    È inoltre possibile utilizzare la Scheda Layout con scheda personalizzata vista per raggiungere questo obiettivo.

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

    Scaricare Completo Progetto Di Esempio

    • Secondo Google linee guida per la progettazione, non si dovrebbe usare un passa il dito per passare tra le schede. google.com/design/spec/components/…
    • Grazie per segnalarlo.Voglio aggiornare al più presto.
    • Sarebbe bello se si mette un credito per l’autore che ha scritto i comportamenti 🙂
  4. 13

    Google ha lanciato il BottomNavigationView dopo la versione 25.0.0 di supporto alla progettazione in libreria. Ma è venuto con le seguenti limitazioni:

    1. Non è possibile rimuovere i titoli e icona del centro.
    2. Puoi modificare i titoli dimensione del testo.
    3. Non è possibile modificare il colore di sfondo è sempre il colorPrimary.
    4. Non ha un BottomNavigationBehavior: così l’integrazione con i FAB o tavola calda attraverso CordinatorLayout.
    5. Ogni menuItem è una pura estensione di FrameLayout in modo da non avere qualche bel cerchio rivelare effetto

    In modo che il max che si può fare con questo pugno versione di BottomNavigationView è: (senza alcuna riflessione o di attuazione lib da te).

    Android nuova barra di Navigazione Inferiore o BottomNavigationView

    Quindi, Se volete uno di questi. È possibile utilizzare una terza parte di libreria come roughike/BottomBar o implementare le lib da soli.

    • Solo per la cronaca, è possibile cambiare il colore di sfondo e si può cambiare titolo la dimensione del testo (tho ho trovato altri problemi con il metodo che sto usando). l’utilizzo di android:background=”xxx” si cambia il colore di sfondo, ma se si specificare anche un app:itemBackground="xxx" tutti gli elementi condividere questo colore e non è possibile vedere lo sfondo (a meno che non si aggiunga trasparenza, ma ancora, tutte le icone di condivisione dello stesso colore). Molto zoppo che il team Android rilasciato un pessimo componente… sempre il 75% di completamento, manca il miglio supplementare che sarebbe grande.
    • possiamo cambiare il colore di sfondo
    • ciao, io sto usando stessa cartella lib e funziona benissimo, ma qui voglio visualizzare solo le icone senza titoli nel centro della barra inferiore. è possibile? e ho già provato a mettere vuoto nelle voci di menu, ma ancora le icone sono in mostra in alto solo. come posso visualizzare solo le icone senza titoli nel centro della barra Inferiore?
    • ciao, si prega di controllare la mia risposta per questo qui stackoverflow.com/questions/40183239/…
    • Come hai fatto a cambiare la dimensione del testo per il fondo di navigazione a vista?
  5. 11

    Mia risposta affrontato il BottomNavigationView, ma ora c’è un BottomAppBar. Ho aggiunto una sezione in alto con un’implementazione link.

    Inferiore App Bar

    Il BottomAppBar supporta un Galleggiante Pulsante di Azione.

    Android nuova barra di Navigazione Inferiore o BottomNavigationView

    Immagine da qui. Vedere la documentazione e questo tutorial per aiutare a impostare la BottomAppBar.

    Fondo Di Navigazione

    Completo riportato di esempio mostra come fare un Fondo di Navigazione simile all’immagine in questione. Vedere anche Navigazione Inferiore nella documentazione.

    Android nuova barra di Navigazione Inferiore o BottomNavigationView

    Aggiungere il supporto alla progettazione libreria

    Aggiungere questa riga al tuo app costruire.grado file accanto all’altro support library cose.

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

    Sostituire il numero di versione con tutto ciò che è attuale.

    Creare le Attività di layout

    L’unica cosa speciale che abbiamo aggiunto al layout è il BottomNavigationView. Per cambiare il colore dell’icona e il testo quando viene fatto clic, è possibile utilizzare un selector invece di specificare il colore direttamente. Questo è omesso per semplicità qui.

    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>

    Notare che abbiamo usato layout_alignParentBottom per mettere effettivamente in fondo.

    Definire le voci di menu

    Xml di cui sopra per il Fondo di Navigazione di cui all’ bottom_nav_menu. Questo è ciò che definisce ogni elemento a nostro modo di vedere. Facciamo ora. Tutto quello che dovete fare è aggiungere una risorsa di menu, proprio come si farebbe per una Action Bar o Barra degli strumenti.

    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>

    Sarà necessario aggiungere l’icona appropriata per il vostro progetto. Questo non è molto difficile se si va a File > Nuovo > Immagine Asset e scegliere Action Bar e Icone Scheda come il Tipo di Icona.

    Aggiungere un elemento selezionato ascoltatore

    Non c’è niente di speciale sta accadendo qui. Dobbiamo solo aggiungere un listener per la Barra di Navigazione Inferiore nella nostra Attività onCreate metodo.

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

    Bisogno di più aiuto?

    Ho imparato a fare questo guardando il seguente video di YouTube. La voce del computer è un po ‘ strano, ma la dimostrazione è molto chiaro.

  6. 10

    Come Sanf0rd detto, Google ha lanciato la BottomNavigationView come parte della struttura di Supporto di versione della Libreria 25.0.0. I limiti da lui citata, sono in gran parte vero, tranne che si PUÒ cambiare il colore di sfondo della vista e anche il colore del testo e l’icona di colore della tinta. Ha anche un’animazione quando si aggiungono più di 4 elementi (purtroppo non può essere attivata o disattivata manualmente).

    Ho scritto un tutorial dettagliato su di esso con esempi e un accompagnamento di repository, che si può leggere qui:
    https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the-design-support-library/


    L’essenza di esso

    È necessario aggiungere questi nel vostro livello di app build.gradle:

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

    È possibile includere nel vostro layout come questo:

    <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" />

    È possibile specificare gli elementi tramite una risorsa di menu come questo:

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

    E si può impostare la tonalità e il colore del testo come un elenco dei colori, in modo che l’elemento attualmente selezionato è evidenziato:

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

    Infine, è in grado di gestire la selezione degli elementi 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;
        }
    });
    • Eccellente! Suggerimento – rimuovere app:itemBackground=”@colore/darkGrey” per ottenere il nativo circolare effetto a catena.
  7. 8

    Alternativo libreria si può provare :- 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();
  8. 3

    ho fatto una classe privata che utilizza un gridview e una risorsa di menu:

    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>

    e un layout personalizzato voce 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>

    di utilizzo all’interno del vostro obbiettivo principale l’allevamento:

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

    e

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

    e in 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>
  9. 2

    Penso che questo è anche utile.

    Frammento di

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

    Link

    https://github.com/pocheshire/BottomNavigationBar

    È https://github.com/roughike/BottomBar porting in C#, per Xamarin sviluppatori

  10. 2

    C’è un nuovo ufficiale BottomNavigationView in versione 25 del Disegno di Libreria di Supporto

    https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html
    aggiungere 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" />
  11. 1

    Questa libreria, BottomNavigationViewEx, si estende di Google BottomNavigationView. Si può facilmente personalizzare Google biblioteca per avere la barra di navigazione inferiore il modo in cui si desidera essere. È possibile disattivare la modalità di spostamento, modifica la visibilità delle icone e testi e molto di più. Sicuramente provarlo.

  12. 0

    Ho accennato questa github post e ho impostato il three layouts per three fragment pagine in fondo tab bar.

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

    Per impostare il distintivo di conte :

      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;
    
    
        }
  13. -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(all’interno del menu)

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

    All’interno onCreate() metodo,

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

    E Creare una classe come di seguito.

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

Lascia un commento