【Android】ActionBarにImageViewを使う

特定の項目用のActivityを作った時に、項目のアイコンをActionBarに表示したかったのでActionBarをカスタマイズしてImageViewを表示するようにしました。

その時に実装したメモになります。

完成はこんな感じになります。

これはユーザーの詳細情報用にActivityを分けて、ユーザーのアイコンと名前をActionBarに表示しました。

では実装について書いていきます。

1. ソースコード

まずはActionBarに表示するViewのLayoutファイルです。

特に変わったことをしていません。

custom_action_bar.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    >

    <ImageView
        android:id="@+id/action_bar_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        />

    <TextView
        android:id="@+id/action_bar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/action_bar_icon"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="@dimen/large_margin"
        android:textSize="@dimen/large_text_size"
        />

</RelativeLayout>

使い方、実装方法はいかになります。

ActionBarActivityを継承している前提のお話になります。

全部を載せるのはめんどくさかったので、一部抜粋です。

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ~ 色々省略 ~ //
    
    // ActionBarの設定
    if (savedInstanceState == null) {
        // customActionBarの取得
        View customActionBarView = this.getActionBarView("Hoge", "表示する画像のURL");
        
        // ActionBarの取得
        ActionBar actionBar = this.getSupportActionBar();
        
        // 戻るボタンを表示するかどうか('<' <- こんなやつ)
        actionBar.setDisplayHomeAsUpEnabled(true);
        
        // タイトルを表示するか（もちろん表示しない）
        actionBar.setDisplayShowTitleEnabled(false);
        
        // iconを表示するか（もちろん表示しない）
        actionBar.setDisplayShowHomeEnabled(false);
        
        // ActionBarにcustomViewを設定する
        actionBar.setCustomView(customActionBarView);
        
        // CutomViewを表示するか
        actionBar.setDisplayShowCustomEnabled(true);
    }
}

private View getActionBarView(String title, String imageURL) {

    // 表示するlayoutファイルの取得
    LayoutInflater inflater = LayoutInflater.from(this);
    View view = inflater.inflate(R.layout.action_bar_icon_layout, null);
    
    // 各Widgetの設定
    TextView textView = (TextView)view.findViewById(R.id.action_bar_title);
    textView.setText(urlName);
    
    // ここは画像取得をしていることにしてください。
    // ImageView imageView = (ImageView)view.findViewById(R.id.action_bar_icon);
    // 
    // CustomViewにクリックイベントを登録する
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            self.finish();
        }
    });
    return view;
}

2. 解説

注意点は１つだけです。

LayoutファイルでActionBarに表示したいCustomViewのRootのLayoutのlayout_heightを48dpに指定しているところです。

理由は以下の記事がとってもわかりやすいと思います。

Y.A.M の 雑記帳: ActionBar のタブの高さは 48dp 以上にできない

なので、48dpを指定しています。

3. 終わりに

こういうカスタマイズを簡単に出来ると、デザインの幅も広がるなと思いました。

出来ることを知っているだけでだいぶ違うと思ったので、今回試してみました。

なにか間違っていたら教えて下さい。