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.

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.

Images

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

Text

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

Shapes

${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.