透けるアクションバー

今回のエンジニアブログを担当させて頂きます、佐藤です。

最近のAndroidアプリでは画面最上部でアクションバーが消えたり、スクロールすると徐々に現れたりするレイアウトが流行っているように思います。
GooglePlayでもアプリ画面で取り入れられており、画面が広く見えます。

今回は、この透明になったり現れたりするアクションバーを再現して見ようと思います！

values/style.xml

<resources>

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    </style>

    <style name="AppTheme" parent="AppBaseTheme">
    </style>

    <style name="AppTheme.ActionBar" />

    <style name="AppTheme.ActionBar.Overlay">
        <item name="android:actionBarStyle">@style/Widget.ActionBar.Transparent</item>
        <item name="android:windowActionBarOverlay">true</item>
    </style>

    <style name="Widget.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    </style>

    <style name="Widget.ActionBar.Transparent">
        <item name="android:background">@android:color/transparent</item>
    </style>
</resources>

透けるアクションバーは表示している画面の上に重なっているので、オーバーレイできるようにstyle.xmlを変更します。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    package="com.example.actionbaroverlaysample"  
    android:versionCode="1"  
    android:versionName="1.0" >

    <uses-sdk  
        android:minSdkVersion="14"  
        android:targetSdkVersion="21" />

    <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"  
            android:theme="@style/AppTheme.ActionBar.Overlay"  >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

オーバーレイできるようになったテーマを適用します。

MainActivity.java

public class MainActivity extends ActionBarActivity implements OnScrollListener {

    private ColorDrawable actionbarBackground; // アクションバー背景  
    private TextView title; // アクションバーに表示するタイトル  

    private ListView listView;

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

        // アクションバーの背景色を設定  
        actionbarBackground = new ColorDrawable(Color.parseColor("#00ee00"));
        title = new TextView(this);

        // 今回表示するもの(リスト)  
        listView = (ListView)findViewById(R.id.listview);
        listView.setOnScrollListener(this);

        List<String> list = new ArrayList<String>();
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);

        for(int i  = 0;i < 50;i++){
            list.add("リスト" + i);
        }

        listView.setAdapter(adapter);

        // 背景を透明に。  
        actionbarBackground.setAlpha(0);

        ActionBar actionbar = getActionBar();
        actionbar.setBackgroundDrawable(actionbarBackground);

        // 今回はGooglePlay風にするので、タイトルも透過します。  
        // タイトルも透過できるように、タイトルは非表示にしてTextViewを代わりに表示  
        actionbar.setDisplayShowTitleEnabled(false);
        actionbar.setDisplayShowCustomEnabled(true);

        title.setText(R.string.app_name);
        title.setTextColor(Color.parseColor("#ffffff"));
        title.setGravity(Gravity.CENTER_VERTICAL);
        // タイトルも透明にする  
        title.setAlpha(0);
        actionbar.setCustomView(title);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.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);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    // リストビュースクロール時  
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
                 int visibleItemCount, int totalItemCount) {

        // スクロールされた距離  
        int scrollY = firstVisibleItem * 3;

        final int actionbarHight = getActionBar().getHeight();

        final float ratio = (float) Math.min(Math.max(scrollY, 0), actionbarHight) / actionbarHight;
        // スクロールされた距離でアルファ値を計算。  
        final int alpha = (int) (ratio * 255);

        // タイトルとアクションバーの背景の透明度を変える。  
        title.setAlpha(alpha);
        actionbarBackground.setAlpha(alpha);

    }
}

アクションバーの背景はDrawableで指定します。
画像でもできますが、今回はColorDrawableを使って色指定をしました。

リストビューがスクロールされるとスクロールした分を計算し、透明度を変えます。

最上部で透明。下にスクロールする程徐々に背景が濃くなっていきます。

styleをカスタムしたり、少し面倒ではありましたがWebviewやスクロールビュー等
スクロールができるレイアウトを使用する際アクションバーを透過することでおしゃれなレイアウトにみえるので、是非実装してみてください！

採用情報