Toolbar

Структура урока:

• Знакомство с элементом Toolbar
• Атрибуты элемента Toolbar
• Скачивание png иконки
• Создание menu
• Добавление стрелки «назад»

Знакомство с элементом Toolbar

Элемент Toolbar предназначен для быстрого и удобного доступа пользователя к часто используемым функциям. Создать его можно используя как упрощённый вариант, в котором о многом уже позаботились разработчики системы Android, так и полностью управляя всеми внутренними компонентами. В данном уроке мы рассмотрим упрощённый вариант.

В итоге у нас получится вот такой toolbar с единственной кнопкой поиска:

В ранних версиях Android использовался элемент ActionBar, теперь же его функцию выполняет Toolbar. Важно, использовать Toolbar из пакета android.support.v7.widget, чтобы у нас была совместимость со старыми устройствами (версия Android ниже 5.0). Поэтому сперва нам необходимо позаботиться о том, чтобы наши экраны не содержали элемент ActionBar по умолчанию.

Мы создадим пустой проект с одной Activity и будем всё делать в нём. Сперва унаследуем главный стиль приложения (находится в файле styles.xml) от необходимого нам Theme.AppCompat.Light.NoActionBar:

styles.xml

<resources>


    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


</resources>

Теперь необходимо добавить элемент Toolbar в xml-файл главной Activity. Также добавим стиль для тулбара, чтобы переиспользовать его на других экранах.

toolbar_activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/Toolbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"/>


</android.support.constraint.ConstraintLayout>

styles.xml

<resources>


    <style name="Toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <!-- <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item> -->
        <item name="android:background">?attr/colorPrimary</item>
    </style>


</resources>

Атрибуты элемента Toolbar

Остановимся на некоторых атрибутах:

• "android:layout_height">?attr/actionBarSize. Здесь мы указываем высоту тулбара. Таким синтаксисом мы можем получить доступ к значению высоты, которая применяется в атрибутах темы. По умолчанию, если мы не переопределяем значение, оно берётся из системного пакета темы support. Это значение лучше использовать, т.к. оно соответствует гайдам дизайна от Google. Подробнее можете изучить на сайте официальной документации.
• theme>@style/ThemeOverlay.AppCompat.Dark.ActionBar. Мы пока закомментировали этот атрибут. Объясним его чуть позже более наглядно.

Таким образом, мы добавили в нашу Activity тулбар. Но этого мало. Нам нужно сообщить ей, что мы используем его в качестве замены элемента ActionBar. Это необходимо, чтобы на устройствах со старой версией Android (ниже Android 5.0 (API 21)) наш интерфейс выглядел также, как и на устройствах с новой версией. Для этого нам просто нужно вызвать метод Activity setSupportActionBar(Toolbar toolbar):

ToolbarActivity.java

public class ToolbarActivity extends AppCompatActivity {


    private Toolbar toolbar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.toolbar_activity_layout);


        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

Важно, чтобы импорт вашего тулбара выглядел так: import android.support.v7.widget.Toolbar;. Именно тулбар из этого пакета нам и нужен.

Давайте запустим приложение и посмотрим, что получилось:

Видим, что текст в нашем тулбаре отображается тёмным цветом. Это потому что наше приложение по умолчанию использует Light тему Theme.AppCompat.Light.NoActionBar. Эта тема означает, что фоновый цвет будет светлым, а текст — тёмным.

Давайте раскомментируем атрибут тулбара, который указывает, что все его вложенные элементы должны использовать тему Dark. В тёмной теме весь текст будет отображать светлым цветом, а фоновый цвет – тёмным. Помним, что фоновый цвет тулбара мы тоже переопределяем, используя атрибут android:background.

styles.xml

<resources>


    <!-- Остальные элементы выше не изменились -->


    <style name="Toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
        <item name="android:background">@color/colorPrimary</item>
    </style>


    <!-- Остальные элементы ниже не изменились -->


</resources>

Запустим приложение, посмотрим, что получилось:

Отлично, двигаемся дальше.

Осталось наполнить наш toolbar содержимым. Т.к. нашему тулбару необходима всего одна кнопка поиска, то мы можем обойтись стандартным способом добавления элементов в тулбар: при помощи Menu (помимо примера ниже также можете ознакомиться с данным уроком).

Скачивание png иконки

Давайте вначале скачаем иконку поиска, которая будет отображаться в menu. Как правило, для создания приложения достаточно пользоваться ресурсами, которые уже для разработчиков подготовил Google. Например, такая ситуация с иконками, которые рекомендует использовать Google. Их можно найти на этом сайте. В данном случае нам необходима иконка поиска, поэтому попробуем её найти, введя в поле поиска search:

Нашли подходящую иконку, выбрали цвет, указали, что нам нужны иконки для Android, а теперь можем скачать .png-файлы. В первую очередь извлекаем архив для удобной работы с файлами. После извлечения архива видим папку res, в которой содержатся иконки промасштабированные для различных разрешений экранов, поэтому в зависимости от разрешения экрана устройство самостоятельно будет использовать наиболее подходящий ресурс для отображения.

Наша задача — обеспечить приложение иконками для разных разрешений. Подробнее об этом можно почитать в официальной документации.

Таким образом выделяем все папки внутри res (drawable-hdpi, drawable-xhdpi и т.д.), копируем их, потом заходим в проект и вставляем их в папку res нашего приложения. Там слишком много иконок разного разрешения. Оставим только иконки одного размера: baseline_search_white_24.png.

Если поменяем тип отображения файлов с Android на Project, то увидим, что физически создалось несколько папок, в каждой из которых лежит png для разного разрешения экрана:

Создание menu

Как мы с вами помним, для создания папки ресурсов menu необходимо нажать правой кнопкой по папке res и выбрать New -> Android resource directory. В появившемся диалоговом окне выбираем Resource type — menu. Все остальные поля заполнятся автоматически такими же значениями:

Нажимаем OK и видим, что папка создалась.

Затем создадим новый файл меню. Для этого правой кнопкой кликаем по папке menu и выбираем варианты New -> Menu resource file. Вводим имя toolbar_menu.xml:

toolbar_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_search"
        app:showAsAction="always"
        android:icon="@drawable/baseline_search_white_24"
        android:title="@string/search_hint"/>
</menu>

Из данного xml-файла можно увидеть, что наша иконка поиска будет всегда видна пользователю (app:showAsAction="always"). Например, если выбрать never, то иконка всегда будет спрятана в меню, которое вызывается нажатием на иконку трёх точек в правой части тулбара. Также видим, что мы ссылаемся на иконку, которую только что добавили в проект (android:icon="@drawable/baseline_search_white_24").

Теперь мы можем наполнить содержимым наш Toolbar, переопределив метод onCreateOptionsMenu в Activity. Это стало возможным благодаря тому, что мы вызвали метод setSupportActionBar(toolbar).

Чтобы переопределить какой-то из методов мы можем нажать комбинацию клавиш Ctrl + O. После этого появится окно со всеми методами. Мы можем ввести название метода onCreateOptionsMenu. И выбрать его:

Давайте добавим в метод использование toolbar_menu:

ToolbarActivity.java

public class ToolbarActivity extends AppCompatActivity {


    // Остальной код выше не изменился


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


    // Остальной код ниже не изменился
}

Отлично, теперь давайте по клику на иконку выведем на экран сообщение:

ToolbarActivity.java

public class ToolbarActivity extends AppCompatActivity {


    // Остальной код выше не изменился


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if(item.getItemId() == R.id.action_search) {
            Toast.makeText(this, R.string.search_hint, Toast.LENGTH_SHORT).show();
        }
        return true;
   


    // Остальной код ниже не изменился

Единственная вещь, о которой ещё стоит упомянуть — это установка собственного заголовка нашего экрана, отображающегося в тулбаре. Для этого достаточно вызвать в необходимом месте метод тулбара setTitle(CharSequence title). Помните, что мы вызывали строку setSupportActionBar(toolbar). Также в Activity есть метод getSupportActionBar(), который используется для совместимости со старыми устройствами. Его мы и будем использовать. Давайте прямо в методе onCreate() изменим заголовок нашего экрана:

ToolbarActivity.java

public class ToolbarActivity extends AppCompatActivity {


    // Остальной код выше не изменился


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Остальной код не изменился


        getSupportActionBar().setTitle(R.string.devcolibri);
   


    // Остальной код ниже не изменился

AndroidStudio может подчёркивать вызов getSupportActionBar().setTitle, сообщая, что объект может быть null. Но мы помним, что мы вызвали метод setSupportActionBar(toolbar), поэтому можем пока игнорировать это замечание.

Добавление стрелки «назад»

Для того, чтобы добавить стрелочку «назад» в тулбар необходимо лишь несколько строк кода. После того, как мы уже вызвали метод setSupportActionBar(), можно дописать код, который покажет стрелочку:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

А для того, чтобы обработать её нажатие, необходимо повесить обработчик на сам тулбар:

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // необходимое действие
    }
});

Теперь можно запустить приложение и посмотреть на результат:

В результате данного урока мы узнали:

• что такое элемент Toolbar;
• что такое Menu и как его использовать с элементом Toolbar;
• каким образом наполнить Toolbar пользовательскими элементами.

Ссылки:

• Ссылка для поиска material иконок

Полезные материалы:

• Русскоязычные:
  • Material Design. Динамический Toolbar на живом примере
  • Официальная документация. Поддержка экранов с различной плотностью пикселей
  • Создание меню
  • Официальная документация. Меню
• Англоязычные:
  • Официальная документация. Toolbar
  • Официальная документация. Работа с toolbar