How to create a custom layout in android?

Question

Im trying to build a layout like the image below, but i cant figure that out. I have tried building that with relative layot but the viewFlipper overlays with videoView on center. Here is my main layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/blue_divi"
    tools:context=".MainActivity" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="63.85dp"
        android:id="@+id/imageView"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/foto_lart"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_alignParentEnd="true"
        android:layout_above="@+id/viewFlipper"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY" />


    <VideoView
        android:id="@+id/myvideoview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginEnd="206dp"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/imageView"
        android:scaleType="fitXY"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="55dp"
        android:layout_alignParentBottom="true" />

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:layout_toEndOf="@+id/ticker"
       android:layout_below="@+id/imageView"
       android:layout_alignBottom="@+id/myvideoview"
       android:id="@+id/linearLayout">

       <ViewFlipper
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:id="@+id/viewFlipper"
           android:animateFirstView="true"
           android:scaleType="fitXY"
           android:foregroundGravity="fill" />
   </LinearLayout>


    <TextView
        android:id="@+id/ticker"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        android:textColor="@color/blue_divi"
        android:textSize="25sp"
        android:textStyle="bold"
        android:text="@string/marquee"
        android:lines="1"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:fadingEdge="horizontal"
        android:scrollHorizontally="true"
        android:enabled="true"
        android:maxLines="1"
        android:foregroundGravity="center_vertical|center_horizontal"
        android:scrollIndicators="left"
        android:layout_above="@+id/webView"
        android:layout_alignParentStart="true"
        android:layout_alignEnd="@+id/myvideoview" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:id="@+id/table"
        android:layout_alignParentBottom="true"
        android:layout_alignEnd="@+id/linearLayout"
        android:layout_below="@+id/linearLayout"

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="60dp">

         <TextView   
            android:layout_width="match_parent"
            android:id="@+id/text1"
            android:layout_height="20dp"
            />
         <TextView   
            android:layout_width="match_parent"
            android:id="@+id/text2"
            android:layout_height="20dp"
            />  
          <TextView   
            android:layout_width="match_parent"
            android:id="@+id/text3"
            android:layout_height="20dp"
            />   
         </TableRow>   


</RelativeLayout>

Answer 1

Using LinearLayout this way.. make sure to change the image/text/color etc..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/holo_blue_light"
    android:weightSum="10"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8"
        android:orientation="horizontal">


        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="0dp"
            android:layout_weight="8"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <VideoView
                android:id="@+id/myvideoview"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="5"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/ticker"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="marquee"
                android:enabled="true"
                android:fadingEdge="horizontal"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:lines="1"
                android:marqueeRepeatLimit="marquee_forever"
                android:maxLines="1"
                android:scrollHorizontally="true"
                android:scrollIndicators="left"
                android:singleLine="true"
                android:text="marquee"
                android:textColor="@android:color/white"
                android:textSize="25sp"
                android:textStyle="bold" />
        </LinearLayout>

        <ViewFlipper
            android:id="@+id/viewFlipper"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:animateFirstView="true"
            android:layout_weight="1"
            android:foregroundGravity="fill"
            android:scaleType="fitXY" />
    </LinearLayout>


    <TableLayout
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/text1"
                android:layout_width="match_parent"
                android:layout_height="20dp" />

            <TextView
                android:id="@+id/text2"
                android:layout_width="match_parent"
                android:layout_height="20dp" />

            <TextView
                android:id="@+id/text3"
                android:layout_width="match_parent"
                android:layout_height="20dp" />
        </TableRow>
    </TableLayout>

</LinearLayout>