Loading...

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 Photoshop, Illustrator or InDesign, 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.

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

Products For Smart Professionals


smart_images_base_set

Smart Images Base Set

smart_psd

Smart PSD Batch

smart_images

Smart Images

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Cheat Sheet

A full sample of our support for text, shapes, images and effects.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top