Relative Layout

In this tutorial, I will show you using relative layout displaying in phone and tablet size in portrait and landscape mode. See output below.

Phone Landscape

Phone Portrait

Tablet Landscape

Tablet Portrait

Here's the MainActivity.java code:

package com.client.app.views.relativelayout;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.Menu;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

RelativeLayout rl_first;
TextView tv_email;
EditText et_email;
Button btn_submit;

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

//get the height and width of the emulator
Display display = getWindowManager().getDefaultDisplay();
   DisplayMetrics outMetrics = new DisplayMetrics ();
   display.getMetrics(outMetrics);
   //end getting the height and width of the emulator
   //get the density, height, width
   float density  = getResources().getDisplayMetrics().density;
   float dpHeight = outMetrics.heightPixels / density;
   float dpWidth  = outMetrics.widthPixels / density;
   
   //compute for layout_width and editText
   float displays = (float) (dpWidth * 0.75);
   //compute for TextView and Button width
   float getForthWidth = displays/3;

   int b = (int) displays;
   Log.e("total_width", Float.toString(dpWidth));
   Log.e("3/4", Float.toString(displays));
   Log.e("tvbtn_width", Float.toString(getForthWidth));
   
   tv_email = (TextView)findViewById(R.id.tt_email);
   et_email = (EditText)findViewById(R.id.et_email);
   btn_submit = (Button)findViewById(R.id.button1);
   rl_first = (RelativeLayout)findViewById(R.id.rl_first);

   //check if the width is greater than 320 or smartphone size, the size below will be set.
   if(b > 320){
    tv_email.setWidth((int) getForthWidth);
    et_email.setWidth((int) b);
    btn_submit.setWidth((int) getForthWidth);
   }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

And the layout.xml:

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

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

    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=".MainActivity" >

    <RelativeLayout

        android:id="@+id/rl_first"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:layout_alignParentTop="true">

        

        

        <TextView

        android:id="@+id/tt_email"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="left"

        android:text="Email Add" />

   <EditText

       android:id="@+id/et_email"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_below="@+id/tt_email"

       android:ems="13"

       android:gravity="left"

       android:inputType="textEmailAddress" >

       <requestFocus />

   </EditText>

   <Button

       android:id="@+id/button1"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:gravity="center"

android:layout_below="@+id/et_email"

       android:text="Submit" />

    

    </RelativeLayout>

</RelativeLayout>

That's it, Hope this will help you.