Working On Layouts

In this tutorial we will increase your layout knowledge and give basic informations about designing. This is first step to design eye-pleasing screens. I want to give basics about designing already, because in other tutorials after this, I will use layouts which require some background.

  1. Where to Design
    1. Designing in Desing Mode
    2. Designing in Text Mode
  2. Root Layouts for Proper Designs
    1. LinearLayout
    2. RelativeLayout
  3. Common Features of All View Elements : Width and Height
    1. What is wrap_content – match_parent
    2. px unit vs. dp unit
  4. Sample Screen Layouts

1. Where to Design

In Android Studio, res/layout folder is important for designing. When you design a new layout (it may be a screen or a child item of a list or a custom button or any custom view) you create an xml file in res/layout folder and put primitive android widgets in it properly.

So when we start a new project, main_activity.xml file is created automatically in res/layout folder. Lets open it.

There are two ways to design a layout. Below video shows both options.

1. Designing in Design Mode

As you can see above, in DESIGN mode you can drag and drop widgets on palette list to phone screen. And you can check widget hieararchy with component tree on the right-top. Also you can deal with some features of widgets like background-color,margin,padding,text-size…etc by properties panel on right-bottom. Android Studio provides different real device screens to test how your layouts look. Below video shows how you can use all.

In this mode, somethings may be out of control.You may want to work on very detailed layouts. Because of this, I suggest you get used to design in TEXT mode. Even if you begin with DESIGN mode, someday you will switch to TEXT mode. Do not forget that all layout designs of all tutorials in this site are explained in TEXT mode.

2. Designing in Text Mode

In this mode you will write xml like crazy. But belive me, it gives more confidence about how you design.

So lets do something. Open your android studio, start a new project. If you forget how you can follow this tutorial. Click right on res/layout folder and create an layout resource file.

Screen Shot 2015-10-13 at 16.05.15


Give a name, leave root element as RelativeLayout and click Ok

Screen Shot 2015-10-13 at 16.12.29


Switch to text mode and write below codes


Switch to design mode and see the result

Screen Shot 2015-10-14 at 14.40.33

2. Root Layouts For Proper Designs

In this stage, I will explain two container layouts and their properties.LinearLayout and RelativeLayout. Container layouts contains view elements (Button,ImageView,TextView,Edittext….etc.) obviously and how theese elements place in container is depends on container type. Every container layout has its own rules and provides different features.

1. LinearLayout

LinearLayout is the most basic container.LinearLayout works much as its name implies: it organizes its children view elements linearly in either a vertical or horizontal.

For example, write below code in a layout file

Switch to design mode and see the result

Screen Shot 2015-10-14 at 15.11.26

Note

In LinearLayout tag, android:orientation feature decides that LinearLayout’s organization. If orientation is vertical, children elements place vertically.However, if it is horizontal , children places horizontally in LinearLayout.

So change android:orientation feature to horizontal and see the result.

Screen Shot 2015-10-14 at 15.17.24

2. RelativeLayout

I think its name explain most things. RelativeLayout organizes its children elements relatively. I mean, you can put a view element center and put another element right of it and put another element below of second or you can align left-right-top-bottom sides of two elements. RelativeLayout’s features are too many to write all here so lets do somethings.

Note

If you use RelativeLayout, setting an id to children elements is important. When you put elements depends on other elements locations, you need their id.

Open a layout file and write below code

And result is here

Screen Shot 2015-10-14 at 16.55.32

3. Common Features of All View Elements : Width and Height

As you can see from all layouts, every view element has two common feature. android:layout_width and android:layout_height.

These features obviously decide that view element’s sizes. You can set them in different ways. I will explain that ways below.

1. What is wrap_content and match_parent

You can set view’s width or height to wrap_content or match_parent. Because root container elements mostly use match_parent , I choose it as first to explain.

When you use match_parent for a view width or height , that view sizes will be as much as its parent sizes. Lets assume that you create a layout xml file and write below code:

Root element is a RelativeLayout and its parent is device screen. So when you set its width and height to match_parent, its sizes will be equal to device screen sizes.


Here is another example. Lets put a button in that RelativeLayout.

Button’s parent is RelativeLayout and width is match_parent. So button’s width is as much as RelativeLayout’s width which is device width. Here is result:

Screen Shot 2015-10-14 at 20.29.15

If we set it’s height to match_parent also it covers whole screen because it’s parent also covers whole screen:

Screen Shot 2015-10-14 at 20.29.26


So this brings us to wrap_content term. When you use wrap_content, parent sizes are not important. Sizes will be restricted by content. See below code.

Button’s content is “Restricted by content” text. So its width and height will be as much as that text.

Screen Shot 2015-10-14 at 20.39.28

2. px unit vs. dp unit

Width and height don’t have to be wrap_content or match_parent for every time. Of course you can set them to spesific size.

For example

And the result is here:

Screen Shot 2015-10-14 at 20.47.28

This may be seen innocent but using px unit may cause some undesirable cases. 100 x 100 in px may be very little area or huge area for different screen sizes.

Every device has screen density. Density is the quantity of pixels within a physical area of the screen. So if density is high, probably 100 x 100 px area seems very little. On the other hand, if density is low , that area seems very big on device screen.

As an example , on below pictures we see two screens which use the same layout but different screen densities (First one is high, second one is low). Two screens have an 100 x 100 px imageview. You can see how much difference between two imageview’s areas for their own devices.

Screen Shot 2015-10-14 at 21.04.01 Screen Shot 2015-10-14 at 21.04.23


So we need make it density-independent. I mean that 100 x 100 area must not effect from screen density. This brings us to dp unit.

dp means density-independent pixel. When we use dp instead of px, it will be recalculated for device and the area seems more stable for different devices. To understand better, observe below examples.

 Examples are taken from Supporting Multiple Screens article from developer.android.com. I suggest you read it for more.

In below screens, sizes are in px unit.

density-test-bad

If we use dp unit, results are like below.

density-test-good

3. Sample Screen Layouts

At this stage, I give a few example layouts. Please observe xml codes and try to understand which features I used to make that screens.

Example 1

Lets make a warning screen (That blue square at middle is warning icon. You can put an image into. See the comment line <!–  –> in layout codes to how to do it)

Screen Shot 2015-10-15 at 10.37.43

And here is layout codes

 

Example 2

Lets make a login screen

Screen Shot 2015-10-15 at 10.21.19

And here is layout codes

Example 3

Lets make song item of a list.

Screen Shot 2015-10-15 at 10.47.39

Here is layout code

It looks like this when you check on design mode

Screen Shot 2015-10-15 at 11.03.05

 

 

Thats all, see you next tutorial.

 

 

Bir Cevap Yazın