Hello, and welcome to the 4th Android Hack 101. We will be covering the basics of designing a UI in Android.
Today will be a bit different from previous Hack101 tutorials. I'm not a strong believer in the lecture format for a variety of reasons. As a result, this will be a lecture-lite sort of Hack101. Additionally, this Hack101 will be slightly different from previous Hack101s in that it focuses on design rather than programming.
We will be covering the absolute basics of designing a UI in Android Studio - so if any of you have any experience doing this, then chances are you will not get much out of the lecture part of this tutorial.
I say lecture part, because this tutorial is actually divided into two parts. The lecture part, which we will go over as fast as possible, and a competition with a killer prize for the winner.
But more on that later.
Let's start. Don't worry about keeping notes or anything. Just try to follow along as best as you can - a lot of this stuff is common sense, and if you have any experience with HTML or Photoshop I am sure this will all be second nature to you.
Today we will be working on a quick and dirty login page. Previous Tutorials by Amiel covered intents, listeners, and generally everything you would require to make an actual interactive app. Today will be putting on our designer cap and will not be worrying about any of those things.
So. First we are going to start up Android Studio. Click new project. Name the Application "login", enter a new location if you are so inclined. Click next.
Choose Phone and Tablet, and make API 15 the minimum SDK. A lower SDK means it will be compatible with more devices, since new devices are backwards compatible with older versions of Android, but not vice-versa since that might violate our idea of causality.
Here, we are presented with a list of activities.
At its core, an Android App is a collection of connected classes called Activities. Each Activity has a life cycle when it is created, resumed, paused, stopped, and killed. Only one Activity is running at one time, and we can freely switch between them using classes called Intents. Activities and Intents were covered in the second tutorial. You won't need to worry about them too much at the moment, because we are focusing on a set of objects that come from the View class. View objects make up the interface that users interact with.
Let's choose "blank activity", and get to work
There is one picture you need to understand viewGroups and views.
viewGroups are a layout for the different views and viewGroups they contain. views are really any sort of visual object on the screen - buttons, images, whatever. You can think of viewGroups as boxes, and views as cool shit in those boxes that you can interact with. Boxes can contain more boxes, or they can contain other objects.
You can define and instantiate views and viewGroups in the actual java code of your android app, but a lot of people prefer to use XML or the Android Studio Design tool. That way, you separate the actual code that controls its behaviour, from the way the app will be presented.
See in the component tree, we have a heirarchy. We have a device screen object, with a relative layout viewGroup as a child, which has a plain textView with as a child of that.
Before we do anything further, we are going to address a quirk of android studio: You will need to save a profile before you use it - not the standard edit and then save scheme that every other freaking piece of software uses. Android studio has default profiles, which you need to your own versions of before you can edit. Anyways, let's do that.
Go to Preferences > Editor > Colors & Fonts Click Save and you are set
Now. Let's play around with the visual editor for a bit.
Watch what happens when we move the text.Notice how we have those arrows? Because this is a relativeLayout, we show that it moves relative to the margins. Let's add a button. Now let's move it. Notice how the arrows show its position relative to the text AND the margins. If we move the button now, the text moves with it.
Want to change the colour? change the textColor field! Want to change the size? change the textSize field.
Told you it was easy.
Want to add pictures? It's ridiculously simple too. First, let's change our project view from "android" to "project"
If you want to add an image, first you will need to add it to one of several folders that refer to its dots per inch (really it should be called pixels per inch)
drawable-ldpi - Low density images drawable-mdpi - Medium density images drawable-hdpi - High density images drawable-xhdpi - Extra high density images (i.e. retina-like displays) drawable-xxhdpi - Extra extra high density images (devices like Nexus 10, Samsung Galaxy S4, HTC One and Sony Xperia Z) drawable-xxxhdpi - Triple extra high density images (Nexus 6 and 9)
Just make sure the image name has only lower case letters
really what the design tool
Say we want to play around with
android:textSize="32sp"
Simple stuff.
There are a bunch of layouts you can use.
//xml
Basically, you play around with things until you get it the way you want. That's it.
Now. The challenge.
We all love McGill University, don't we? They provide such wonderful services to all of us. The food options are varied and cheap. The advisors are always kind and reachable. Etcetera Etcetera
As designers, I feel it is our duty as deisngers to give back to the community. However, a lot of us are CS students, and a cursory show of hands will show me that none of you are artists. Here is my idea.
We are going to redesign the main activity of the McGill app. The challenge is to redesign it as ugly as possible, because logic tells us that if we design it as ugly as possible, then if we just do the opposite we will create something beautiful.
Here are the requirements:
*you must have a picture of mcgill university somewhere on the page.
*You have to have a settings button
*You have to have a bar with options for home, timetable, feed, community
*You have to have buttons on the page to ask questions, book study rooms, find servicesand emergency
Good luck
Sources:
http://www.vogella.com/tutorials/AndroidLifeCycle/article.html#managingapplicationlifecyle
http://developer.android.com/guide/components/activities.html