Develop Reference

android - Not the same interface display on different screens

I'm new in android programming and my problem is that i created a simple calculator interface with some LienarLayouts and the result is not the same on the design display and my physical phone.
The result i get on the design
The result i get on my phone (Galaxy S7)
I couldn't find any solutions for that. For the operators it's some images that i put on different drawable folders (hdpi, xhdpi and xxhdpi).
i will put my xml file here.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#android:color/background_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:background="#color/clrBlue"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="50dp"
android:text="567"
android:textColor="#android:color/background_light"
android:textSize="45sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="7"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="8"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="9"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/divide" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="4"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="5"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="6"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/multiply" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="1"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="2"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="3"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/subtract" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="192dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/button15"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#color/clrBlue"
android:text="clear"
android:textSize="25sp" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="96dp"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:text="0"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
app:srcCompat="#drawable/add" />
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/transparent"
android:paddingRight="50dp"
android:paddingTop="125dp"
app:srcCompat="#drawable/equal" />
</RelativeLayout>

The result is different because of the different sizes. At the top of your layout display you will see that Nexus 4 is selected which is of screen size 4.7" and I think Galaxy S7 is of size 5.1".
Also, there can be a difference in density pixels.
You can refer to the android document for different pixel densities.
Support Different Pixel Densities

Relative and Linear layouts is not best choice for create calculator layout. To make this layout try use GridLayout or ConstraintLayout. It will be easier and more reliable solution
Edited

My internal linearLayout have some margin at bottom

my Internal Linear Layout (with blue background) seems to have some margin at bottom with white space, do not know how to remove this.
The External Linear layout also have no padding or margin , from where this whitespace came
[![<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#E78F23">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:clickable="true"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:onClick="dashboard"
android:src="#drawable/menu"/>
<TextView
android:id="#+id/ticket_reciever_header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp"
android:textColor="#ffffff"
android:text="Mike Smith"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="35%0FF"
android:gravity="center_vertical"
android:layout_marginTop="55dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="35dp"
android:textSize="40sp"
android:textColor="#color/background_material_dark"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/layer"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:background="#91A4AB"
android:weightSum="3">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="55dp">
<TextView
android:id="#+id/product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="AMG 020 ladies shirt"
android:layout_marginTop="6dp"
android:layout_marginLeft="12dp"
android:textSize="20sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/product_name"
android:text="Purple heather"
android:layout_marginLeft="12dp"
android:textSize="12sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:clickable="true"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/share_upper"/>
</RelativeLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/qr_code"
android:layout_marginTop="30dp"
android:layout_gravity="center"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#3E41B2"
>
<ImageButton
android:id="#+id/shedule"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/tecket_recieved_shedule"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:id="#+id/location"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ticket_received_location"
android:background="#00000000"/>
<ImageButton
android:id="#+id/favourite"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/favourite"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/share"
android:layout_weight="1"
android:background="#00000000"/>
</LinearLayout>
</LinearLayout>]
1]1

Just update your last Linear Layout Height . Set match_parent instead Hard-Coded 50dp .
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#3E41B2"
>
<ImageButton
android:id="#+id/shedule"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/tecket_recieved_shedule"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:id="#+id/location"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ticket_received_location"
android:background="#00000000"/>
<ImageButton
android:id="#+id/favourite"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/favourite"
android:layout_weight="1"
android:background="#00000000"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/share"
android:layout_weight="1"
android:background="#00000000"/>
</LinearLayout>

try
android:layout_height="match_parent"
instead of
android:layout_height="50dp"
in your last LinearLayout.
hope this helps!

You have set the height of the layout as a fixed value (50dp). Change it so it takes all available space changing
android:layout_height="50dp"
for
android:layout_height="match_parent"
For future ui issues like this you can enable "Show layout bounds" in Developer Options. It will show the size of every view in the screen

Image alignment is not working properly when using layout_weight in Android

I am going to design a dashboard of my application where couple of menus/buttons are present. Menus are indicated using some images. The menus are placed in 4 columns. First there columns are containing two menus each and fourth is containing three. The design of the screen is in the below image:
Now to develop this I have tried with Linearlayout and layout_weight. But I am not able to place them and the images are getting stretched. I have used the below code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/mumbaibg"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/newcar" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/usedcar" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/carloan" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/service" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/sos" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/learndrive" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/insurance" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/rtofinelist" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#android:color/white" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/newsoffer" />
</LinearLayout>
</LinearLayout>
Images are getting placed on the each column but they are getting stretched. I have tried with .9patch image as well as placing the images are in different drawable folders.
With the current code, the screen is looking like this:
Can any one give me a better and easy solution to achieve this.
Thanks,
Arindam.

In order for your scaling to work as expected, you need to set android:layout_width="0dp" for horizontal layouts and android:layout_height="0dp" for vertical layouts.
Edit, here is a code sample that achieves the design:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:adjustViewBounds="true"
android:src="#drawable/ic_favorite" />
</LinearLayout>

Remove these two attributes in your layout:
android:scaleType="fitCenter"
android:adjustViewBounds="true"
They're responsible for the stretching.
You'll then hopefully have right aligned images.
Set layout_gravity to center and that should align the images into the middle of their corresponding grids.

The parent LinearLayout that has direct children views needs to have android:weightSum="3" attribute specified. The child views already have the corresponding android:layout_weight="1" - so thats good. But the parent attribute is not present so the system doesnt know how to properly allocate the space for the child views.

Layout design for 21.5 inch screen android device

Am developing an application for 21.5 screen android device. I have tried the code below and testing in the 10 inch emulator. its looking good. but i want to know whether is it good to use the relative layout or linear layout with weight. Because i don't want the blank space below the layout when it appears in 21,5 inch screen. Please suggest.
My layout code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:src="#drawable/image1" />
<com.acuvue.kiosk.view.CustomTextView
android:id="#+id/customTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="#string/please_choose"
android:textSize="50sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/customTextView1"
android:layout_marginTop="100dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>

Try this way,hope this will help you to solve your problem.
Here use LinearLayout with weight instead of Relativelayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/image1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<com.acuvue.kiosk.view.CustomTextView
android:id="#+id/customTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/please_choose"
android:textSize="50sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android - Fitting 6 ImageButtons to layout

I've been having a huge problem with fitting 6 image buttons to one screen.
I have tried Intellij and ADT but came up with nothing. I've also used two methods and played around them. One of them was inserting linear layouts to relative layout and inserting the image buttons inside them. This seemed well in the first place, however, i got bad results on big screens. The other method was to use regular alignment methods in xml but this gave me a lot worse results and I'm really stuck right now. I think I'm going to go with the first method but I want to get a good result since this is my senior project. You can find the two methods below. Can you help me what I'm doing wrong? Thank you very much.
---EDIT---
My intent is 3 lines, 2 buttons at each line. And screenshots are below. I have nexus 7 2013 and galaxy s2, and the results are similar to the ones below, so I assume the results below are correct.
This is the picture for 1st method:
This is the picture for 2nd method:
---END OF EDIT---
First method (inserting image buttons to 3 linear layouts in relative layout):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="390dp"
android:layout_alignParentBottom="true" android:layout_alignParentStart="true">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/apu"
android:scaleType="fitCenter"
/>
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/lms"
android:scaleType="fitCenter"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" android:layout_alignParentStart="true"
android:layout_marginTop="140dp" android:layout_marginBottom="255dp" android:id="#+id/linearLayout">
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/mail"
android:scaleType="fitCenter"/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/sca"
android:scaleType="fitCenter"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="119dp" android:layout_alignTop="#+id/linearLayout"
android:layout_alignParentStart="true" android:layout_marginBottom="140dp" android:id="#+id/linearLayout2">
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/library"
android:scaleType="fitCenter"/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/rating"
android:scaleType="fitCenter"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignTop="#+id/linearLayout2" android:layout_alignParentEnd="true"
android:layout_marginTop="127dp">
</LinearLayout>
Second method (using alignments):
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/apu"
android:scaleType="fitCenter"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lms"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mail"
android:scaleType="fitCenter"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sca"
android:scaleType="fitCenter"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
<ImageButton
android:id="#+id/libraryButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/library"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>

// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/mailButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>

Check out this code, please comment if it works
<LinearLayout
android:id="#+id/grd_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/apuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/mailButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/scaButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>

You'll want to use your first method with linear layouts and add in weights so that it doesn't become separated out like that. Here is the modified code of yours that should fix that issue (you'll want to create bigger images for each device so that it comes out looking a bit cleaner too).
<LinearLayout 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:orientation="vertical"
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.example.test.MainActivity$PlaceholderFragment" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/apu" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/lms" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/mail" />
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/sca" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/library" />
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/rating" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="127dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>