How Can I make a android xml view as this

Question

I wanted to create an xml layout similiar to this, but my xml code didn't work out.

Here's my xml file:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_margin="5dp"
    android:layout_weight="1"
    android:background="#FFFFFFFF" >

    <ImageButton
        android:name = "@+id/switchOriginDest"
        android:src="@drawable/switchorigdest"
        android:layout_height = "fill_parent"
        android:layout_width = "wrap_content"
        android:layout_alignParentLeft="true" />

    <TextView
        android:id="@+id/Origin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/rounded_edge"
        android:padding="6dip"
        android:hint="@string/mycurrentpos" />

    <TextView
        android:id="@+id/Destination"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/rounded_edge"
        android:layout_below="@id/Origin"
        android:hint="@string/desthint"
        android:padding="6dip" />

</RelativeLayout>

What I have now is

----------UPDATE------------

Setting the layout_width of TextView to a fixed number solved the problem. However can anyone kindly answer some follow up questions from me?

1. isn't 0dp making the component automatically take up the remaining space. how come it didn't work in this case.

2. How can I make the red and green circle as shown in the example?

Answer 1

try this(Modify it as per your need):

Using Linear Layout:

<?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="wrap_content"
    android:layout_margin="5dp"
    android:weightSum="1"
    android:orientation="horizontal" >

    <ImageButton
        android:name="@+id/switchOriginDest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@drawable/back_arrow" />
   <LinearLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
       >
       <TextView
        android:id="@+id/Origin"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="6dip"
        android:textSize="30sp"
        android:hint="mycurrentpos" />

    <TextView
        android:id="@+id/Destination"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="desthint"
        android:textSize="30sp"
        android:padding="6dip" />
   </LinearLayout>
</LinearLayout>

hope it will help.

Using Relative layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/switchOriginDest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/back_arrow" />

    <TextView
        android:id="@+id/Origin"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/switchOriginDest"
        android:hint="mycurrentpos"
        android:padding="6dip"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/Destination"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/Origin"
        android:layout_toRightOf="@+id/switchOriginDest"
        android:hint="desthint"
        android:padding="6dip"
        android:textSize="30sp" />

</RelativeLayout>

Answer 2

The layout_width set do 0dp is not clear in your example. It's a good habit to set it if you use the weight to manage size, but your not setting any weight for your layout size.

try to use wrap_content or some fixed size and see if it helps :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="0dp" //here it seems ok, since you set the weight to 1
    android:layout_margin="5dp"
    android:layout_weight="1"
    android:background="#FFFFFFFF" >

    <ImageButton
        android:name = "@+id/switchOriginDest"
        android:src="@drawable/switchorigdest"
        android:layout_height = "fill_parent"
        android:layout_width = "50dp"  //since you src image is bigger than what you need to display, you can't rely on wrap content here ;)
        android:layout_alignParentLeft="true" />

    <TextView
        android:id="@+id/Origin"
        android:layout_width="200dp"  //lets try with this size.
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/rounded_edge"
        android:padding="6dip"
        android:hint="@string/mycurrentpos" />

    <TextView
        android:id="@+id/Destination"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true" //you probably want to align that on the bottom ?
        android:background="@drawable/rounded_edge"
        android:layout_below="@id/Origin"
        android:hint="@string/desthint"
        android:padding="6dip" />

</RelativeLayout>

More informations about using 0dp sizes here.