Android Layouts

Android Dev - Layouts

(this is a mini tutorial that can be completed at any time)

1. Intro

The aim of this worksheet is to demonstrate how to position elements by building an “about” page. We will also look at how we can apply the same style to elements that are very similar.

here’s how my about page looked at the end

2. New layout resource

First, we need to create a new layout file. To do this, right click on your layout folder (inside resources) in Android Studio. You want to select a layout resource file . You should get a dialog popup like so:

here you want to write the name of the file at the top, and then press ok! We don’t need to worry about the any of the available qualifiers!

4. Building the layout

Next, we need to then start building the your profile card! Ideally, you need to put up between three and five pieces of information, such as your twitter account, linked in profile, public website!

Experiment with the following attributes to position elements exactly where you want them:

• align
• margin
• padding

Try to work through positioning an element once on your own, then ask your coach for some feedback on how they might’ve positioned it. Learn from that and then work on the next element!

5. Styles

After filling in a couple of pieces of information, you’ve probably started copying and pasting whole sections of layout code. Wouldn’t it be nicer if there was a better way to do this?

Fortunately, in Android we can use apply a style. A style will apply a bunch of attributes that you specify to any element you want. For example, our text is the same text size, and colour. We can specify those in a style!

the code before

my style 🎉

the code after!

7. Finishing

Make sure you test out your design on different phones, and different orientations! How will you make it work on a really tiny device and a really big device?

Speak to your coach if you’d like advice on how we handle supporting many different device sizes. For more information take a look at https://developer.android.com/guide/practices/screens_support.html