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.

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.

Subscribe
Notify of
guest
44 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mavilla vishnu vardhan
mavilla vishnu vardhan
2 years ago

hope it comes to windows soon. Awesome tool. Thanks for the great tutorial.

Ravi Tamada
2 years ago

You can use photoshop too if you want 🙂

Satendra Thakur
Satendra Thakur
1 year ago
Reply to  Ravi Tamada

Hi Ravi i want to know wat should be the size of screen (PX, DP)for android on zeplin so that if a developer can use sdp or ssp library to handle the screen size on different size devices

Danh
Danh
2 years ago

Do you know any software on Window support to open and export sketch file?

Ravi Tamada
2 years ago
Reply to  Danh

Seems there are few ways. You can google around
https://icons8.com/articles/how-to-open-sketch-file-on-windows/

Danh
Danh
2 years ago
Reply to  Ravi Tamada

Yes, I search by google and I knew Lunacy app can open sketch already. But I remember that it only support export in PNG. Not supprt SVG. 😐

Ravi Tamada
2 years ago
Reply to  Danh

Okay

Jaber
Jaber
2 years ago

hi ravi ..thanks for tut ..could you guide me >>>which is best to learn as back-end technology between REST APIs with Flask and Python or RESTful web services with Silex

Ravi Tamada
2 years ago
Reply to  Jaber

Which back-end programming you are good at?

Jaber
Jaber
2 years ago
Reply to  Ravi Tamada

Im novice in both of them

Ravi Tamada
2 years ago
Reply to  Jaber

It’s easier to get started with PHP or Python. Once you are good in one language, you can learn others.

yashoda addepalli
yashoda addepalli
2 years ago

I check your website daily for new article updates. Thanks for the great tutorial! Eagerly waiting for part 2 (Converting the design into working android app will be covered in a separate article).

Ravi Tamada
2 years ago

Thanks Yashoda. It will be published next week.

Mohit Khaitan
Mohit Khaitan
2 years ago

Amazing man…this will definitely make an impact. Thanks !

Ravi Tamada
2 years ago
Reply to  Mohit Khaitan

Thanks Mohit 🙂

Waseem Arain
Waseem Arain
2 years ago

For window? i want to install on window

Ravi Tamada
2 years ago
Reply to  Waseem Arain

Sketch is not available for windows. You can use Photoshop on windows.

yomi yusuf
yomi yusuf
2 years ago
Reply to  Waseem Arain

Use Gravit. Its available for both Windows and Mac. And it works just like sketch.

Ehtesham Mehmood
Ehtesham Mehmood
2 years ago

How to increase the speed of android app….. What factors are important to make your app smooth for users. please make a tutorial on this topic. Thanks.

Ehtesham Mehmood
Ehtesham Mehmood
2 years ago
Reply to  Ravi Tamada

Thanks Sir @ravi:disqus

Ravi Tamada
2 years ago

You are welcome 🙂

Jankari Hindi
Jankari Hindi
2 years ago

Sir Please Tell Me How I am Make Our Website Downer Part in Google Like Your Site Please See Picture I Give You This in Image.comment image

Jankari Hindi
Jankari Hindi
2 years ago
Reply to  Jankari Hindi

Replay me Ravi

Ravi Tamada
2 years ago
Reply to  Jankari Hindi

These links will be generated automatically when you have enough traffic from Google search. Before that you need to submit your site in google webmaster tools.

Jankari Hindi
Jankari Hindi
2 years ago
Reply to  Ravi Tamada

iska koi naam hai isko kia bol saktai hai what is the name of this ?
What is the name of this link boxes. isko kis naam sai bol saktai hai

Ravi Tamada
2 years ago
Reply to  Jankari Hindi

Read this
http://www.seobythesea.com/2012/07/google-categories-web-pages/

You need to create a sitemap xml of your website and submit in google webmaster. The links will be generated after few weeks/months.

Jankari Hindi
Jankari Hindi
2 years ago

why you not replay my question ravi

Jankari Hindi
Jankari Hindi
2 years ago

tell me

Damarasingu Jagadeesh
Damarasingu Jagadeesh
2 years ago

Hi Sir,
Is it possible to design Webpages in Sketch app. If so How do we get a multi-colored gradient as shown in image.comment image

Ravi Tamada
2 years ago

Yes, it can be used for web designing too. When you are creating new art board, choose web design. The gradient option available on the right sidebar when rectangle shape is selected.

Glayson Junio
Glayson Junio
2 years ago

Very good article my friend, however, the tool is only for Mac, you would have a suggestion of tool for windows, and once again, my congratulations;

Ravi Tamada
2 years ago
Reply to  Glayson Junio

You can use Photoshop on windows.

Osagie Omon
Osagie Omon
2 years ago

Amazing article, correct to the T

Ravi Tamada
2 years ago
Reply to  Osagie Omon

Thank you 🙂

What is `correct to the T`?

Kuldeep Kumar
Kuldeep Kumar
2 years ago

comment image
hi sir can you explain how to make this type design i cannot undrerstood to make using recycleview what i can do.

Devaraja H E
Devaraja H E
2 years ago

is there any open source tool for windows?

Ravi Tamada
2 years ago
Reply to  Devaraja H E

I haven’t found any.

Mrityunjay
2 years ago
Reply to  Devaraja H E

figma

Pooja Malvi
Pooja Malvi
2 years ago

Hey Ravi! Great article and tutorial. I am a designer and I use zeplin to send the sketch files to developers. Though they develop the screens based on the zeplin sizes, the design varies from high res phone to low res phone. I usually export design in mdpi format in zeplin, but in high resolution phone, the sizes decreases by 2x-3x times. Any suggestion on how to solve this? would really appreciate your help in this! 🙂

Øwl
Øwl
2 years ago

What’s the point? You can’t actually convert a layout image as a layout xml in android.
What a waste of time.

Innovative iliyas
Innovative iliyas
2 years ago

thank you for your article each and every point is clear.Thanks once again, its worked for me.

Ravi Tamada
2 years ago

Cheers!

King ramizy
King ramizy
1 year ago

Converting the design into working android app will be covered in a separate article.

Do you know if it is possible to do that? Do you work on an article about this?

44
0
Would love your thoughts, please comment.x
()
x