A new year has just started. I can believe it’s been already more than 12 years since I started Abduzeedo. Back in the day I really wanted to share inspiration and some experiments I was doing, especially using Photoshop.
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.
First thing to do is to download Android Studio. Go to http://developer.android.com/sdk and download your copy of Android Studio.
After downloading, install the app following the recommended options
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 ;)
Wait for all components to be downloaded. It might take a little while.
All set? Now it's time to star our new prototype. Click on Start a new Android Studio project
Use whatever you want for Application Name. Also select the location of your project in your machine.
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%.
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.
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.
Now you need to give a name to the Activity. I will use Home.
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.
I like the dark theme of the Android Studio, so go the the Android Studio>Preferences>Appearance. Use Darcula for theme.
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.
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.
If you want to see how your prototype looks, just press the Play button and select the emulator option.
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.
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.
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.
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.
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.
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).
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.
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.
This is the image and the title text with background color.
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.
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.
To replace the launcher icon click with the right click of the mouse on Drawable>New>Image Asset.
Select the icon you want and the app will generate all sizes you need.
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.