Nova barra de navegação inferior do Android ou BottomNavigationView

133

Vi que a nova diretriz foi lançada e usada no google photosaplicativo mais recente. Não tem idéia de como usar a nova barra de navegação inferior. Veja através da nova biblioteca de suporte, não encontrou nenhuma pista.

insira a descrição da imagem aqui

Não foi possível encontrar nenhuma amostra oficial.

Como usar a nova barra inferior? Não quero fazer nenhuma personalização.

zjywill
fonte
visite isto: stackoverflow.com/questions/36019986/…
Fartab 8/17
Você pode dar uma olhada na minha resposta: stackoverflow.com/a/44967021/2412582
Prashant

Respostas:

175

Eu acho que você pode procurar por isso.

Aqui está um snippet rápido para começar:

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

Aqui está o link de referência.

https://github.com/roughike/BottomBar

EDIT Novos Lançamentos.

A Visualização de navegação inferior está nas diretrizes de design de material há algum tempo, mas não foi fácil implementá-lo em nossos aplicativos. Alguns aplicativos criaram suas próprias soluções, enquanto outros se basearam em bibliotecas de código aberto de terceiros para fazer o trabalho. Agora, a biblioteca de suporte ao design está vendo a adição dessa barra de navegação inferior, vamos dar uma olhada em como podemos usá-la!

Como usar ?

Para começar, precisamos atualizar nossa dependência!

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>

Crie o menu conforme sua exigência.

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

Manipulação de estados Ativado / Desativado. Faça o arquivo seletor.

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

Manipular eventos de clique.

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

Edit: Usando Androidx, você só precisa adicionar as dependências abaixo.

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

Layout

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

Se você quiser ler mais sobre seus métodos e como ele funciona, leia isso.

Certamente isso irá ajudá-lo.

Jay Rathod RJ
fonte
a barra inferior da amostra ainda personaliza por si mesmo, qualquer maneira de usar a origem android lib. Eu pensei que poderia na biblioteca de suporte. Ou ainda não é público?
zjywill
@zjywill Não é personalizado, mas é uma maneira de usar a funcionalidade oficial da barra de navegação inferior em nosso aplicativo. Apenas tente este código.
Jay Rathod RJ
1
Eu não sugiro que você use a barra inferior aproximada, pois a API não está totalmente implementada e eu encontrei problemas de renderização. Você não pode alterar o ícone no tempo de execução, e ele continuou ignorando as cores que defini para o fundo dos botões.
Alon Kogan #
Por favor, responda que como eu posso salvar história
Mitul Goti
1
A reflexão do java no mShiftingMode me ajudou! Eu não sei o que estão pensando, não exponha este campo
Banana droid
48

Você deve usar BottomNavigationView da v25 Biblioteca de suporte Android. Representa uma barra de navegação inferior padrão para aplicação.

Aqui está uma postagem no Medium que tem um guia passo a passo: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze

Maksim Turaev
fonte
2
stackoverflow.com/questions/40153888/... Olá máxima .. i implementado este, mas a sua não aparecendo ..
Sagar Chavada
@SagarChavada que você pode querer consultar neste post #
Maksim Turaev 20/16
5
@DroidDev, porque o BottomNavigationView foi lançado no dia em que esta resposta foi postada. Antes disso, apenas soluções de terceiros estavam disponíveis.
Você sabe se é possível fazer visualizações personalizadas com um adaptador?
Radu
1
@ Alan, parece que BottomNavigationView é uma parte da Biblioteca de Suporte que possui um nível mínimo de API 9 suportado, então acho que funcionará. Você ainda pode verificá-lo no emulador para ter 100% de certeza.
Maksim Turaev
17

Minha resposta original lidou com o BottomNavigationView, mas agora existe um BottomAppBar. Eu adicionei uma seção na parte superior para isso com um link de implementação.

Barra de aplicativos inferior

O BottomAppBarsuporta um botão de ação flutuante.

insira a descrição da imagem aqui

Imagem daqui . Consulte a documentação e este tutorial para obter ajuda na configuração do BottomAppBar.

Vista de navegação inferior

O exemplo completo a seguir mostra como tornar uma Visualização de navegação inferior semelhante à imagem na pergunta. Consulte também Navegação inferior na documentação.

insira a descrição da imagem aqui

Adicione a biblioteca de suporte ao design

Adicione esta linha ao arquivo build.grade do seu aplicativo ao lado dos outros itens da biblioteca de suporte.

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

Substitua o número da versão pelo atual.

Crie o layout de atividade

A única coisa especial que adicionamos ao layout é o BottomNavigationView. Para alterar a cor do ícone e do texto quando ele é clicado, você pode usar a em selectorvez de especificar a cor diretamente. Isso é omitido por simplicidade aqui.

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>

Observe que costumávamos layout_alignParentBottomcolocá-lo na parte inferior.

Definir os itens de menu

O xml acima para Vista de navegação inferior referido bottom_nav_menu. É isso que define cada item em nossa visão. Nós vamos fazer isso agora. Tudo o que você precisa fazer é adicionar um recurso de menu como faria em uma Barra de Ação ou Barra de Ferramentas.

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>

Você precisará adicionar os ícones apropriados ao seu projeto. Isso não é muito difícil se você for para Arquivo> Novo> Ativo da imagem e escolher Barra de ação e ícones da guia como o Tipo de ícone.

Adicionar um item de escuta selecionado

Não há nada de especial acontecendo aqui. Apenas adicionamos um ouvinte à barra de navegação inferior no onCreatemétodo da nossa atividade .

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

Precisa de mais ajuda?

Aprendi como fazer isso assistindo o seguinte vídeo do YouTube. A voz do computador é um pouco estranha, mas a demonstração é muito clara.

Suragch
fonte
16

Você também pode usar o Layout da guia com a visualização de guia personalizada para conseguir isso.

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

}

Faça o download do projeto de amostra completo

waleedsarwar86
fonte
8
De acordo com as diretrizes de design do Google, não se deve usar um movimento de deslizar para alternar entre as guias. google.com/design/spec/components/…
Carl B
1
Seria ótimo se você
atribuísse
13

O Google lançou o BottomNavigationView após a versão 25.0.0 da biblioteca de suporte ao design. Mas ele veio com as seguintes limitações:

  1. Você não pode remover títulos e ícone central.
  2. Você não pode alterar o tamanho do texto dos títulos.
  3. ̶C̶a̶n̶'̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
  4. Ele não possui um BottomNavigationBehavior: portanto, não há integração com o FAB ou o SnackBar através do CordinatorLayout.
  5. Cada menuItem é uma extensão pura do FrameLayout, para que não tenha nenhum efeito de revelação de círculo agradável

Portanto, o máximo que você pode fazer com esta primeira versão do BottomNavigationView é: (sem qualquer reflexão ou implementação da lib por conta própria).

insira a descrição da imagem aqui

Então, se você quiser alguma dessas. Você pode usar uma biblioteca de terceiros como roughike / BottomBar ou implementar a lib por si mesmo.

Sanf0rd
fonte
4
Apenas para o registro, você pode alterar a cor do plano de fundo e o tamanho do texto do título (embora eu tenha encontrado outros problemas com o método que estou usando). using android: background = "xxx" mudará sua cor de plano de fundo, mas se você também especificar um app:itemBackground="xxx"todos os itens compartilham essa cor e não poderá vê-lo (a menos que adicione transparência, mas todos os ícones compartilhem a mesma cor) . Muito ruim que a equipe do Android tenha lançado um componente tão ruim… sempre 75% completo, perdendo a milha extra que o tornaria ótimo.
Martin Marconcini
podemos mudar a cor de fundo
Steve
oi, eu estou usando a mesma lib e está funcionando bem, mas aqui eu quero exibir apenas ícones sem títulos no centro da barra inferior. é possível? e eu já tentei colocar vazio nos itens de menu, mas os ícones ainda estão aparecendo apenas no topo. como posso mostrar apenas ícones sem títulos no centro da barra inferior?
precisa saber é o seguinte
oi, por favor, veja a minha resposta para isso aqui stackoverflow.com/questions/40183239/...
Sanf0rd
@MartinMarconcini Como você alterou o tamanho do texto para a visualização de navegação inferior?
Ponsuyambu Velladurai
10

Como Sanf0rd mencionou, o Google lançou o BottomNavigationView como parte da Design Support Library versão 25.0.0 . As limitações que ele mencionou são principalmente verdadeiras, exceto que você PODE alterar a cor de fundo da exibição e até a cor do texto e a cor do ícone. Também possui uma animação quando você adiciona mais de 4 itens (infelizmente não pode ser ativado ou desativado manualmente).

Eu escrevi um tutorial detalhado sobre isso com exemplos e um repositório que o acompanha, que você pode ler aqui: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- biblioteca de suporte a design /


A essência disso

Você precisa adicioná-los ao nível do seu aplicativo build.gradle:

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

Você pode incluí-lo no seu layout assim:

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

Você pode especificar os itens através de um recurso de menu 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>

E você pode definir a tonalidade e a cor do texto como uma lista de cores, para que o item atualmente selecionado seja destacado:

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

Por fim, você pode manipular a seleção dos itens com um 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
fonte
1
Excelente! Sugestão - remova o aplicativo: itemBackground = "@ color / darkGrey" para obter o efeito cascata circular nativo.
Gark #
8

Outra biblioteca alternativa que você pode tentar: - 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
fonte
1
Uma outra biblioteca semelhante é AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong
3

Eu acho que isso também é útil.

Snippet

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

Ligações

https://github.com/pocheshire/BottomNavigationBar

É https://github.com/roughike/BottomBar portado para C # para desenvolvedores do Xamarin

Pocheshire
fonte
3

Eu fiz uma classe privada que usa um gridview e um recurso de 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 um item de layout 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 sua atividade principal:

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 no 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
fonte
3

Há um novo BottomNavigationView oficial na versão 25 da Biblioteca de Suporte de Design

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html adicionar no 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
fonte
1

Esta biblioteca, BottomNavigationViewEx , estende o BottomNavigationView do Google. Você pode personalizar facilmente a biblioteca do Google para ter a barra de navegação inferior da maneira que deseja. Você pode desativar o modo de mudança, alterar a visibilidade dos ícones e textos e muito mais. Definitivamente experimentá-lo.

Anky An
fonte
0

Mencionei esta postagem do github e configurei as páginas three layoutspara three fragmentna barra de guias 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 definir a contagem de crachás:

  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
fonte
0

Você pode criar os layouts de acordo com as respostas mencionadas acima. Se alguém quiser usá-lo no 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
}

em oncreate, você pode definir o ouvinte acima para sua visualização

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
Rohan Sharma
fonte
-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 (menu interno)

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

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

E criar classe como abaixo.

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
fonte