Question

I am trying to achieve this user interface

through the layout. But getting issues in the alignments. Along with this, which is the best way either to use LinearLayout or RelativeLayout in general? Getting many references suggesting both.

here is my xml:

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

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="400dp"

    android:src="@drawable/splash_landscape" />

<TextView
    android:layout_width="301dp"
    android:layout_height="100dp"
    android:text="Product Name" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="323dp"
    android:layout_height="82dp"
    android:text="TextView" />

<LinearLayout 
     android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:layout_width="300dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>
        <RelativeLayout >
    <TextView android:layout_width="200dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>

</RelativeLayout>
<RelativeLayout >
    <TextView android:layout_width="200dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>
    <TextView android:layout_width="200dp"
android:layout_height="100dp"
android:text="Product Name"
></TextView>

</RelativeLayout>



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

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

Answer 1

I have tried the above layout and I reached to near that. Below is the xml file and screen shot

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

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="60dip"
        android:orientation="vertical" android:background="#c0c0c0">

        <Button
            android:id="@+id/button8"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="Button" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" android:layout_marginTop="5dip">

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff">
 <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_marginTop="5dip">

     <Button
         android:id="@+id/button3"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

        </LinearLayout>
         <LinearLayout
            android:id="@+id/linearLayout5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_marginTop="5dip">
 <LinearLayout
            android:id="@+id/linearLayout7"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">

     <Button
         android:id="@+id/button1"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

        </LinearLayout>
         <LinearLayout
            android:id="@+id/linearLayout8"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">

             <Button
                 android:id="@+id/button2"
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:text="Button" />

        </LinearLayout>
        </LinearLayout>
         <LinearLayout
            android:id="@+id/linearLayout6"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_marginTop="5dip">
 <LinearLayout
            android:id="@+id/linearLayout9"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">

     <Button
         android:id="@+id/button4"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

        </LinearLayout>
         <LinearLayout
            android:id="@+id/linearLayout10"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" android:layout_toLeftOf="@+id/linearLayout3" android:layout_alignParentLeft="true" android:background="#fff" android:layout_weight="1">

             <Button
                 android:id="@+id/button5"
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:text="Button" />

        </LinearLayout>
        </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="70dip"
            android:layout_height="wrap_content"
            android:orientation="vertical" android:layout_alignParentRight="true" android:background="#c0c0c0" android:layout_alignBottom="@+id/linearLayout2" android:layout_alignTop="@+id/linearLayout2">

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="Button" />

        </LinearLayout>

    </RelativeLayout>

  <LinearLayout
      android:id="@+id/linearLayout11"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:background="#c0c0c0"
      android:orientation="horizontal" android:layout_marginTop="5dip">

            <Button
                android:id="@+id/button6"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button" android:layout_weight="1"/>

            <Button
                android:id="@+id/button7"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button" android:layout_weight="1"/>

        </LinearLayout>
          <LinearLayout
            android:id="@+id/linearLayout12"
            android:layout_width="fill_parent"
            android:layout_height="30dip"
            android:orientation="vertical" android:layout_alignParentRight="true" android:background="#c0c0c0" android:layout_marginTop="5dip">

            <Button
                android:id="@+id/button6"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

        </LinearLayout>
          <LinearLayout
            android:id="@+id/linearLayout13"
            android:layout_width="fill_parent"
            android:layout_height="60dip"
            android:orientation="vertical" android:layout_alignParentRight="true" android:background="#c0c0c0" android:layout_marginTop="5dip">

            <Button
                android:id="@+id/button6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="Button" />

        </LinearLayout>
</LinearLayout>