LoginSignup
39
39

More than 5 years have passed since last update.

ActionBarの背景と文字を変更してみよう!

Last updated at Posted at 2014-10-21

よくあるこんな感じのActionbarの背景を変更してみます。
スクリーンショット 2014-10-21 13.43.48.png

必要なもの

・colors.xml
色情報を格納するためのXMLファイルです。
格納する場所はres/valuesに入れます。
valuesの中には他にdimens.xmlやstrings.xmlといったファイルが入ってると思います。

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="start_color">#e56200</color>
    <color name="end_color">#FFE1CC</color>
</resources>

・gradation.xml
Actionbarに使う背景色です。
drawableのフォルダの中に格納します。

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

色はこんな感じです。

スクリーンショット 2014-10-21 14.37.04.png

・styles.xml
アプリのデザイン(スタイル)を決めるXMLファイル。
一言で言えばCSSみたいなものです。

styles.xml
<resources>
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>
    </style>

    <style name="ActionBarStyle" parent="android:Widget.Holo.ActionBar.Solid">
        <item name="android:titleTextStyle">@style/ActionBarTitleStyle</item>
        <item name="android:subtitleTextStyle">@style/ActionBarSubitleStyle</item>
        <item name="android:background">@drawable/gradation</item>
        <item name="android:backgroundStacked">@android:color/white</item>
    </style>

    <style name="ActionBarTitleStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textStyle">bold|italic</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

    <style name="ActionBarSubitleStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Subtitle">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

スクリーンショット 2014-10-21 14.50.26.png

うまく適用できました!٩('ω' )و

39
39
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
39