How to Make Quick Sample Images in Android Studio

When you need something, anything fast and don’t want to have to go searching for it.

No One Has Time For This.

Okay, this post is not going to be TL because it’s just a support post for other posts which are TL and which I don’t want you to DR because they contain this extra nonsense.

It’s also not going to be particularly smashing but I do want to get this written down for anyone who doesn’t yet know how to do it. This technique can actually be pretty helpful when you need some sample images without licensing issues and you don’t want to waste time figuring out how to find them.

So what we’re going to do here is create an image like one of the following and we’re going to do it in just about 10 seconds:

Incredibly Cute Colored Vehicles.

And no, I don’t have an unhealthy obsession with brightly colored vehicles. Why do people keep asking me that? These are just some of the cooler icon images you can create on the spot in Android Studio. And they just happen to be cute.

Jump Into the Dialogs

To create one, make sure you have Android selected in your Project pane and right-click on the res folder. Then select New followed by Vector Asset.

Project = Android, Right-Click res, then select New > Vector Asset.

You should see this dialog.

Now click on Clip Art and you should see the following list of available vector asset icons.

Pick whichever one you want and you’ll be back at the Configure Vector Asset dialog.

You can rename or adjust your new drawable if you like. Note that you can change the color but I personally prefer to not worry about that and just set my image colors at runtime. It does however make sense to set your icon’s default color to something different from your app’s background colors so you don’t end up losing it on screen.

Click Next and Finish and you’re done. Android Studio will put your new vector image in the drawable folder.

A New Bug? No Worries

Now this didn’t used to happen to me but as of the writing of this post (May 2022) there’s a bug in this process due to the following line which appears in the top node of the vector file (just double-click the file to view its source).

android:tint="?attr/colorControlNormal"

The tint attribute sets the foreground color of the image and Android Studio can’t currently find the location of its value:

?attr/colorControlNormal

You can change the value to a color of your choice (such as #ff00ff) or you can edit what they have to:

@android:attr/colorControlNormal

as in:

android:tint="@android:attr/colorControlNormal"

Either should remove the error.

Setting Color at Runtime

Now if you’re using Jetpack Compose the way to adjust the color of your image at runtime is to set the Image composable’s colorFilter attribute as in the following (notice there are *many* different BlendModes to choose between but SrcIn should work fine for us here):

Image(
   painter = painterResource(
      id = R.drawable.ic_baseline_agriculture_24),
   contentDescription = "",
   contentScale = ContentScale.Crop,
   colorFilter = ColorFilter.tint(
      Color.Blue,
      BlendMode.SrcIn
   ),
   modifier = Modifier.size(200.dp)
)

There are more sophisticated ways to set custom colors but I’m calling this good for my purposes (They have about 5 non-ugly default colors to choose between).

It’s worth noting that this will set the color for the entire portion of the image that isn’t transparent. If you find yourself with an icon or other image that has no transparency this technique will just give you a solid-colored rectangle. All of the icons in Android Studio do have transparent backgrounds though.

Go Start Using Compose

Now I feel a little bad not discussing how to set the image foreground colors for xml-based UIs but I am also trying to move on to strictly using Jetpack Compose. However if you are creating xml-based UIs and you want to set the color of an image at runtime just Google something like this to see how to do it:

“android porterduff change color image” (without the quotes)

PorterDuff is what you’re looking for. You can set a drawable’s colorFilter to a PorterDuffColorFilter object which allows you to set the foreground color of the image.

You can also statically set the tint (foreground color) in the asset file itself as noted above. Okay, now I’ve already talked too much about xml-based UI stuff. Done. And done.

So here’s what you get!

One Totally Stunning Blue Tractor.

Thing of beauty, right? Now please go read one of my other far-less boring posts on how to do different, more cool stuff.

Cheers!

-Hellajoey