TextDrawable

This light-weight library provides images with letter/text like the Gmail app. It extends the Drawable class thus can be used with existing/custom/network ImageView classes. Also included is a fluent interface for creating drawables and a customizable ColorGenerator.

3,162

611

3,162

View on GitHub

Top Related Projects

RoundedImageView

6,439

A fast ImageView that supports rounded corners, ovals, and circles.

CircleImageView

14,554

A circular ImageView for Android

CircularImageView

1,951

Create circular ImageView in Android in the simplest way possible

android-shape-imageview

2,664

Custom shaped android imageview components

Quick Overview

TextDrawable is a lightweight Android library that allows developers to easily create drawable objects with text or letters. It's particularly useful for creating colorful, circular or rectangular avatars with initials, which can be used in contact lists, user profiles, or any UI element requiring a text-based image representation.

Pros

Simple and easy to use API
Customizable text size, font, and background colors
Supports both circular and rectangular shapes
Lightweight with minimal dependencies

Cons

Limited shape options (only circular and rectangular)
No built-in support for gradients or complex backgrounds
Not actively maintained (last update was several years ago)
Lacks advanced text styling options

Code Examples

Creating a circular drawable with initials:

TextDrawable drawable = TextDrawable.builder()
    .buildRound("JD", Color.RED);
imageView.setImageDrawable(drawable);

Creating a rectangular drawable with custom size and color:

TextDrawable drawable = TextDrawable.builder()
    .beginConfig()
        .width(60)
        .height(60)
    .endConfig()
    .buildRect("A", Color.BLUE);
imageView.setImageDrawable(drawable);

Creating a drawable with custom text size and font:

TextDrawable drawable = TextDrawable.builder()
    .beginConfig()
        .textColor(Color.WHITE)
        .fontSize(30)
        .bold()
    .endConfig()
    .buildRound("Hello", Color.GREEN);
imageView.setImageDrawable(drawable);

Getting Started

Add the JitPack repository to your project's build.gradle file:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency to your app's build.gradle file:

dependencies {
    implementation 'com.github.amulyakhare:TextDrawable:1.0.1'
}

Sync your project, and you're ready to use TextDrawable in your Android app!

Competitor Comparisons

RoundedImageView

6,439

A fast ImageView that supports rounded corners, ovals, and circles.

Pros of RoundedImageView

Specifically designed for rounding image corners and creating circular images
Supports border and shadow customization
Efficient rendering using hardware acceleration

Cons of RoundedImageView

Limited to image manipulation, doesn't support text-based drawables
May require more setup for simple use cases
Larger library size compared to TextDrawable

Code Comparison

RoundedImageView:

<com.makeramen.roundedimageview.RoundedImageView
    android:layout_width="120dp"
    android:layout_height="120dp"
    app:riv_corner_radius="30dip"
    app:riv_border_width="2dip"
    app:riv_border_color="#333333"
    app:riv_mutate_background="true"
    app:riv_tile_mode="repeat"
    app:riv_oval="true" />

TextDrawable:

TextDrawable drawable = TextDrawable.builder()
    .buildRound("A", Color.RED);
imageView.setImageDrawable(drawable);

RoundedImageView offers more customization options for image rounding and styling, while TextDrawable provides a simpler API for creating text-based drawables. RoundedImageView is better suited for complex image manipulations, whereas TextDrawable excels in generating simple, text-based icons or placeholders.

CircleImageView

14,554

A circular ImageView for Android

Pros of CircleImageView

Specialized for circular image display, providing better performance for this specific use case
Supports border and shadow customization out of the box
Handles image scaling and cropping automatically for circular shape

Cons of CircleImageView

Limited to displaying images only, cannot generate text-based avatars
Less flexible for non-circular shapes or custom designs
Requires an actual image resource, which may increase app size

Code Comparison

CircleImageView:

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

TextDrawable:

TextDrawable drawable = TextDrawable.builder()
    .buildRound("A", Color.RED);
imageView.setImageDrawable(drawable);

Summary

CircleImageView excels at displaying circular images with customizable borders and shadows, making it ideal for profile pictures or avatars when actual images are available. TextDrawable, on the other hand, offers more flexibility in generating text-based avatars and supports various shapes, which can be beneficial for placeholder images or when actual user images are not available. The choice between the two depends on the specific requirements of your project and the type of content you need to display.

CircularImageView

1,951

Create circular ImageView in Android in the simplest way possible

Pros of CircularImageView

Specifically designed for circular images, providing a more focused and optimized solution
Offers additional features like border and shadow customization
Supports both bitmap and drawable resources

Cons of CircularImageView

Limited to circular shapes, while TextDrawable offers more versatility in shape options
Doesn't provide text drawing functionality, which TextDrawable specializes in
May have a slightly higher performance overhead for simple use cases

Code Comparison

TextDrawable:

TextDrawable drawable = TextDrawable.builder()
    .buildRound("A", Color.RED);
imageView.setImageDrawable(drawable);

CircularImageView:

CircularImageView circularImageView = findViewById(R.id.circularImageView);
circularImageView.setImageResource(R.drawable.my_image);
circularImageView.setBorderColor(getResources().getColor(R.color.border_color));
circularImageView.setBorderWidth(4);

TextDrawable focuses on creating drawable objects with text, while CircularImageView is an ImageView subclass specifically for displaying circular images with customizable borders and shadows. TextDrawable offers more flexibility in terms of shapes and text rendering, whereas CircularImageView provides a streamlined solution for circular image display with additional styling options.

android-shape-imageview

2,664

Custom shaped android imageview components

Pros of android-shape-imageview

Supports a wider variety of shape options, including rounded rectangles and polygons
Allows for more customization of border properties, such as color and width
Provides bitmap mask functionality for complex shape creation

Cons of android-shape-imageview

Lacks built-in text drawing capabilities
May have slightly higher performance overhead due to more complex shape rendering
Does not offer color generation based on input text

Code Comparison

TextDrawable:

TextDrawable drawable = TextDrawable.builder()
    .buildRound("A", Color.RED);
imageView.setImageDrawable(drawable);

android-shape-imageview:

<com.github.siyamed.shapeimageview.RoundedImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:siBorderColor="#000000"
    app:siBorderWidth="2dp"
    android:src="@drawable/sample_image" />

TextDrawable focuses on generating text-based drawables with simple shapes, while android-shape-imageview offers more advanced shape options for existing images. TextDrawable is better suited for creating letter or initial-based avatars, whereas android-shape-imageview excels in applying complex shapes to images with customizable borders.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

###TextDrawable This light-weight library provides images with letter/text like the Gmail app. It extends the Drawable class thus can be used with existing/custom/network ImageView classes. Also included is a fluent interface for creating drawables and a customizable ColorGenerator.

###How to use

Import with Gradle:

repositories{
    maven {
        url 'http://dl.bintray.com/amulyakhare/maven'
    }
}

dependencies {
    compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
}

####1. Create simple tile:

<ImageView android:layout_width="60dp"
	       android:layout_height="60dp"
	       android:id="@+id/image_view"/>

Note: Specify width/height for the ImageView and the drawable will auto-scale to fit the size.

TextDrawable drawable = TextDrawable.builder()
                .buildRect("A", Color.RED);

ImageView image = (ImageView) findViewById(R.id.image_view);
image.setImageDrawable(drawable);

####2. Create rounded corner or circular tiles:

TextDrawable drawable1 = TextDrawable.builder()
                .buildRoundRect("A", Color.RED, 10); // radius in px

TextDrawable drawable2 = TextDrawable.builder()
                .buildRound("A", Color.RED);

####3. Add border:

TextDrawable drawable = TextDrawable.builder()
                .beginConfig()
                    .withBorder(4) /* thickness in px */
                .endConfig()
                .buildRoundRect("A", Color.RED, 10);

####4. Modify font style:

TextDrawable drawable = TextDrawable.builder()
                .beginConfig()
	                .textColor(Color.BLACK)
                    .useFont(Typeface.DEFAULT)
                    .fontSize(30) /* size in px */
                    .bold()
                    .toUpperCase()
                .endConfig()
                .buildRect("a", Color.RED)

####5. Built-in color generator:

ColorGenerator generator = ColorGenerator.MATERIAL; // or use DEFAULT
// generate random color
int color1 = generator.getRandomColor();
// generate color based on a key (same key returns the same color), useful for list/grid views
int color2 = generator.getColor("user@gmail.com")

// declare the builder object once.
TextDrawable.IBuilder builder = TextDrawable.builder()
				.beginConfig()
					.withBorder(4)
				.endConfig()
				.rect();

// reuse the builder specs to create multiple drawables
TextDrawable ic1 = builder.build("A", color1);
TextDrawable ic2 = builder.build("B", color2);

####6. Specify the width / height:

<ImageView android:layout_width="wrap_content"
	       android:layout_height="wrap_content"
	       android:id="@+id/image_view"/>

Note: The ImageView could use wrap_content width/height. You could set the width/height of the drawable using code.

TextDrawable drawable = TextDrawable.builder()
				.beginConfig()
					.width(60)  // width in px
					.height(60) // height in px
				.endConfig()
                .buildRect("A", Color.RED);

ImageView image = (ImageView) findViewById(R.id.image_view);
image.setImageDrawable(drawable);

####7. Other features:

Mix-match with other drawables. Use it in conjunction with LayerDrawable, InsetDrawable, AnimationDrawable, TransitionDrawable etc.
Compatible with other views (not just ImageView). Use it as background drawable, compound drawable for TextView, Button etc.
Use multiple letters or unicode characters to create interesting tiles.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot