creating LinearLayout item view

Question

i've been creating a linearLayout item in xml at the end it should look like :

here is the code i wrote :

<LinearLayout
                android:id="@+id/photoslayout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/lightSeperator"
                android:orientation="vertical" >

                <!-- Review -->
//item starts here
                <LinearLayout
                    android:id="@+id/one_photo_layout"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:background="@drawable/menu_button_bg"
                    android:orientation="vertical" >

                    <LinearLayout
                        android:id="@+id/top_layout"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:orientation="horizontal" >

                        <ImageView
                            android:id="@+id/photo"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:visibility="visible" />

                        <TableLayout
                            android:id="@+id/table"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" >

                            <TableRow
                                android:id="@+id/row"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content" >

                                <ImageButton
                                    android:id="@+id/delete_pic"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:background="@drawable/delete_button_bg" />

                                <TextView
                                    android:id="@+id/text"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content" />
                            </TableRow>
                        </TableLayout>
                    </LinearLayout>
                </LinearLayout>

                <!-- Photos -->

            </LinearLayout>

and i cant get the result i need.. maybe someone could show me good tutorial site or help with this xml ?

Answer 1

LinearLayout is not the right approach here. What you want is a RelativeLaout with the image on the left, the delete button on the right and the text in the middle - something like this:

<RelativeLayout
    android:id="@+id/photoslayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/lightSeperator"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:visibility="visible" />

    <ImageButton
        android:id="@+id/delete_pic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/delete_button_bg" />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/photo"
        android:layout_toLeftOf="@id/delete_pic" />

</RelativeLayout>

Answer 2

It is better to use Relative layout in your case

http://developer.android.com/guide/topics/ui/layout/relative.html‎