画像を重ねて表示する

画像を重ねて表示したいときってありますよね？

たとえば，アイコンの上にNewマーク付けたり，リボンを重ねたりなにかと画像に画像を重ねたいという欲求．

e.g.

twitter.png と

new.png(50x50にリサイズ) を合わせて

とする場合．

icons via
http://designdeck.co.uk/a/1212/Shiny-Twitter-Icon-with-PSD
http://findicons.com/icon/177290/label_new_red?id=177560

XMLで定義したLayerDrawableを用いる

リソース画像の場合は，XMLでLayerDrawableを定義します．

twitter_merge.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/twitter">
        <bitmap android:src="@drawable/twitter" />
    </item>
    <item android:id="@+id/new_icon">
        <bitmap android:src="@drawable/new_icon" />
    </item>
</layer-list>

しかしこのままだと

と表示されてうまくいきません．
中のBitmapにGravityを設定してあげる必要があります．

twitter_merge.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/twitter">
        <bitmap android:src="@drawable/twitter" />
    </item>
    <item android:id="@+id/new_icon">
        <bitmap
            android:gravity="top|left"
            android:src="@drawable/new_icon" >
        </bitmap>
    </item>

</layer-list>

これでとりあえず

と表示されるようになります．
また，item要素のleft, top, right, bottom各要素にマージンを設定することもできます．

twitter_merge.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/twitter">
        <bitmap android:src="@drawable/twitter" />
    </item>
    <item
        android:id="@+id/new_icon"
        android:left="50dp">
        <bitmap
            android:gravity="top|left"
            android:src="@drawable/new_icon" >
        </bitmap>
    </item>

</layer-list>

newアイコンが左から50dpの位置に表示されています．

コードで設定する

javaコードで設定する場合はこんな感じ

Context appContext = getApplicationContext();
ImageView image = new ImageView(appContext);
BitmapDrawable newIcon = (BitmapDrawable) getResources().getDrawable(R.drawable.new_icon);
newIcon.setGravity(Gravity.LEFT | Gravity.TOP);
Drawable[] drawables = {
        getResources().getDrawable(R.drawable.twitter),
        newIcon
};
LayerDrawable ld = new LayerDrawable(drawables);
image.setImageDrawable(ld);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC);
lp.addRule(RelativeLayout.ALIGN_TOP | RelativeLayout.ALIGN_LEFT);
mRootLayout.addView(image, lp);

ただし，XMLのように特定のアイテムにマージンを設定する方法が今のところわかっていません…．

ForegroundImageViewを用いる

ForegroundImageViewというJake神が公開しているクラスがあるようです．
こちらがその紹介記事です．
http://qiita.com/yyaammaa/items/30fa39f39a461d59418e

でもほとんどの場合LayerDrawableで事足りるような？
ForegroundImageViewを作成した経緯が知りたい…