What are the most important features of an app for the users? In my opinion I believe it’s the user interface that create the best experience regardless of what the app does. Creating a cool application with a innovative and complex algorithm is awesome; however, if the application isn’t pretty looking then it might turn away some potential user. So, we know that the user interface is important but how do we keep it organized and pretty, and how do we account for multiple devices. Remember, the android OS can be found in many different devices that can very from phones to tvs to anything else in between. Being from a background of working mostly with desktop computers when I first started programming I asked these questions myself, but I quickly found out it isn’t too difficult because android comes with some layouts which will make our life easier.

Layouts:

The two most common layouts that I have used are the relative layout and the linear layout.

Relative layout:

The relative layout is a layout in which you can put items above, below, or next to another item on the screen. Lets take look at a simple example here:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/welcome"
        android:textSize="30sp"

        />
    <Button
        android:id="@+id/rightButton"
        android:layout_below="@id/welcome"
        android:layout_toRightOf="@id/leftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/right"

        />
    <Button
        android:id="@+id/leftButton"
        android:layout_below="@id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/left"
        />

</RelativeLayout>

 

If you take a look at the Xml code above then you can see I used a Textview and two Buttons. I simply put both of the buttons below the TextView in this line “android:layout_below=id/welcome” and then I put the right button to the right of the left button with this line of code “android:layout_toRightOf=@id/leftButton” and wala its pretty simple right? Think of the possibilities of this layout. Lets take a look at one more powerful layout know as the linear layout.

Linear layout:

The linear layout has it’s power in putting items in a linear way either in the horizontal or vertical direction.

Vertical Linear Layout Example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/welcome"
        android:textSize="20sp"

        />

    <Button
        android:id="@+id/middleButton"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/middle"

        />

    <Button
        android:id="@+id/bottomButton"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/bottom"
        />

</LinearLayout>

 

The above example is a very simple example of the vertical linear layout.

Horizontal Linear Layout Example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/welcome"
        android:textSize="20sp"
        />

    <Button
        android:id="@+id/middleButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/middle"
        />

    <Button
        android:id="@+id/rightButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/right"
        />

</LinearLayout>

The above example is an example of the horizontal linear layout. Can you tell the difference in the code between the vertical linear layout and the horizontal linear layout? Hopefully you spotted the differences. The difference is in the orientation part of the linear layout tag you can either put “vertical” or “horizontal” and I put a layout weight of 1 to every component. From there we must adjust every component depending on if the linear layout is horizontal or vertical. If you are working with a vertical layout then you must change the layout_height to equal “0dp”; however, if you are working with a horizontal layout then you must change the layout_width to equal “0dp”. I almost forgot to mention that you can use a vertical linear layout within a horizontal linear layout and vice versa.

I encourage you to play around with the different layouts and try to make a cool looking user interface. Keep coding!