Toolbar — альтернатива ActionBar


Toolbar — виджет, который позволяет нам сохранить функциональность крайне удобного во многих приложениях ActionBar-а, и, в то же самое время, дает возможность очень легко и просто стилизовать этот элемент. Toolbar, как вы увидите дальше, является частью Layout-а, что и облегчает доступ к его атрибутам. Рассмотрим как можно создать этот виджет.

1. Добавим необходимые зависимости для сборки приложения:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}

Кстати, использование библиотеки appcompat позволяет нам задать диапазон версий SDK, начиная от старых и заканчивая максимально новыми:

minSdkVersion 9
targetSdkVersion 21

2. Переопределим одну из тем с поддержкой Action Bar-a, добавив атрибуты, скрывающие сам бар — res/values/styles.xml

<resources>    
    <style name="appTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>

В файле манифеста необходимо указать для тега application эту тему:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ru.androiddocs.toolbarexample" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/appTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

3. Добавим виджет в верстку нашего экрана — res/layout/activity_main.xml

<RelativeLayout 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"
    tools:context=".MainActivity">

    <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="50dp"
        android:background="#ff15cc48" />

    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar" />

</RelativeLayout>

Как видите, мы добавили напрямую в Layout виджет Toolbar (из Support Library), добавив для его отображения несколько свойств. В частности, обратите внимание на атрибут layout_height со значением 50dp — это стандартная высота Action Bar-a. Также мы задали цвет фона — светло-зеленый.

4. Строковые ресурсы res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Toolbar Example</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
</resources>

5. Описание меню опций res/menu/menu_main.xml

<menu 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" 
    tools:context=".MainActivity">
    
    <item android:id="@+id/action_settings" 
        android:title="@string/action_settings"
        android:orderInCategory="100" 
        app:showAsAction="never" />
    
</menu>

6. Добавим класс Активити с методами для создания меню опций (на данный момент нам важно увидеть, что мы можем заменить Тулбаром Action Bar, сохранив его функциональность).

package ru.androiddocs.toolbarexample;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

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

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

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Чтобы наш Toolbar отобразился в методе onCreate() необходимо вызвать метод setSupportActionBar(), передав ему ссылку на виджет.

7. Запустим приложение и увидим стандартный Action Bar:

Toolbar

Как добавить иконку приложения в Toolbar

Добавить иконку в Toolbar можно с помощью метода setLogo(), передав в качестве параметра ссылку на ресурс:

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

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

        toolbar.setLogo(R.drawable.ic_launcher);
    }

Как добавить иконку приложения в Toolbar

Добавляем заголовок и подзаголовок

При добавлении заголовка и подзаголовка иконку лучше не отображать. Используем методы setTitle() и setSubtitle():

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

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

        toolbar.setTitle("title");
        toolbar.setSubtitle("Sub title");
    }

Также мы чуток изменим высоту нашего Тулбара, чтобы подзаголовок целиком поместился:

    <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="60dp"
        android:background="#ff15cc48" />

Добавляем заголовок и подзаголовок

Комментариев: 2 на “Toolbar — альтернатива ActionBar

  1. baxter

    Спасибо! Доступно и понятно. Пригодилось.

    Reply
  2. Antoxa

    Благодарочка, то что надо=)

    Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*