Android Tutorial: 08/26/13

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>

That's it, Hope this will help you.

Relative Layout