Edited at

【Android】ActionBarにImageViewを使う

More than 3 years have passed since last update.

特定の項目用の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. 解説

注意点は1つだけです。

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

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

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

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


3. 終わりに

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

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

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