Exploring Android 13: Programmable Shaders
Android 13 (Tiramisu)’s new APIs and features are ready to be tried out by developers. One of the new features offered in this phase is Programmable Shaders.
Shaders in Android define how a Paint object should apply its texture (Here’s a good summary of Shader in Android). Before Android 13, you can only use pre-built shaders: BitmapShader, LinearGradient, RadialGradient, and SweepGradient. Android 13 offers a new shader that you could program however you like using Android Graphics Shading Language (AGSL). AGSL is said to have similar syntax with GLSL.
In this article, we will create a simple application using this new shader. Because I’m no expert in graphics language, the shader I will be using will be simple solid colors. Here’s the end result of our application:
Where’s the Source Code?
Step by Step Explanation
Follow the steps provided below to make this application.
1. As of the writing of this article, Android 13 can only be used with the preview release of Android Studio. Therefore, you must go to this page, and download the Canary Build of Android Studio.
2. Once installed, you need to install the Android 13 SDK. You can do this by clicking Tools > SDK Manager. In the SDK Platforms tab, select Android 13. In the SDK Tools tab, select Android SDK Build-Tools 33. Click OK to install the SDK.
3. Once SDK is installed, open the Android Studio. Create new project with Empty Activity option.
4. First off, you need to change the target and compile SDK version of this app. Open app/build.gradle and you would see something like this:
Change the compileSdk and targetSdk to use the Android 13 SDK like shown in the code snippet below. Don’t forget to click Sync Now after.
5. First, we need to prepare the drawables. Download the three Pokemon image files here. Put those images in your project’s res/drawable folder.
6. We’re going to create a custom View to showcase the new shader. As you can see in the image above, this view will display a silhouette of a Pokemon. First, create a new file named attrs.xml in the res/values folder. Here, we will define the attribute/parameter of our custom View, which is the Pokemon name.
7. Next, we will create the custom View in a file named PokemonImageView.kt. You can copy paste the code snippet below. The most important thing to notice here is the usage of Android 13’s new programmable shader: RuntimeShader. This custom View will display different drawable/bitmap & shader for different Pokemon name.
8. Lastly, we need to update our activity_main.xml. Our layout will consist of 3 PokemonImageView that we create in the last step. Please notice the namespace of these custom View. Make sure that it’s changed according to your project’s namespace.
9. That’s it! Now run your application and see the programmable shader for yourself!
As always, thanks for reading!
—
Want to learn more about Android 13?
Check out all of our articles from “Exploring Android 13” series here:
