How to Implement Android RelativeLayout For Designing Attractive UI

How to Implement Android Relativelayout For Designing Attractive User Interface

0
Shares
How to Implement Android Relativelayout For Designing Attractive User Interface
1 (20%) 1 vote

Whenever building an Android application, understanding layouts is important to design attractive and appealing user interface. And much like all other layouts, Android relativelayout helps to organize widgets, controls, and relation to one another. All in all, relative layouts are powerful and flexible layout with which, interesting and attractive user interfaces can be designed.

Android Relativelayout Example

Android relative layout is best explained with an example. So here, we’ll be building one project to demonstrate implementation of Android relative layout. In this demo, we’ll add an EditText control and a button control. Now we’ll place the button to display just to the right of EditText control. This means, we’ll have to define a relative layout with two child controls. The EditText and the Button.

Start Code Integration

Create a new project under file menu, modify the project details and choose appropriate location for the demo project.

ssrelativelayoutdemo01

Choose Mini Support SDK to use in this project.

ssrelativelayoutdemo02

Lastly, select Add No Activity and click on finish.

ssrelativelayoutdemo03

Create XML file

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context="com.relativelayout.demo.MainActivity">

    <TextView

        android:id="@+id/tv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="@dimen/activity_horizontal_margin"

        android:text="User :"

        android:textAppearance="?android:attr/textAppearanceLarge"/>

    <EditText

        android:id="@+id/edtuser"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_alignTop="@+id/tv"

        android:layout_toRightOf="@+id/tv"

        android:layout_toEndOf="@+id/tv"/>

    <Button

        android:id="@+id/btnSubmit"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_below="@+id/edtuser"

        android:text="Submit"/>

</RelativeLayout>

Create Class For Main Activity

package com.relativelayout.demo;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tvuser;

    private EditText edtuser;

    private Button btnSubmit;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // Declare View in initControls()

        initControls();

        // Set on click Listener in set Listner

        setListener();

    }

    private void initControls() {

        tvuser = (TextView) findViewById(R.id.tvuser);

        edtuser = (EditText) findViewById(R.id.edtuser);

        btnSubmit = (Button) findViewById(R.id.btnSubmit);

    }

    private void setListener() {

        btnSubmit.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

            }

        });

    }

}

Once you implement the above code, run your project.

It should show output something like this.

ssrelativelayoutdemo04

And Done!

Simple enough don’t you think?

Although this was just a simple demo, but it’s also possible to take it further. Therefore, whenever building an Android app, always consider Android relativelayout for designing the user interface, consult with an expert, or hire Android app development company, but make sure to implement it the right way.

Grab a free copy of Relative Layout Example demo from Github.

 
0
Shares
 

Have an App Idea?

Get your free consultation now