How To Use Sketch To Design Android Apps

Sketch is a vector based design tool helps in designing user interfaces. Because of its simplicity, anyone can learn it very easily unlike Photoshop or Illustrator. It offers option to design interfaces for multiple platforms such as Android, iOS and Web. The good thing about Sketch is, all the assets can be generated in required dimensions as per the platform thus making designers and developers life easier.

Today I am going to share my insights about Sketch and how it can be used to design your android app UI. Converting the design into working android app will be covered in a separate article.

VIDEO TUTORIAL

android-app-design-using-sketch-zeplin-android-studio

We are going to design the below layout that has AppBar, Tabs, ViewPager and a List.

android-designing-app-using-sketch-zeplin-android-studio

Design is inspired from Edacious UI Kit

1. Installing Sketch App (Mac OS)

a. Download the sketch app from Sketch website. Initially you can go ahead with Trail Version. You will have to buy the license if you want the full version.

b. Once installed, you can open the app and get started.

Note: Currently Sketch is available for Mac OS only. If you are Windows or Linux user, you need to look for alternatives like Adobe Photoshop, Illustrator or Adobe XD.

2. Installing Zeplin

Zeplin is a collaboration tool between Designers and Developers. Designer can upload the designs directly on to Zeplin and it generate style-guides and assets, automatically. Usually, developer requests the designer for resources in multiple resolutions for multiple drawable dimensions. This process can be made automatic as Zeplin can generate the drawables for you.

a. Download and Install Zeplin. Alternatively you can use Zeplin's web interface by signing into their website.

b. Once installed, login with your Zeplin credentials.

3. Sketch App – Basic Tool Guide

Before starting the design part, we need to know the basic tools sketch provides. Below is the essential knowledge needed to get started with Sketch.

3.1 Creating New Artboard / Screen

You can consider an artboard as single mobile screen. To get started, you have to create an artboard first. You can create as many as artboards depending on number of screens your app will have.

a. Once the new project is created, you can get started by pressing A key. Upon pressing, you can see the Artboard dropdown on the right sidebar.

b. Select Material Design from the dropdown and select the Mobile in Portrait mode. You can also select Tablet if you are designing for tablet devices. Once selected, you can see new artboard created in your workspace.

3.2 Inserting Elements from a Material Template

Sketch provides an option to import the material elements from Material Design templates avoiding creating components from scratch. All the material elements like Toolbars, Tabs, Lists, Dialogs and lot more can be inserted very easily.

a. Go to File ⇒ New from Template ⇒ Material Design. You can see another document opened with all pre-designed material components.

b. Select the desired material element and press Command + C to copy. Switch back to your document and paste the element by pressing Command + V on the art board.

c. Move the pasted element to desired position.

3.3 Inserting Rectangle / Circle Shape

Usually all elements can be created using Rectangular and Circular shapes. You can create your own material element if it's not available in Material Template.

a. To insert Rectangle, press R and draw the rectangle. You can change color, border and radius on the right sidebar.
b. To turn Rectangle into Circle, select the shape and on the right sidebar you can see the Radius option. Increase the Radius to turn the shape into Circle.

3.4 Groping Layers

Groping layers keeps the project organized. You can also move multiple elements at once, toggle the visibility if they are grouped.

a. To group the layers, select the layers using Shift or Command key. Press the Command + G to group them into a folder. Give the group a name to identify the component.

3.5 Masking Images

Masking image crops the image into a shape. You can make the image appear as Rectangle, Circle or any other shape.

a. Create a new Rectangle shape by pressing the R key.

b. Insert an image on to art board by navigating to Insert ⇒ Image….

c. Place the inserted image on top of shape drawn. Select both layers, Right Click and select Mask.

3.6 Saving Artboard as .PNG

a. If you want to export the entire screen as image (png or jpeg), select the art board from left sidebar. On the right sidebar, at the bottom you can see Export option.

b. Give Size as 3x and select Format as PNG and click Export. The image will be saved to your desired location.

3.7 Making Icon / Assets Exportable using Slice Tool

Slice tool helps in converting images into exportable images. You need to make all the icons exportable before importing the project into Zeplin.

a. Select the icon on the art-board.

b. Press S to open the slice tool. You can notice the cursor turn into a Knife when slice tool is opened. Click on the image with slice tool to make it exportable.

c. Once sliced, you can see new layer inserted on top of the image. Select the slice layer, on the right sidebar, check Export group contents only to remove the background color making it transparent png.

4. Designing the App using Sketch App

Well, explaining the design part in blog article is much difficult as it needs lot of steps. So I have done a screencast of complete designing part. Please watch the below video that shows designing the screen from scratch.

5. Importing the Project into Zeplin

Once you are done with design part, you can start exporting the project into Zeplin and check if everything is properly done.

a. Create a new project in Zeplin by navigating to Project ⇒ New Project, select Android as we have designed the android app. Give your project a name on the right sidebar.

b. Open Sketch app and Select the Artboard folder on the left sidebar.

c. Goto Plugins ⇒ Zeplin ⇒ Export Selected Artboards. This will open Zeplin again.

d. On Zeplin, select the project you want the screen to be imported. It will start uploading the assets. Once done, you can see the screen on Zeplin's dashboard.

6. Exporting App Assets from Zeplin to Android Studio

Zeplin has the intelligence to detect the elements on the document and provide styles-guides like font size, family, color and even gives you code suggestions needed for Android. It also generates the images into multiple dimensions required for Android development. All the images will be organized into drawable-xx folders, so you can directly add them to your android project.

a. In order to download the assets, you need to make them exportable using Slice tool in Sketch. To export the drawable, select the image and click on download button next to png assets on the right sidebar.

b. Select the path to your Android Project's res folder and click on Export. This will place all the images into proper drawable-xx dimensions.

c. If you select labels, you can see the style-guides like font size, family, color and Android code suggestions on the right sidebar. You can directly add the code to your xml layouts.

I hope this article gave you good information to get started with android UI design. If you have any queries, please do comment below.

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let's talk: [email protected]