MYENV
mail

Dodatkowy dolny pasek przycisków

Maciej Maciejowski
Interface & Navigation

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:

 Dodatkowy dolny pasek przycisków

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 🙂
, ,

Nie zapomnij przeczytać: