Create Widgets with Android

Widgets are used in almost every Android project – or a subclass of – this makes them a vital part of any Android UI design. Export Kit makes it easy to create your Android widget layout in XD, PSD, AI and INDD; then render the native Android widget in your project.

Before adding Android Widgets you should read about Class Tags and download our Layer Tags Support free PSD template.

Step 1: Draw the Widget Container

Use the shape tool and draw a Rectangle where you want the Android Widget to render.

Step 2: Add the Class Tag

Add the Class Tags for your desired Android Widget to the shape in step 1. You must add your Widget properties to your Class Tag, eg. if you are using a RatingBar and you want 4 stars, etc. – then you must set this: android:numStars="4" in the class args.

Eg: ${class|RatingBar:android:numStars="4"}
Eg: ${class|EditText:android:inputType="phone"}

Your widget will render with the size, position and effects applied to the layer. We recommend using Shapes to create widgets – when using other Layers, the properties of the layer are copied. This means you *must know what you are doing*, eg. use a Text Widget with a Text layer.

Advanced Usage

You can map specific layer types to match Android Widgets of the same nature, eg. using ${class|EditText} with a Text Layer. This will both create the custom widget, and apply your text properties and styles to the widget. The same concept applies to other layer types.


An image is an image so if you use ${class|Button} it will correct to ImageButton in the output.


${class|ImageButton} corrects to Button and ${class|EditText:[args]} supports an inputType for [args].


${class|Button:[args]} will use the [args] as the button text contents and ${class|ImageButton} will use the shape as the background for the button.

All Widgets Work

All other Android Widget will convert as is with the position and size of your Layer.

Step 3: Optimize your Widget

When you test your Android UI output, the most common error is “Container Clipping“. This is where the area of the widget is smaller than the actual widget and its elements (see the image above). This can happen often. The reason for this is that Android Widgets do not resize naturally – rather they require a custom style for the elemetns.

QUICK FIX: You can readjust the size in your PSD, AI or INDD file and re-export - or you can change the size in your output.
CORRECT FIX: You need to add a custom style for your Widget elements.  All widgets have different render elements, so you should check the Android developer guide first - learn more.
We will automate your Widget skins in a future release of Lightning Storm.
LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

🚀 Start saving time and money!