Design: android TableLayout

Question

This is my first android application, I face a bunch of problems. I want to make a design like in this image:

I tried many solutions to do it, but nothing work. This is my code:

<TableLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >
<View
            android:layout_height="2dip"
            android:background="@color/dark_blue"/>
        <!--Product information-->
        <TableRow android:id="@+id/product_info">
            <ImageView android:id="@+id/product_img"
                       android:src="@drawable/mdpi_product_verify_scan_code"
                       android:layout_width="fill_parent"
                       android:layout_height="fill_parent"
                       android:layout_weight="1"
                    />
            <TextView android:id="@+id/tvdesc"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      android:layout_weight="2"
                      android:text="description description description "
                      android:textColor="@color/black"
                    />
        </TableRow>

<View
            android:layout_height="2dip"
            android:background="@color/dark_blue"/>

        <!--Images button-->
        <TableRow
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                >
            <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Product Description"
                    android:textColor="@color/black"
                    android:textAppearance="?android:textAppearanceMedium"
                    />
            <FrameLayout
                    android:background="@color/dark_blue"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|left"
                    android:padding="5dp">
            <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/mdpi_btn_show_images_icon"
                    android:background="@android:color/transparent"
                    />
                <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                    android:text="Images"/>
            </FrameLayout>
        </TableRow>

        <TableRow android:id="@+id/product_info">
            <ImageView android:id="@+id/ima"
                       android:src="@drawable/mdpi_product_verify_scan_code"
                       android:layout_width="fill_parent"
                       android:layout_height="fill_parent"
                       android:layout_weight="1"
                    />
            <TextView android:id="@+id/tv2"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      android:layout_weight="2"
                      android:text="description description description "
                      android:textColor="@color/black"
                    />
        </TableRow>

        <!--Verification -->
        <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                android:text="product verification"
                android:textAppearance="?android:textAppearanceMedium"
                android:textColor="@color/green"/>
        </TableRow>
        <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This product can be verified. Tap on the VERIFY PRODUCT button above."
                    android:textColor="@color/green"/>
        </TableRow>
        
    </TableLayout>

and this the result

as you can see, all the elements are messed up and the images button disappear also when i set the gravity left the images disappear and the text stay where they are, nothing change.

This image shows what are the problems:

1. How to make each text on a row.
2. Set the image at the left (the gravity left didn't work)
3. How to draw a vertical line?
4. How can i put image with the text?( i was using the span but it's work just for one row here i have two text rows, is there anyway to merge two vertical cells).
5. The images button disappear.

Thanks for any help.

Answer 1

I guess this should help you a bit understand how it works. I manage to do something that looks like what you might need

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

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Tap to Verify Product" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="16dp"
            android:src="@drawable/ic_launcher" />

        <View
            android:id="@+id/view1"
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="22dp"
            android:layout_toRightOf="@+id/imageView1"
            android:background="@android:color/darker_gray" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView1"
            android:layout_alignLeft="@+id/textView2"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/textView3"
            android:layout_alignLeft="@+id/textView1"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/textView2"
            android:layout_marginLeft="21dp"
            android:layout_toRightOf="@+id/view1"
            android:text="TextView" />
    </RelativeLayout>

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="46dp" >

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="22dp"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="20dp"
            android:src="@drawable/ic_launcher" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView" />

</LinearLayout>

Try it out in your IDE and from that, if you need further helps, I'll see what I can do.