画像を重ねて表示する

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

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

e.g. 
![twitter_org.png](https://qiita-image-store.s3.amazonaws.com/0/20506/5ea358aa-a08e-b88c-8b42-5c20db1f780a.png)
twitter.png と
![new.png](https://qiita-image-store.s3.amazonaws.com/0/20506/25e36672-07c5-cc92-1f5e-d0a84e1fa137.png)
new.png(50x50にリサイズ) を合わせて
![twitter_merge.png](https://qiita-image-store.s3.amazonaws.com/0/20506/38d138fa-964e-bf60-cb88-fa289703f971.png)
とする場合．


> 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を定義します．

```xml: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>
```

しかしこのままだと

![twitter_fail.png](https://qiita-image-store.s3.amazonaws.com/0/20506/7685ec35-c26f-fa67-f19e-b077faecf520.png)

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

```xml: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>
```

これでとりあえず

![twitter_merge1.png](https://qiita-image-store.s3.amazonaws.com/0/20506/5c9e7a72-9159-c29a-e8a6-93a6ffa8afd8.png)

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

```xml: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>
```

![twitter_merge2.png](https://qiita-image-store.s3.amazonaws.com/0/20506/7bdce662-ec77-238c-61db-2dbae187c26b.png)

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

## コードで設定する

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

```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を作成した経緯が知りたい…