ANDROID STUDIO LAYOUT – How to Understanding It

I will write about Android Studio Layout. The layout is the display of element on Android Studio. These elements can be images or other icons. A good layout will increase the user experience to the program that we make. Besides this layout article, I have written another article, that is Android Gradient Background.

The layout is divided into two:

  1. Linear layout.
  2. Relative layout.
  3. Constraint layout.

The linear layout is the arrangement of elements vertically or horizontally only. As a result, we can not put the element to place anywhere on the screen. Just flow.

Android Studio Layout
Android Studio Layout – Vertical Orientation and Horizontal Orientation

The relative layout is the arrangement of the element as we want. We can place an element on the corner of the screen. We also can place the element on the bottom of the other elements. By using the relative layout, our design will look better.

Android Studio Layout - Relative Layout
Android Studio Layout – Relative Layout

The constraint layout is an arrangement of the elements that bound together.

We can also combine between linear layout with relative layout together in one screen. But I will write it in another article to be more focused. Now I will focus on constraint layout. You will get an example of a code of constraint layout. You can do the same with my code.

Android Studio Layout Example of Code

First, you must create a new project in Android Studio. As information to you, I used Android Studio version 3.5. This is the newest version right now August 27, 2019, when I write this article. If you newbie in Android Studio and need a tutorial on how to open a new project in Android Studio, please open that link.

Preparation Stage Making Android Studio Relative Layout

  • The first time is you must prepare images or icons that will be used in your application. In the example that I made, I used four images.
  • Then copy the images to the drawable folder.
Copy the Images to Drawable Folder
Copy the Images to Drawable Folder
  • This is activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HowCreateit.com"
android:textSize="35sp"
app:layout_constraintTop_toBottomOf="@id/box"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>

<ImageView
android:id="@+id/box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:background="@drawable/box"
/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/redcircle"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="30dp"
android:layout_marginLeft="30dp"
app:layout_constraintLeft_toLeftOf="parent"
/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/greencircle"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="30dp"
android:layout_marginRight="30dp"
/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bluecircle"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="30dp"
android:layout_marginTop="30dp"
app:layout_constraintTop_toTopOf="parent"
/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/greencircle"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="30dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="30dp"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

You can see the code above, all element used constraint attributes. It is to binding each element to others.

  • This is MainActivity.java
package com.howcreateit.androidstudiolayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

If your code is like mine, then you will get the result as like this image.

Android Studio Layout Preview
Android Studio Layout Preview

From the image above we know all element bound to parent. For example the HowCreateIt.com text, it bound to the parent and the box. Then the box bound to the parent: top, bottom, left and right.

This is the result when using Android Emulator.

The Final Result Using Android Emulator
The Final Result Using Android Emulator

Leave a Reply

Your email address will not be published. Required fields are marked *