Develop Reference

Customizing my button

I have buttons with text in it. What i want, is the same button without the text, having a little icon in the middle of the button. The icon has to be, i'm assuming, an image that you save in the drawable file, but when i put that in the button it gets set as a background..
Also, all the images with icons are images with a black icon surrounded with white space to make it in to a square. I want to keep my button, just having an icon in the center of it.
Does anyone know how to do this?
activity main code:
<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"
tools:context="com.example.rodekruis.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.rodekruis.MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:src="#drawable/rkz_logo"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/button10"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text=" Afspraak maken" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text=" Bezoek tijden" />
<Button
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="#drawable/contact"
android:text="Contact" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text=" Geef je mening!" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text=" Route begeleiding" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/button5"
android:layout_below="#+id/button8"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:text="Specialisten" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1.03"
android:text="Brandwonden centrum" />
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Agenda" />
<Button
android:id="#+id/button7"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:text="Nieuws" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
This is the code for the top row buttons:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.rodekruis.MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:src="#drawable/rkz_logo"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/button10"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text=" Afspraak maken" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text=" Bezoek tijden" />
<ImageButton
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:src="#drawable/rkz_logo"
android:gravity="center"
android:text="Contact" />
</LinearLayout>

Use ImageButton widget instead of Button widget. then use android:src tag to set image and android:gravity="center" to set image gravity to center.
Hope it will help :)
UPDATE
Then try this -
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" //Your image icon
android:background="#android:drawable/btn_default_small"/>

Try ImageButton. As the name implies, it's a button with image. To set the image do:
android:src.
Hope this helps.

change
<Button
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="#drawable/contact"
android:text="Contact" />
to
<ImageButton
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:src="#drawable/contact"
android:text="Contact" />
if you dont want square button edit
<ImageButton
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:background="#android:color/transparent"
android:layout_weight="1"
android:src="#drawable/contact"
android:text="Contact" />

how to fix this layout error.buttons not placed properly?

I am having a layout problem.
When the app is opened in Samsung j+ the buttons are not properly placed. Please help.
the problem is explained in the image plz see the image.
here is the xml code:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:gravity="top"
android:id="#+id/relativeLayout">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:gravity="right" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75sp"
android:layout_height="75sp"
android:text="."
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:textSize="25dp"
android:layout_toRightOf="#+id/button3"
android:layout_toLeftOf="#+id/button12"
android:layout_toStartOf="#+id/button12" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="1"
android:id="#+id/button2"
android:layout_above="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/button5"
android:textSize="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="2"
android:id="#+id/button3"
android:layout_toEndOf="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:layout_alignTop="#+id/button5"
android:layout_above="#+id/button4"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/button4"
android:layout_below="#+id/button2"
android:layout_alignRight="#+id/button3"
android:layout_alignEnd="#+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="3"
android:id="#+id/button5"
android:layout_above="#+id/button"
android:layout_toRightOf="#+id/button4"
android:layout_toEndOf="#+id/button4"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="4"
android:id="#+id/button6"
android:layout_above="#+id/button2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/button7"
android:layout_alignTop="#+id/button6"
android:layout_toRightOf="#+id/button6"
android:layout_toEndOf="#+id/button6"
android:layout_alignBottom="#+id/button6"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="6"
android:id="#+id/button8"
android:layout_above="#+id/button3"
android:layout_toRightOf="#+id/button3"
android:layout_toEndOf="#+id/button3"
android:layout_alignTop="#+id/button7"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="7"
android:id="#+id/button9"
android:layout_above="#+id/button8"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="#+id/button10"
android:layout_alignTop="#+id/button9"
android:layout_toRightOf="#+id/button9"
android:layout_above="#+id/button6"
android:layout_alignRight="#+id/button7"
android:layout_alignEnd="#+id/button7"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/button11"
android:layout_above="#+id/button8"
android:layout_toRightOf="#+id/button10"
android:layout_alignTop="#+id/button10"
android:layout_alignRight="#+id/button8"
android:layout_alignEnd="#+id/button8"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/button12"
android:layout_toRightOf="#+id/button5"
android:layout_below="#+id/button8"
android:layout_alignParentBottom="true"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/button13"
android:layout_alignTop="#+id/button11"
android:layout_toRightOf="#+id/button11"
android:layout_alignRight="#+id/button12"
android:layout_alignEnd="#+id/button12"
android:layout_alignBottom="#+id/button8"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="/"
android:id="#+id/button14"
android:layout_above="#+id/button9"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/button10"
android:layout_alignEnd="#+id/button10"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/button15"
android:layout_alignBottom="#+id/button14"
android:layout_alignTop="#+id/button14"
android:layout_alignRight="#+id/button13"
android:layout_alignEnd="#+id/button13"
android:layout_toRightOf="#+id/button11"
android:layout_toEndOf="#+id/button11"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:id="#+id/button16"
android:layout_alignBottom="#+id/button14"
android:layout_alignTop="#+id/button14"
android:layout_toRightOf="#+id/button14"
android:layout_toLeftOf="#+id/button15"
android:layout_toStartOf="#+id/button15"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLEAR SCREEN"
android:id="#+id/button17"
android:layout_above="#+id/button14"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/button15"
android:layout_alignEnd="#+id/button15" />
</RelativeLayout>

here is a complete responsive xml no matter what device you use it
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="CLEAR SCREEN" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="/"
android:textSize="25dp" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="-"
android:textSize="25dp" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="*"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"
android:textSize="25dp" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"
android:textSize="25dp" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"
android:textSize="25dp" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"
android:textSize="25dp" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="+"
android:id="#+id/button13"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
android:textSize="25dp" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
android:textSize="25dp" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="0"
android:id="#+id/button4"
android:textSize="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="."
android:id="#+id/button"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="="
android:id="#+id/button12"
android:layout_toRightOf="#+id/button5"
android:layout_below="#+id/button8"
android:layout_alignParentBottom="true"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Things move out of place on different screen sizes [duplicate]

This question already has answers here:
How to support different screen size in android
(9 answers)
Closed 8 years ago.
I've made an android app and spent quite a bit of time making it fit perfectly on my screen (specifically part marked as "this part" on xml). To my surprise, everything appears out of place in other screens. How do I make sure that it looks the same in all screens?
XML:
<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:background="#drawable/wood"
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.luanca.charangomaster.ChordActivity"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="#+id/chordintip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/choose_root" />
<Button
android:id="#+id/chordin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/dark_plank"
android:text=""
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:id="#+id/emptymiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/emptymiddle"
android:layout_weight="1">
<TextView
android:id="#+id/chordintip2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/choose_type" />
<Button
android:id="#+id/chordin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/dark_plank"
android:text=""
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tip1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="#string/help" />
<!--This part doesn't fill all screens -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitCenter"
android:src="#drawable/chord_box1"
/>
<LinearLayout
android:id="#+id/tabgrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/firstrow"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
<TextView
android:id="#+id/fretposition1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="1"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="2"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="3"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="4"
android:textColor="#000000"/>
<TextView
android:id="#+id/fretposition5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:gravity="center"
android:text="5"
android:textColor="#000000"/>
<Button
android:id="#+id/empty2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignTop="#+id/firstrow"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret22"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret23"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret31"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret32"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret33"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret34"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret35"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret40"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret41"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret42"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret43"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret44"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1.15"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/empty11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55"
android:text=""
android:visibility="invisible" />
<Button
android:id="#+id/fret50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="-20dp"
android:layout_weight="1"
android:background="#drawable/no_press1"
android:text=""
android:textColor="#ffffff" />
<Button
android:id="#+id/fret51"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret52"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="2"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret53"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="3"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret54"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="4"
android:textColor="#ffffff" />
<Button
android:id="#+id/fret55"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/finger1"
android:text="1"
android:textColor="#ffffff" />
<Button
android:id="#+id/empty12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
<Button
android:id="#+id/empty13"
android:layout_width="0dp"
android:layout_height="10dp"
android:layout_weight="1.15"
android:text=""
android:visibility="invisible" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton"
android:clickable="false"
android:checked="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton2"
android:clickable="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton3"
android:clickable="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton4"
android:clickable="false"
android:visibility="gone" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/radioButton5"
android:clickable="false"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
My drawables:

You can move all your dp values to dimen.xml, dimen.xml(large), etc. , and set different values for all screensizes.

You have to create different layouts (.xmls) for different different screen resolutions and place it in layout folder accordingly
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
Or else you have to create layout without hardcoded heights or widths and with the help of scrollViews you can access that view

Custom Alert button overlapping

Ok i successfully created a custom alert and when i ran it the format is the same as in xml but after re-running it for the nth time suddenly the buttons overlap and I dont know how to fix it so can you pls help me out on this?.
alert.xml(output should be):
wrong output:
xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#595959">
<EditText
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" />
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_alignParentLeft="true"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/orderQuantity"
android:layout_toRightOf="#+id/b4"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_centerHorizontal="true"
android:text="3" />
<Button
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/b2"
android:text="4" />
<Button
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b2"
android:layout_toLeftOf="#+id/b3"
android:text="5" />
<Button
android:id="#+id/b6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/b5"
android:layout_alignBottom="#+id/b5"
android:layout_alignLeft="#+id/b3"
android:text="6" />
<Button
android:id="#+id/b7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b4"
android:layout_toLeftOf="#+id/b5"
android:text="7" />
<Button
android:id="#+id/b8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b4"
android:layout_toRightOf="#+id/b4"
android:text="8" />
<Button
android:id="#+id/b9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/b6"
android:layout_below="#+id/b6"
android:text="9" />
<Button
android:id="#+id/b0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b8"
android:layout_toLeftOf="#+id/b9"
android:text="0" />
<Button
android:id="#+id/addCart"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b0"
android:layout_alignParentLeft="true"
android:layout_below="#+id/b7"
android:layout_toLeftOf="#+id/b0"
android:text="ADD" />
<Button
android:id="#+id/cancel"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b0"
android:layout_alignRight="#+id/b9"
android:layout_below="#+id/b9"
android:layout_toRightOf="#+id/b0"
android:text="BACK" />
</RelativeLayout>

Use LinearLayout instead of RelativeLayout. And remove these in Buttons:
android:layout_alignParentLeft="true"
after that it should be fine.
EDIT: Not just left alignment directives, but all alignment directives.

i would suggest you to use TableLayout ... very easy to understand and fits what you want perfectly and its easy to reuse or modify later ... your code ...
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<EditText
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="2" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="3" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="4" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="5" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="6" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="7"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="8"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="9" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Add"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="0"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="OK"/>
</TableRow>
</TableLayout>

Organize each row as below...
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_alignParentLeft="true"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/orderQuantity"
android:layout_toLeftOf="#+id/b3"
android:layout_toRightOf="#+id/b1"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_toRightOf="#+id/b2"
android:layout_centerHorizontal="true"
android:text="3" />

Ok after analyzing i was able to see whats wrong.
This
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_centerHorizontal="true"
android:text="3" />
Should be :
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:text="3" />

I would do something like this:
<?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="wrap_content"
android:orientation="vertical"
android:background="#595959">
<EditText
android:id="#+id/orderQuantity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number"/>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b1"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="1"/>
<Button
android:id="#+id/b2"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="2"/>
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="3"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b4"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="4"/>
<Button
android:id="#+id/b5"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="5"/>
<Button
android:id="#+id/b6"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="6"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b7"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="7"/>
<Button
android:id="#+id/b8"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="8"/>
<Button
android:id="#+id/b9"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="9"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b0"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="0"/>
<Button
android:id="#+id/addCart"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="ADD"/>
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="BACK"/>
</LinearLayout>
</LinearLayout>

emulator output different from layout view in android

In the layout view my calculator program looks like this
But when I run my program, it looks like this
Why is this happening?
This is the layout file code:
<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" >
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/button_0"
android:onClick="onClkBn0" />
<Button
android:id="#+id/button_dot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button0"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/button0"
android:text="#string/button_dot"
android:onClick="onClkBnDot"/>
<Button
android:id="#+id/button_res"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button0"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/button_dot"
android:text="#string/button_res"
android:onClick="onClkBnRes"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="#+id/button0"
android:text="#string/button_1"
android:onClick="onClkBn1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_toRightOf="#+id/button1"
android:layout_above="#+id/button_dot"
android:text="#string/button_2"
android:onClick="onClkBn2"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:layout_above="#+id/button_res"
android:text="#string/button_3"
android:onClick="onClkBn3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button1"
android:layout_alignLeft="#+id/button1"
android:text="#string/button_4"
android:onClick="onClkBn4"/>
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button4"
android:layout_alignLeft="#+id/button2"
android:text="#string/button_5"
android:onClick="onClkBn5"/>
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button5"
android:layout_alignLeft="#+id/button3"
android:text="#string/button_6"
android:onClick="onClkBn6"/>
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button4"
android:layout_alignLeft="#+id/button4"
android:text="#string/button_7"
android:onClick="onClkBn7"/>
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button7"
android:layout_alignBottom="#+id/button7"
android:layout_toRightOf="#+id/button4"
android:text="#string/button_8"
android:onClick="onClkBn8"/>
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button6"
android:layout_alignLeft="#+id/button6"
android:text="#string/button_9"
android:onClick="onClkBn9"/>
<Button
android:id="#+id/button_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button_res"
android:layout_alignBottom="#+id/button_res"
android:layout_toRightOf="#+id/button_res"
android:text="#string/button_plus"
android:onClick="onClkBnPlus"/>
<Button
android:id="#+id/button_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_plus"
android:layout_alignLeft="#+id/button_plus"
android:text="#string/button_minus"
android:onClick="onClkBnMinus"/>
<Button
android:id="#+id/button_mul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button_minus"
android:layout_below="#+id/button9"
android:text="#string/button_mult"
android:onClick="onClkBnMult"/>
<Button
android:id="#+id/button_div"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button9"
android:layout_alignLeft="#+id/button_mul"
android:text="#string/button_div"
android:onClick="onClkBnDiv"/>
<Button
android:id="#+id/button_can"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/button_div"
android:layout_centerVertical="true"
android:text="#string/button_cancel"
android:onClick="onClkBnCan"/>
<TextView
android:id="#+id/mantissa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_can"
android:layout_alignParentLeft="true"
android:gravity="right"
android:text="#string/mantissa_default"
android:textIsSelectable="true"
android:textSize="30.0sp" />
<Button
android:id="#+id/button_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/mantissa"
android:layout_above = "#+id/button9"
android:layout_alignLeft="#+id/button9"
android:layout_toRightOf="#+id/button_can"
android:onClick="onClkBnOff"
android:text="#string/button_off" />
</RelativeLayout>

Your emulator is doing what you ask. This code :
android:layout_centerVertical="true"
puts the "c" button in the middle of the view, vertically. Then your mantissa view sits atop that view because of this:
android:layout_above="#+id/button_can"
Your off button is coerced into stretching from the mantissa view down to button_9 because of these lines:
android:layout_below="#+id/mantissa"
android:layout_above = "#+id/button9"
Here is one solution that should work for you:
<Button
android:id="#+id/button_can"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/button_div"
android:layout_above="#id/button_div"
android:text="#string/button_cancel"
android:onClick="onClkBnCan"/>
<TextView
android:id="#+id/mantissa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button_can"
android:layout_alignParentLeft="true"
android:gravity="right"
android:text="#string/mantissa_default"
android:textIsSelectable="true"
android:textSize="30.0sp" />
<Button
android:id="#+id/button_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above = "#id/button9"
android:layout_alignLeft="#id/button9"
android:layout_toRightOf="#id/button_can"
android:onClick="onClkBnOff"
android:text="#string/button_off" />
Also, you should only use the + in strings like "#+id/button9" on the first use of that label. Subsequent references for it would be "#id/button9"

I think you should better use a couple of LinearLayout to get the aspect you want.
Thanks to android:layout_weight you will be able to have the same layout aspect on several screen sizes and density.
Here is a code example showing what you want, the way you want on several screen sizes/devices density:
<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" >
<TextView
android:id="#+id/mantissa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="right"
android:text="#string/mantissa_default"
android:textIsSelectable="true"
android:textSize="30.0sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/mantissa"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25" />
<Button
android:id="#+id/button_off"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnOff"
android:text="#string/button_off" />
<Button
android:id="#+id/button_can"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnCan"
android:text="#string/button_cancel" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn7"
android:text="#string/button_7" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn8"
android:text="#string/button_8" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn9"
android:text="#string/button_9" />
<Button
android:id="#+id/button_div"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnDiv"
android:text="#string/button_div" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn4"
android:text="#string/button_4" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn5"
android:text="#string/button_5" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn6"
android:text="#string/button_6" />
<Button
android:id="#+id/button_mul"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnMult"
android:text="#string/button_mult" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_above="#+id/button0"
android:layout_weight="0.25"
android:onClick="onClkBn1"
android:text="#string/button_1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_above="#+id/button_dot"
android:layout_weight="0.25"
android:onClick="onClkBn2"
android:text="#string/button_2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn3"
android:text="#string/button_3" />
<Button
android:id="#+id/button_minus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnMinus"
android:text="#string/button_minus" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn0"
android:text="#string/button_0"/>
<Button
android:id="#+id/button_dot"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnDot"
android:text="#string/button_dot" />
<Button
android:id="#+id/button_res"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnRes"
android:text="#string/button_res"/>
<Button
android:id="#+id/button_plus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnPlus"
android:text="#string/button_plus" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>