Action Bar. Стилизация

| 26.07.2014

В этом уроке мы рассмотрим, как можно изменить стили для Action Bar-а. В частности, мы поменяем цвет фона и шрифта заголовка на те цвета, которые захотим.

Создадим простое приложение. Нам понадобятся файлы:

- strings.xml
- colors.xml
- themes.xml
- MainActivity.java
- activity_main.xml
- AndroidManifest.xml

Приступим. После создания проекта у вас должен автоматически сгенерироваться файл строковых ресурсов, в котором прописано имя приложения. Это имя будет отображаться в Action Bar-е (здесь ничего не меняем).

res/values/strings.xml

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">BarStyling</string>  
</resources>

Добавим файл ресурсов цветов, которые мы будем использовать в приложении.

res/values/colors.xml

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="actionbar_background">#85c73f</color>
    <color name="actionbar_text">#fff</color>
</resources>

Создадим ключевой для нас файл — themes.xml, в котором будет содержаться описание темы для нашего бара.

res/values/themes.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- the theme applied to the application or activity -->
    <style name="MyActionBarTheme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle" tools:targetApi="11">@style/MyActionBar</item>
 
        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
 
    </style>
 
    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@drawable/actionbar_background</item>
        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_background</item>
 
        <item name="android:titleTextStyle" tools:targetApi="11">@style/MyActionBarTitleText</item> 
        <!-- Support library compatibility -->      
        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    </style>
 
    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>       
    </style>
</resources>

Разберем коротко, что здесь и к чему. Первый блок стилей MyActionBarTheme — это собственно наша тема, в которой мы задаем группу стилей для бара. Атрибут actionBarStyle включен дважды, так как для старых версий Андроид мы используем Support Library для совместимости (< API 11):

1
2
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>

Для версий Андроида от 11 мы используем другой синтаксис:

1
<item name="android:actionBarStyle" tools:targetApi="11">@style/MyActionBar</item>

Так как в файле манифеста у нас будет стоять минимальное API от 8, то чтобы компилятор не ругался, мы добавили атрибут tools:targetApi в этой строчке.

Наша тема наследуется от Theme.AppCompat.Light.DarkActionBar.

Второй блок MyActionBar стилей включает описание для бара. Здесь мы описываем фон background в двух вариантах (для API < 11 и API > 11). Используем ссылку на ресурсы цветов @color/actionbar_background (задаем светло зеленый цвет).

Для описания цвета заголовка используем атрибут titleTextStyle (опять же в двух вариациях), внутри которого ссылаемся на другой блок стилей MyActionBarTitleText. В последнем блоке описываем цвет с использованием атрибута android:textColor.

ОК, тема готова, нам необходимо подключить ее в файле манифеста. Для этого в блоке application необходимо добавить атрибут android:theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ru.androiddocs.barstyling"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />
 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyActionBarTheme" >
        <activity
            android:name="ru.androiddocs.barstyling.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>

Добавим простой layout для нашего активити.

res/layout/activity_main.xml

1
2
3
4
5
6
7
8
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="ru.androiddocs.barstyling.MainActivity"
    tools:ignore="MergeRootFrame" />

И собственно, сам класс Активити — MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package ru.androiddocs.barstyling;
 
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
 
 
public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
    }
}

Обратите внимание, что мы наследуемся от ActionBarActivity.

Запускаем и получаем то, что хотели.

Action Bar

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

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

*