MYENV
mail

Poznaj toolbar’a

Maciej Maciejowski
Interface & Navigation

W tym wpisie zostanie przedstawione kilka możliwości toolbar’a. Android Toolbar został wprowadzony do androida w wersji 21 znany jako Android Lollipop. Jest następcą ActionBar’a. Znajduje się w grupie View oraz jest bardziej elastyczny i wygodniejszy w użyciu niż jego poprzednik. Aby użyć go we wcześniejszych wersjach androida trzeba użyć biblioteki wsparcia. Toolbar jest zaimplementowany w klasie android.support.v7.widget.Toolbar.

1. Dodanie paska do aktywności.

W najprostszej formie Layout dla danej aktywności może wyglądać następująco:

<LinearLayout
    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:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

Wpis: android:fitsSystemWindows=”true” jest po to aby dobrze był „wyświetlony” pasek.  Zobacz więcej.

 

Kod aktywności może wyglądać nastepująco:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class App_Toolbar extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_app__toolbar);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

Lepszym sposobem na dodanie toolbara jest stworzenie osobnego pliku res/layout/toolbar.xml:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"/>

natomiast w pliku layout.activity_main dodajemy pasek przez include:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

Dzięki takiemu zabiegowi nie powtarzamy kodu dla toolbara, wystarczy, że w kolejnych aktywnościach dołączymy plik.

2. Dodanie ikon do paska.

Aby dodać ikony sterujące (te z lewej, np: ikona aplikacji) w klasie aktywności dodajemy następujące linijki kodu:

getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setDisplayUseLogoEnabled(true);

Aby dodać ikony pomocnicze (te z prawej) w klasie aktywności dodajemy po metodzie onCreate:

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

Następnie utworzyć plik z menu w res/menu/menu_main.xml o następującej zawartości:

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/IconEmail"
        android:icon="@android:drawable/ic_dialog_email"
        app:showAsAction="ifRoom"
        android:title="Email">
    </item>
    <item
        android:id="@+id/IconSearch"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="ifRoom|withText"
        android:title="Search">
    </item>
</menu>

3. Własny toolbar.

Czasami potrzeba stworzyć własny toolbar z własnym wyglądem. Poniżej zostanie przedstawiony toolbar który, będzie miał tytuł na środku ekranu wraz z inną czcionką i kolorem.

Przykładowy plik wyglądu activity_toolbar.xml może wyglądać następująco:

<LinearLayout
    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:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="?attr/colorPrimary">
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textStyle="italic"
            android:textColor="@android:color/white"
            android:textSize="15dp"/>
    </android.support.v7.widget.Toolbar>
</LinearLayout>

Natomiast w klasie aktywności dodajemy:

        // Usuwamy domyślny tytul
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        // Ustawiamy na wlasny tytul
        TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
        mTitle.setText("Własny Toolbar");

4. Przezroczystość toolbara.

Oto kolejna właściwość paska. W klasie activity musimy dodać dwie rzeczy:

Po pierwsze zaraz po wywołaniu setContentView dodajemy:

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window w = getWindow();
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

A później w sekcji dla toolbara dodajemy:

toolbar.getBackground().setAlpha(0);

Wartość „0” możemy zmieniać wedle uznania.

Innym sposobem na stworzenie przezroczystego toolbara jest stworzenie pliku fullscreen_toolbar_bg_gradient w folderze drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="90"
        android:startColor="@android:color/transparent"
        android:endColor="@android:color/transparent"
        android:type="linear" />
</shape>

A w pliku odpowiedzialnym za styl toolbara zmieniamy/dodajemy na:

android:background="@drawable/fullscreen_toolbar_bg_gradient"

Ewentualnie jeszcze prościej tylko zmieniamy/dodajemy do toolbara:

android:background="@android:color/transparent"

To tylko trzy sposoby, może być ich więcej. Który użyjesz to już Ty decydujesz. Również to zależy od projektu. Na przykład w jednej aktywności potrzebujesz użyć przezroczystości w drugiej zaś nie. Aby nie tworzyć kilku toolbarów można skorzystać z wersji pierwszej. Jeśli potrzebujesz wszędzie przezroczystość i mało kodu wybierz trzeci sposób.

5. Reakcja na przesuwanie.

Ciekawy również efekt możemy dostać dla przewijania ekranu. Więcej na ten temat znajdziesz w tym artykule.

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ć: