Dodatkowy dolny pasek przycisków

Podczas tworzenie bardziej zaawansowanych aplikacji potrzebujemy dodatkowych przycisków akcji. Takie przyciski oczywiście możemy dodać do toolbar’a, ale tam wszystkiego nie zmieścimy. Na szczęście twórcy androida przewidzieli takie sytuacje i stworzyli dodatkowy widok o którym dziś będziemy rozmawiać. Taki dodatkowy dolny pasek przycisków możemy stworzyć za pomocą bottomNavigationView. Poniżej znajduje się przykład o jaki dodatkowy pasek chodzi:

1. Stworzenie layoutu:

Na początku stworzymy plik z wyglądem naszej aktywności która będzie posiadać taki pasek. Plik activity_main.xml ma następującą postać:

<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:fitsSystemWindows="true"
    android:background="#303030">
    <!-- Content Container -->
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:id="@+id/toolbar"
        android:background="@color/colorPrimary"/>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/bottonNav"
        app:elevation="16dp"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/my_navigation_items" />
</RelativeLayout>

Dodatkowo w tym wyglądzie zastosowalność „efekt fali / rozchodzących się fali”  (Ripple Effect) – aby przy naciskaniu był ładny efekt, Uwaga! Ten efekt działa tylko od Androida 5.0 (API 21). 

2. Selektory

Selektory posłużą nam do tego aby wyświetlały się odpowiednie kolory przycisków w zależności od wciśniętego przycisku.
Plik nav_item_color_state.xml wygląda następująco:

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

Kolor fali możemy ustawić w pliku ze stylami dodając:

<item name="colorControlHighlight">@color/colorPrimaryRipple</item>

3. Menu przycisków

Aby dodać ikonki do paska towrzymy plik my_navigation_items.xml w folderze menu o następującej treści:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_search"
        android:title="@string/menu_search"
        android:icon="@android:drawable/ic_menu_search" />
    <item android:id="@+id/action_settings"
        android:title="@string/menu_preferences"
        android:icon="@android:drawable/ic_menu_preferences" />
    <item android:id="@+id/action_help"
        android:title="@string/menu_help"
        android:icon="@android:drawable/ic_menu_help" />
</menu>

4. Tekst

W pliku ze stringami mamy coś takiego:

<resources>
    <string name="app_name">Bottom Navigation View</string>
    <string name="title_activity_main2">Main2Activity</string>
    <string name="menu_search">Search</string>
    <string name="menu_preferences">Preferences</string>
    <string name="menu_help">Help</string>
</resources>

5. Kod aktywności:

package net.myenv.secendtoolbar;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        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_search:
                            case R.id.action_settings:
                            case R.id.action_help:
                        }
                        return true;
                    }
                });
    }
}

Oczywiście tutaj już sami musimy zaimplementować co dany przycisk robi w metodzie switch 🙂
Taki szybki wpis i ładny efekt 🙂

Co dalej?

• Polub stronę MYENV na Facebooku oraz śledź mnie na Twitterze
• Zachęcam do komentowania i pisania propozycji tematów, o których chcesz przeczytać
• Poleć ten wpis za pomocą poniższych przycisków. Będę Ci za to bardzo wdzięczny 🙂
• Życzę Ci miłego dnia i miłego kodowania 🙂