Icon Badge的な何か

iPhoneでよくある例のやつです。

Androidでは標準で無いので自前で何とかしないといけなさそうですが、どうもサンプルコードが見当たらないのです。悲しい…

嘆いていても仕方が無いので自分で書いてみました。

• ImageWithBadge.java

package com.komamitsu.android;

import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ImageWithBadge extends FrameLayout {
  private final TextView text;
  private final float scale;
  
  public ImageWithBadge(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.scale = getResources().getDisplayMetrics().density;
    
    int backgroundImageResId = attrs.getAttributeResourceValue(null, "background", -1);
    String textInBadge = attrs.getAttributeValue(null, "text_in_badge");
    
    ImageView image = new ImageView(context);
    image.setImageResource(backgroundImageResId);
    image.setPadding(0, dpToPx(5), dpToPx(5), 0);
    addView(image);
    
    LinearLayout textContainer = new LinearLayout(context);
    LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    lp.gravity = Gravity.RIGHT;
    textContainer.setLayoutParams(lp);
    addView(textContainer);
    
    text = new TextView(context);
    text.setText(textInBadge);
    text.setTextSize(9.0F);
    text.setBackgroundResource(R.drawable.circle);
    text.setGravity(Gravity.CENTER);
    textContainer.addView(text);
  }
  
  public void setTextInBadge(String textInBadge) {
    text.setText(textInBadge);
  }
  
  public void setBadgeVisibility(int visibility) {
    text.setVisibility(visibility);
  }
  
  private int dpToPx(int dp) {
    return (int) (dp * scale);
  }
}

事前に、バッヂの赤丸（外見は何でもいいですが）をIconFinderとかから入手しておいてください。で、res/drawableの下に置いておいてください。

使い方はこんな感じ。

• main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <com.komamitsu.android.ImageWithBadge
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    background="@drawable/icon"
    text_in_badge="999"
  />
  <com.komamitsu.android.ImageWithBadge
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:id="@+id/image_with_badge"
    background="@drawable/aramaki"
  />
</LinearLayout>

• 適当なActivity

package com.komamitsu.android;

import android.app.Activity;
import android.os.Bundle;

public class Main extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ImageWithBadge imageWithBadge = (ImageWithBadge) findViewById(R.id.image_with_badge);
        imageWithBadge.setTextInBadge("new");
        // imageWithBadge.setBadgeVisibility(View.INVISIBLE);
    }
}

とかすると

のように、それらしい感じになりました。