Creating custom drawables in Android

We all know that we can create so many custom drawables in android but when it comes for a dynamic one we still got the goosebumps. So last week I got stuck in one such issue where I want to show a drawable next to my menu item in navigation drawer.

The drawable was a simple one in which I have to create a circular square and in the center there will be the first character of the menu item text. I know its easier to create an image for them and add it but my menu item is the dynamic one coming from server so it can probably change with some changes on server. I know now you will think to get the image from server and put the image in the server but I don’t think that’s a optimal solution as for this simple work my designer have to create a new image each time something is changed on server.

That is why I took the hard road and creates a dynamic drawable for my need and I can tell you that it was pretty much simpler. So I had to make a view like

I started with creating a Drawable class with name “DrawerIcon.java“. It is responsible to create the icon we just have to pass all the required data to this class’s

class DrawerIcon extends Drawable {
    Context mContext;
    private String firstCharacter;
    private Paint mTextPaint;

    private DrawerIcon(Context ctx) throws ClassCastException{
        this.mContext = ctx;
        mTextPaint = new Paint(Paint.FAKE_BOLD_TEXT_FLAG);
        mTextPaint.setColor(Color.GRAY);
    }

    static LayerDrawable createIcon(Context context, LayerDrawable icon, char character){
            DrawerIcon drawerIcon;
            Drawable reuse = icon.findDrawableByLayerId(R.id.text);
            if (reuse != null && reuse instanceof DrawerIcon) {
                drawerIcon = (DrawerIcon) reuse;
            } else {
                drawerIcon = new DrawerIcon(context);
            }
            drawerIcon.setText(character);
            icon.mutate();
            icon.setDrawableByLayerId(R.id.text, drawerIcon);
            return icon;
    }

    private void setText(char character) {
        firstCharacter = Character.toString(character);
        invalidateSelf();
    }

    @Override
    public void setAlpha(int alpha) { }

    @Override
    public void draw(@NonNull Canvas canvas) {
        Rect bounds = getBounds();
        mTextPaint.setTextSize(bounds.height()-20);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(firstCharacter, (bounds.width()/2) , bounds.bottom-10, mTextPaint);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
    }

    @Override
    public int getOpacity() {
        return PixelFormat.UNKNOWN;
    }
}

class DrawerIcon extends Drawable {

Context mContext;

private String firstCharacter;

private Paint mTextPaint;

private DrawerIcon(Context ctx) throws ClassCastException{

this.mContext = ctx;

mTextPaint = new Paint(Paint.FAKE_BOLD_TEXT_FLAG);

mTextPaint.setColor(Color.GRAY);

}

static LayerDrawable createIcon(Context context, LayerDrawable icon, char character){

DrawerIcon drawerIcon;

Drawable reuse = icon.findDrawableByLayerId(R.id.text);

if (reuse != null && reuse instanceof DrawerIcon) {

drawerIcon = (DrawerIcon) reuse;

} else {

drawerIcon = new DrawerIcon(context);

}

drawerIcon.setText(character);

icon.mutate();

icon.setDrawableByLayerId(R.id.text, drawerIcon);

return icon;

}

private void setText(char character) {

firstCharacter = Character.toString(character);

invalidateSelf();

}

@Override

public void setAlpha(int alpha) { }

@Override

public void draw(@NonNull Canvas canvas) {

Rect bounds = getBounds();

mTextPaint.setTextSize(bounds.height()-20);

mTextPaint.setTextAlign(Paint.Align.CENTER);

canvas.drawText(firstCharacter, (bounds.width()/2) , bounds.bottom-10, mTextPaint);

}

@Override

public void setColorFilter(ColorFilter colorFilter) {

}

@Override

public int getOpacity() {

return PixelFormat.UNKNOWN;

}

Now from the your activity where you have created the navigation drawer you have to call the static method createIcon() and rest it will handle itself.

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
Menu languageMenu = navigationView.getMenu();
String languageEnglish = "English";
MenuItem item = languageMenu.add(languageEnglish);
LayerDrawable drawer = (LayerDrawable) ContextCompat.getDrawable(this, R.drawable.drawer_icon_drawable);
item.setIcon(DrawerIcon.createIcon(this, drawer, languageEnglish.charAt(0)));

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);

Menu languageMenu = navigationView.getMenu();

String languageEnglish = "English";

MenuItem item = languageMenu.add(languageEnglish);

LayerDrawable drawer = (LayerDrawable) ContextCompat.getDrawable(this, R.drawable.drawer_icon_drawable);

item.setIcon(DrawerIcon.createIcon(this, drawer, languageEnglish.charAt(0)));

The LayerDrawable drawer_icon_drawable in defined in drawable folder as

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

    <!-- Placeholder drawable so android:drawable isn't null -->
    <item
        android:id="@+id/text"
        android:drawable="@color/white"
        android:gravity="center"/>

</layer-list>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item

android:drawable="@drawable/rounded_rectangle_grey"/>

<item

android:id="@+id/text"

android:drawable="@color/white"

android:gravity="center"/>

</layer-list>

rounded_rextangle_grey.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:radius="5dp"/>
    <solid android:color="#FFFFFF">
    </solid>

    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray">
    </stroke>
    
</shape>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

</solid>

<stroke

android:width="1dp"

android:color="@android:color/darker_gray">

</stroke>

</shape>

And that is all you will have the required view ready for you.

Aastha 2 February 2017

. . .

1 comments

Shubham Agarwal May 1, 2017 at 3:39 pm

Thanks for the article. Works perfectly for my application

Creating custom drawables in Android

rounded_rextangle_grey.xml

Leave a Comment Cancel Reply

1 comments

Message Sent!