Android UI Q&A: Getting Started with Android UI Design, Best Layout Practices, and More

This article is based on the Codementor Office Hours hosted by Linton Ye of Mirror for Android Studio. At the end of the live coding, Linton answers some questions about coding Android UI animations, how beginners can get started on Android UI designs, and more.

Part 1: Android UI Layouts and Animations

How Can Beginners Get Started with Android UI Designs

As a starting point, a beginner should probably check out all examples of well-designed apps that are already there.

At first, Android apps were not well-designed, but it’s getting a lot better. People still kind of just design for iOS first and Android second or something. It doesn’t matter which platform you design first, but when you’re designing for Android, make sure that you’re going to consider the unique parts of Android. It has different kind of conventions, different kind of patterns. I think the most efficient way to get the sense of that is to visit Android Forum and use a lot of well-designed Android apps.

In addition, you can also look at websites that are recommending well-designed Android apps.

The Best Way to Plan an Android UI Layout

1. Minimize the Number of Views

I think one of the rules is to minimize the number of views or the depth of your layout’s hierarchy. This is one of the things you’d want to keep in mind all the time.

2. Don’t Just Design for One Resolution/Screen Size

Android devices have a lot of different resolutions and screen sizes. When you’re developing a layout, you want to see them all the time.

3. Think About What Kind of Layout You Want

It’s also important to know what kind of actual layout you want. Think about whether you want to do a custom view or just a standard view.

What is Your Favorite UI Design?

There are a number of things. Timely is a very nicely designed app. It’s an alarm clock. Right now, if we’re talking about material design, I would just go and maybe check out Google’s apps like Google+ or Gmail’s Inbox.

The Optimal Number of Nested Layouts in an App

The threshold of how many nested layouts your app should have depends on the context of using that layout. If it’s just a single view and if you were only going to inflate that layout just a few times, you can get quite deep and you won’t run into too many problems.

However, if you’re inside RecyclerViews or ListViews, you want to keep it shallow. I think like six or seven is a good number, but you don’t want to go even deeper.

Of course, this is going to change because we’re going to get faster and faster mobile devices. In general, keeping everything simple is a good idea, not only for performance consideration. This is also for the ease of the use of the layout or ease of understanding tenants.

Android tools NameSpace

When to use it instead of  Android to specify the TextView Text

If you use the Android NameSpace, it’s going to go into your production app. For example, if you put android:src into an ImageView, it’s going to use that by default in your app unless you replace it in your program.

Conversely, if you put a tools column SRC in your layout, it’ll only show up during the design time (the preview pane in Android Studio and Mirror). So it will only show up at the design time.

RecyclerView Compatibility

Will the RecyclerView work with older versions of Android other than Lollipop?

Yes. You can see the name. If it’s V7, which mean API 7+, you can use the RecyclerView all the way down to version 7, which is even before the Gingerbread. Of course Gingerbread’s version 10, but you can use it pretty much everywhere without worrying about compatibility. Just include it in your build.gradle file.

What is Mirror

and Why is it Special?

Normally if you want to see the layout changes you’ve made, you will have to build it new every time to see how it would appear on your device . You know how slow it is. Even for this very small code base, it’s going to take maybe ten seconds or sometimes it’s going to have to rebuild, and you’re going to have to reinstall it on the device.

With Mirror, you don’t have to do that. When you start the Mirror, you can make your change in your code, and when you save, it’s going to push it just a few second later. It speeds up the feedback significantly; it makes the feedback time a lot less, so it saves you a lot of time. So, in short, because the default way of working on an Android project is too slow, Mirror’s purpose is to make it faster.

Why is the .xml within the Mirror directory?

In Android Studio you’re going to see a problem like this:

Your view populates with something, but it’s normally not something that you wanted. With the .xml file in the Mirror directory, you can populate your view with some mock data.

This is especially useful if you have a ListView or RecyclerView and you want to see how it looks like in a real app. You can just populate the ListView or RecyclerView without having to write the actual Java code to make it happen, and without having to run the actual application. Whenever you save the .xml file, it’s going to update it in the Mirror preview. You’re going to be able to see it on the device.

Motion Kits

Motion kit is in a very early stage right now. It’s just a simple wrapper around the standard properties animation. One of the things that make it easier to show is that it provides a slightly nicer API just for animation purpose.

What’s more, What’s more, Motion Kit makes it easier to choreograph different parts of an animation. You’ll have to do a lot of manual work if you’re using the standard property animation. However, with motion kit, you can just tell it what kind of properties you want to animate, and it’s going to automatically set the start values of each animation target.

Our goal for motion kit is to add more and more functionality to that small library to make it even easier to create animations with Android.

Is Mirror able to deal with animations generated by Origami?

I haven’t looked at what kind of animations Origami generates. Of course, Mirror can handle those animations because it just builds on top of a standard Android project. If it requires some third party libraries, make sure to include that in your build.gradle file. I think as long as your project builds it should work properly. You still get the benefit when you make code changes in the code generated by Origami; you can preview it using Mirror.

About Linton Ye

Linton is a developer, tool smith, and in his own words “half-assed” UI designer, entrepreneur and life-long learner. He founded Jimu Labs to eliminate the gap between UI design and development, and created Mirror as the first step into that direction. Back in ’08, Linton built one of the first movie ShowTime apps on Android and it had more than a million downloads. Linton also built Eclipse plugins and tooling for Aspect J at IBM and the University of British Columbia.