Relative Layout

Web Hosting
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>
Web Hosting
That's it, Hope this will help you.

No comments:

Post a Comment