Android Widget basic design

Question

I am trying to create very simple widget design. For the past two days I am still not able to complete it and I would appreciate your help.

What I am trying to do is something looks like this design:

Please note the size of the image buttons is 16pd for both height and width.

<?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"
    android:gravity="center"
    android:layout_margin="4dp"
    android:background="@drawable/background" >

     <TextView
        android:id="@+id/tvDisplayer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HDisplaer"
        android:textSize="25px" 
        android:gravity="center"/>


     <TextView
        android:id="@+id/tvsmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="7px" 
        android:gravity="center"/>


     <ImageButton
         android:id="@+id/imRefresh"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/refresh"
         android:layout_gravity="left" />

     <ImageButton
         android:id="@+id/imOpen"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/aboutus"
         android:layout_gravity="right" />

</LinearLayout>

Answer 1

Try this

<?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" >

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="50dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_centerInParent="true"
        android:text="TextView" />
</RelativeLayout>

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/relativeLayout1"
    android:src="@drawable/black" />

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignTop="@+id/imageButton2"
    android:src="@drawable/black" />

Just increase the height of the 2nd relative layout to bring it down.

Answer 2

Try this:

Just use two LinearLayout one for horizontal and other for vertical.

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_margin="4dp"
    android:background="@drawable/background" >

     <TextView
        android:id="@+id/tvDisplayer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HDisplaer"
        android:textSize="25px" 
        android:gravity="center"/>
     <TextView
        android:id="@+id/tvsmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="7px" 
        android:gravity="center"/>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:layout_margin="4dp"
 >

     <ImageButton
         android:id="@+id/imRefresh"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="left" />

     <ImageButton
         android:id="@+id/imOpen"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="right" />
    </LinearLayout>
</LinearLayout>

Answer 3

Wrap the ImageButtons with a RelativeLayout! Otherwise the code seems to be ok.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageButton
         android:id="@+id/imRefresh"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/refresh"
         android:layout_alignParentLeft="true" />

     <ImageButton
         android:id="@+id/imOpen"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/aboutus"
         android:layout_alignParentRight="true" />

</RelativeLayout>

If the TextViews are not centered, then wrap them with another RelativeLayout, and add to each TextView this line: android:layout_centerHorizontal="true"