articles on

Native Android Prototypes with Android Studio - Introduction

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. Step 2 After downloading, install the app following the recommended options 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 ;) Step 4 Wait for all components to be downloaded. It might take a little while. Step 5 All set? Now it's time to star our new prototype. Click on Start a new Android Studio project Step 6 Use whatever you want for Application Name. Also select the location of your project in your machine. 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%. 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. 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. Step 10 Now you need to give a name to the Activity. I will use Home. 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. Step 12 I like the dark theme of the Android Studio, so go the the Android Studio>Preferences>Appearance. Use Darcula for theme. 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. 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. Step 15 Step 16 If you want to see how your prototype looks, just press the Play button and select the emulator option. 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. 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. 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. 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. 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. 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). 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. 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. Step 24 This is the image and the title text with background color. 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. 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. Step 27 To replace the launcher icon click with the right click of the mouse on Drawable>New>Image Asset. Step 28 Select the icon you want and the app will generate all sizes you need. 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.

UI Motion Design: Wyldfire

UI Motion Design: Wyldfire

Motion design has become one of the hottest areas in terms of UI design. Attention to detail has gone further than just graphics but also how UI elements behave when touched or new content is loaded. Ion, an animation and motion design studio from Barcelona, shared some beautiful work executed for the app Wyldfire illustrating motion design at its best. For more information check out the app at http://www.wyldfireapp.com/#intro Via Behance

UI Design: The Gorgeous Weather Dashboard

UI Design: The Gorgeous Weather Dashboard

There are some apps that really are a treat to the eyes. A well design app has the power to catch your attention and you'll instantly want to download and use it. It's the case of the Weather Dashboard / Global Outlook. It's a project by English designer Jonathan Quintin. Unfortunately, as long as I know, this is not available for download (I've looked for it). That's sad... I would love to put my hands and eyes on this gorgeous app. For more of Jonathan's work, please visit his portfolio at Behance. He'll definitely enjoy it. Cheers! ;)

UI Design: Airwala App

UI Design: Airwala App

Time for more cool UI Design here at Abduzeedo! This time, let's check the design of Airwala, a flight search app for the iPhone done by Indian designer Barjinder Singh. Check it out. Here you can see some screens from the app. Looks pretty slick and well done. What do you guys think about it? It's really awesome when you guys give your opinions here, and we'd like you to do that more. These are only some screens, but for more of this app, check out Barjinder's portfolio at Behance. He'll definitely appreciate your visit. Also, if you know any other awesome flight search apps (or any other kind, actually), let us know! Cheers. ;)

UI Design: Mixtape Music App

UI Design: Mixtape Music App

Time for another great looking app! This time, let's check the Mixtape, an app for iOS to remind us of how great the tape era was. It had a certain charm... to record your own mixtapes and share them with the ones you love. I remember recording many of these, and just by looking at this app I go on trip by memory lane. For all the 90's children and teenagers out there, check this app out. Great idea and execution by designer Marco Nenzi, from Italy. Check out more screens of it at his Behance portfolio. Cheers. ;)

UI Design: Noteworthy app concept

Time to get back to our non-official series of UI Design! I thought it was a good time to get back since I found this amazing app concept. It's the Noteworthy app for the iPhone. This concept was done by designer Ante Matijaca from Croatia. Gotta say I really love the color palette. It looks amazing! I wish I could play around a little bit with this. You should really check out Ante's portfolio at Behance for more great ui design pieces. It's really worth it. I hope you enjoy this. ;)

Weekly Apps #3

For this Weekly Apps we have selected 2 Android and 2 iOS apps. You'll find here Cheddar and Fontain for iOS, with their lovely UI's! Also, we recommend you take a look at Rdio and Google+ for Android, all of them are totally free. You can keep sending me your suggestions via Twitter twitter.com/FabianoMe and include #abdz_apps in the message. Rdio - rdio.com This is a complete redesign and rewrite of Rdio for Android. Rdio is the best way to discover, play and share millions of songs, wherever you go – completely ad-free. And even offline, when you don’t have a 3G or Wi-Fi connection.Cheddar - cheddarapp.com Cheddar keeps your world organized. It's easy to use on your iPhone, iPod touch, iPad, and on the web. Cheddar is super simple and instantly in sync on all of your devices.Google+ - plus.google.com Stay connected and share life as it happens.Fontain - thefontain.com Fontain is a free iPhone App which allows you to take a snap of gifts you got and share it with friends, family and followers.

Weekly Apps #2

For this Weekly Apps we have selected 2 Android and 2 iOS apps. You'll find here Flipboard and Square for Android, with their amazing UI's and totally free! For iOS we recommend you take a look on Gipis and Analytiks, I'm sure you'll love to know those apps. You can keep sending me your suggestions via Twitter twitter.com/FabianoMe and include #abdz_apps in the message. Flipboard - flipboard.com Flipboard brings together world news and social news in a beautiful magazine. Flipboard's award-winning experience lets people see everything in one place. By bringing together the world's stories and life's great moments, you can stay up to date with the things that matter most.Square - squareup.com Square puts people in business. Accept credit cards and cash on your Android device with the free Square Card Reader. It's only 2.75% per swipe for Visa, American Express, MasterCard and Discover. No contracts, monthly fees or merchant accounts. Funds are deposited into your bank account the next day. Square makes it easy for anyone to accept payments, anywhere.Gipis - gip.is This is a free application for your iPhone, which uses a built-in GPS to automatically keep track of your workouts. You can also enter your activities manually — Gipis will never lose any of personal workouts stats.Analytiks - analytiksapp.com We combine Google Analytics data with meaningful and friendly messages for an one screen stats everybody understands. Analytiks is made for novice bloggers and experienced webmasters looking for more than just hard data.

Weekly Apps #1

Hi guys, today we will start a new series of posts. Yep, and I'm sure you will absolutely love this one! In these posts we're going to show you some amazing apps. Some have great UIs, others are really useful and will improve your productivity, but all of them will inspire you. We hope you enjoy it! As usual we would love to hear from you, keep sending your suggestions for us and we will be more than happy to feature your Abduzeedo. Send me your suggestions via Twitter twitter.com/FabianoMe and include #abdz_apps in the message. Enjoy! 30/30 - binaryhammer.com 30/30 helps you get stuff done! You set up a list of tasks, and a length of time for each of them. When you start the timer, it will tell you when to move on to the next task. That’s it!NotifyMe - notifymecloud.com NotifyMe for iPad lets you manage and create reminders with comfort on a big iPad screen. It's easy, yet provides advanced reminder features. It syncs live via cloud with NotifyMe on iPhone and Mac, so your reminders are always with you wherever you are.iA Writer - iawriter.com The quintessential writing machine for your iPad and iPhone. iA Writer makes sure that your thoughts go into the text—and not into the program. With keyboard extension, focus mode, iCloud and Dropbox integration.WTHR - http://wthr.co Stop wasting time staring at weather radars and atmospheric pressure readings, you're not an airline pilot...WTHR™ lets you spend more time enjoying the weather...then watching it.

In The Mod Palette Generator - 2 licenses giveaway

When designing we have to think about the goals of our project, the audience and what we want them to feel when seeing our design. Among all areas of a design project, color selection is one of the most important. They can make our design look cold, warm, retro, futuristc, vintage, etc. Because of that a good color scheme can make your work look much more professional. In the Mod is a very nice AIR application. It allows us to drag images and create color palettes from them. Also, you will be able to save these colors directly to Illustrator and Photoshop. With the recent release of Adobe® Air™ and Adobe SwitchBoard, we now have the capability of connecting the dots between stand-alone Air applications, the internet and Adobe's Creative Suite 3. As a result, Kelvin Luck – the creator of Flashr: the ActionScript Flickr API wrapper – and Dr. Woohoo introduce three new color tools to create instant palettes that: Search Flickr. Capture images with your WebCam. Or drag-n-drop images from your computer. Just click a magic button, and the colors are saved to Illustrator, Photoshop CS3 or as an XML file for Processing. The new editions of In The Mod allow digital artists and designers to create instant color palettes of one-to-thousands of colors from a variety of sources — Flickr, your WebCam, images on your computer, or choose from a collection of (in)famous paintings — to use in Adobe Photoshop, Illustrator CS3 or Processing. For more information check out the In The Mod website at http://inthemod.com/. Also we have 2 licenses for In The Mod to giveway, just leave an email and next week we will announce the winners.

Splashup the Photoshop online?

There are some very good online photo editors available, tools like Picinik, pixer.us, Snipshot; and everybody knows that Adobe is about to release an online version of Photoshop. However there’s a new contender in this battle and it’s called Splashup. Splashup, formerly Fauxto, is a powerful editing tool and photo manager. With all the features professionals use and novices want, it's easy to use, works in real-time and allows you to edit many images at once. Splashup runs in all browsers, integrates seamlessly with top photosharing sites, and even has its own file format so you can save your work in progress. Splashup is a flash based application, it must work in all browsers, and one of the best things, in my opinion, is its interface. It basically recreates the Photoshop’s UI, making the learning curve less steep if you are familiar with the Adobe app. There’s a lot to be done, as they are still in beta; like the filters and the blending modes. Even though it lacks a lot of features we can have a very good idea what to expect in the next generation of these online photo editors, as they will be able to take advantage of technologies such as Adobe® AIR™, Silverlight and the new Mozilla Prism. Here is an image I created using it, it's definitely worth giving it a try.