Native Android Prototypes with Android Studio - Introduction

I have been working designing interfaces for the web for over 15 years and for the past couple of years I have seen the switch to native apps being a big shift in the industry. I am a huge fan of the web but it's important to keep up with the industry. The design process also has been evolving and getting close to the Industrial Design process I was taught in school, where prototyping is a crucial part of the process. So in order for me to test my designs I have been relying on different tools and techniques to prototype. From pure Javascript/CSS/HTML5 to Framer I have seen a lot of potential, however for me, especially at work, I felt that using the native tools would give me a much better understanding of how to talk to engineers, see how things really work and if possible, help with the front-end process.

So for this tutorial and a new series of tutorials I will show you how to create Android prototypes using Android Studio. I am far from proficient in Java, but I have been self-teaching myself by trial and error and use Google Search for most of my answers. So, I will try to share a bit of what I've learned along this new journey and I hope you can avoid making the same mistakes I made and save some extra time. In the end, the most important thing you will be able to visualize is your prototype running on your phone.

Step 1

First thing to do is to download Android Studio. Go to http://developer.android.com/sdk and download your copy of Android Studio.

Android Prototyping in Android Studio

Step 2

After downloading, install the app following the recommended options

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Step 3

Select the Licences and then select the Accept options. I know this sounds obvious but it took me a bit of time to figure our how that worked, I am just trying to save you some time ;)

Android Prototyping in Android Studio

Step 4

Wait for all components to be downloaded. It might take a little while.

Android Prototyping in Android Studio

Step 5

All set? Now it's time to star our new prototype. Click on Start a new Android Studio project

Android Prototyping in Android Studio

Step 6

Use whatever you want for Application Name. Also select the location of your project in your machine.

Android Prototyping in Android Studio

Step 7

This is an interesting screen. It gives a lot of options: are you creating an app for Phone and Tablet, TV, or Wear? Then you can choose the Minimum SDK. The cool thing is that the tool gives an idea of the average of users with that SDK, in the case of API 19 (KitKat) it's 33.9%.

Android Prototyping in Android Studio

Step 8

For our case, as we are building a prototype, I will use the API 22. If you want to test on you phone, use the API that your phone has.

Android Prototyping in Android Studio

Step 9

Now the tool offers you some options for the type of Activity you want to create. Activity is the same thing as screen. If you think about in terms of HTML, that would be one HTML page. For our first prototype, let's use Blank Activity.

Android Prototyping in Android Studio

Step 10

Now you need to give a name to the Activity. I will use Home.

Android Prototyping in Android Studio

Step 11

This is the UI of Android Studio. It might look a bit overwhelming but we will go through the main things and you will see that it's not that complicated.

Android Prototyping in Android Studio

Step 12

I like the dark theme of the Android Studio, so go the the Android Studio>Preferences>Appearance. Use Darcula for theme.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Step 13

So let's go through the UI. The left column, you have the Project files. With the App, then 3 directories: manifests, java, and res. Res is where the layouts and assets will live. The Layout folder is where the layout of your screens will be. In our example, the activity_home.xml.

Android Prototyping in Android Studio

Step 14

In the center of the screen is the visual UI. You can select the components, move them around, delete and do whatever you want. You also have 2 taps for Design and Text. That is pretty much a toggle between two ways to design the UI, via a WYSWYG or code.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Step 15

Android Prototyping in Android Studio

Step 16

If you want to see how your prototype looks, just press the Play button and select the emulator option.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Step 17

To change the app name, go to res>values>strings.xml. Change the App name to the name you want to use for your application. I am using Abduzeedo.

Android Prototyping in Android Studio

Step 18

Now let's add some content. The first thing to do is to add a ScrollView. We want our content to scroll so we need to use that component. In Android all components are views.

Android Prototyping in Android Studio

Step 19

To change the size of your scroll view you can go to the property options on the right corner of the screen. There you can see the first 2 options layout:width and layout:height. Click on the right side and select wrap_content for both.

Android Prototyping in Android Studio

Step 20

Select the Relative Layout that was automatic added to your activit and then in the properties scroll to padding and change the all to 0.

Android Prototyping in Android Studio

Step 21

To add an image to your layout the first thing to do is to add it to your project folders. Select the drawable folder and with the right click of your mouse select Reveal in Finder. Then move the any bitmap to that folder. There's one thing to note, the filename should be lowercase.

Android Prototyping in Android Studio

Step 21

Select the ImageView from the component column, move it to your screen. Then in the property view scroll to src and click on the (...) to open the Resources window. Select your image (cover_img).

Android Prototyping in Android Studio

Step 22

Resize your image to the size you want. I am previewing the layout on a Nexus 5, so I change the layout:height to 512dp. If you want your ImageView to be the exact size and aspect ratio of your image, select the Adjust Bounds options.

Android Prototyping in Android Studio

Step 23

Now let's add the title. To do that select the LargeText View. Then move it to your layout. Position it at the bottom of the ImageView. Then make sure that the layout:width is fill parent, and layout:height is wrap_content. For the padding use 16dp. for the textColor use #ffffff, for the fontSize use 32sp (the screenshot is wrong) and for the background get one color from the image. In the next tutorials I will show you how to extract the color from images. Tip. To use rgba colors you have to use the hex values that include alpha. There's a screenshot with some basic values, but Google is your friend to find out other values.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Step 24

This is the image and the title text with background color.

Android Prototyping in Android Studio

Step 25

Now let's add another RelativeView and a normalText view in it for our content paragraph. Paste a copy you want for the text and our first layout will be done. Tip. If you want to preview the whole screenview in your WYSWYG view, just make sure that the parent view is a ScrollView.

Android Prototyping in Android Studio

Step 26

Run the emulator to preview your prototype and scroll to see the text. In future tutorials we will get more advanced with some scroll effects as well.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Step 27

To replace the launcher icon click with the right click of the mouse on Drawable>New>Image Asset.

Android Prototyping in Android Studio

Step 28

Select the icon you want and the app will generate all sizes you need.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Conclusion

Run the emulator once again and you will see your prototype with the right icon. Also plug your phone and enable it for USB debug. Then press Play and your phone will be listed in the options for where do you want to run the app. Select the phone and run the app. You will have your first app/prototype.

Android Prototyping in Android Studio

Android Prototyping in Android Studio

Brought to you by