Change background position/gravity in ImageButton

Question

I have the next view:

And I want it to look like this:

In the first one, the background of the green ImageButton is in the top-Left corner. And in the second, the background of the green ImageButton is in the center. (The background image is in the size of the green square)

Here is my XML code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content" android:layout_height="wrap_content">
    <ImageButton android:id="@+id/dialer"
               android:layout_alignParentTop="true"
               android:layout_alignParentLeft="true" 
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:background="@drawable/btncall"
               android:scaleType="centerInside"/>
    <Button android:id="@+id/sendSMS"
               android:layout_alignParentTop="true"
               android:layout_alignParentRight="true"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Send SMS"/>
    <Button android:id="@+id/four"
               android:layout_alignParentBottom="true"
               android:layout_alignParentLeft="true"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <Button android:id="@+id/shutDownDevice"
               android:layout_alignParentBottom="true"
               android:layout_alignParentRight="true"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Turn Off"/>
    </RelativeLayout>

Where

android:background="@drawable/btncall"

refers to btncall.xml that look like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/phone_down" 
          android:state_pressed="true" />
    <item android:drawable="@drawable/phone_down"
          android:state_focused="true" />
    <item android:drawable="@drawable/phone_up" />
</selector>

I'm a beginner with android, so if you see better way to create this wiew , plz tell me.

10x a lot, Ryan.

---

In Addtion, this is part of the code in the main Java file:

...
//Get width and Height of screen
        Display display = getWindowManager().getDefaultDisplay(); 
        int halfStageWidth = display.getWidth()/2;
        int halfStageHeight = display.getHeight()/2;


        //Get an instance of the Dialer button
        ImageButton btnDialer = (ImageButton) findViewById(R.id.dialer);


        Button btnSendSMS = (Button) findViewById(R.id.sendSMS);
        btnSendSMS.setWidth(halfStageWidth);
        btnSendSMS.setHeight(halfStageHeight);
        Button btnShutDownDevice = (Button) findViewById(R.id.shutDownDevice);
        btnShutDownDevice.setWidth(halfStageWidth);
        btnShutDownDevice.setHeight(halfStageHeight);
        Button B4 = (Button) findViewById(R.id.four);
        B4.setWidth(halfStageWidth);
        B4.setHeight(halfStageHeight); ...

Answer 1

You are doing it in a way that is much too complicated, this can be done only by XML without needing java code.

Your XML should be:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <ImageButton
        android:id="@+id/dialer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/btncall"
        android:background="@android:color/transparent"
        android:scaleType="centerInside" 
        android:layout_weight="1"/>
    <Button
        android:id="@+id/sendSMS"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Send SMS"
        android:layout_weight="1" />
</LinearLayout>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <Button
        android:id="@+id/four"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:layout_weight="1"/>
    <Button
        android:id="@+id/shutDownDevice"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Turn Off" 
        android:layout_weight="1"/>
</LinearLayout>

Answer 2

You haven't set the size of the imagebutton so it wraps around the image. you should set the size and it should center inside the button.

Update:

You can set a layout size like this:

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(width,height);
// Add relativeLayout rules here
btnDialer.setLayoutParams(params);