How to achieve this view in android xml?

Question

In my application I need to create a screen like this.

Diamond icon should be in center of the screen when the text is less. But when the text is more the icon should aligned to the top of the textview.

Here is my code:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:orientation="vertical">

<RelativeLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_bg_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/series_banner_gradient" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:overScrollMode="ifContentScrolls">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="17dp"
            android:paddingEnd="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:paddingStart="30dp"
            android:paddingTop="18dp">

            <android.support.v4.widget.Space
                android:id="@+id/top_space"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_alignParentTop="true" />

            <ImageView
                android:id="@+id/iv_btn_play"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_above="@+id/ll_content"
                android:layout_centerInParent="true"
                android:contentDescription="@string/app_name"
                android:src="@drawable/play" />

            <LinearLayout
                android:id="@+id/ll_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="bottom"
                android:orientation="vertical">

                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="20dp" />

                <TextView
                    android:id="@+id/txt_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="11dp"
                    android:ellipsize="end"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state. "
                    android:textColor="@color/white"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/txt_description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="20dp"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state.India has its first fully organic state.India has its first fully organic state.India has its first fully organic state."
                    android:textColor="@color/white"
                    android:textSize="16sp" />

                <android.support.v4.widget.Space
                    android:id="@+id/bottom_space"
                    android:layout_width="match_parent"
                    android:layout_height="40dp" />
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>
</FrameLayout>

I don't have any idea how to do this. I don't want complete code.

Answer 1

You can set the height of space between title text and imageview programmatically.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:orientation="vertical" >

<RelativeLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/iv_bg_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/series_banner_gradient" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:overScrollMode="ifContentScrolls" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="17dp"
            android:paddingEnd="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:paddingStart="30dp"
            android:paddingTop="18dp" >

            <android.support.v4.widget.Space
                android:id="@+id/top_space"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_alignParentTop="true" />

            <LinearLayout
                android:id="@+id/ll_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="bottom|center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/iv_btn_play"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/play" />

                <android.support.v4.widget.Space
                    android:id="@+id/middle_space"
                    android:layout_width="match_parent"
                    android:layout_height="20dp" />

                <TextView
                    android:id="@+id/txt_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="11dp"
                    android:ellipsize="end"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state."
                    android:textColor="@color/white"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/txt_description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="20dp"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state."
                    android:textColor="@color/white"
                    android:textSize="16sp" />

                <android.support.v4.widget.Space
                    android:id="@+id/bottom_space"
                    android:layout_width="match_parent"
                    android:layout_height="40dp" />
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

        txt_title.post(new Runnable() {
        @Override
        public void run() {
            int titleHeight = txt_title.getHeight();
            int descHeight = txt_description.getHeight();
            int windowHeight = getWindowHeight();
            int marginsDP = paddingBottom + bottomSpaceHeight + marginBottomDesc
                    + paddingBottomTitle + btnPlayHeight / 2;
            int marginsPX = convertDpToPixel(marginsDP);
            int spaceHeight = windowHeight / 2 - marginsPX - titleHeight - descHeight;
            // Log.i("log", "spaceHeight: " +spaceHeight);
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) middle_Space
                    .getLayoutParams();
            if (spaceHeight > 0) {
                params.height = spaceHeight;
                middle_Space.setLayoutParams(params);
            } else {
                params.height = 0;
                middle_Space.setLayoutParams(params); // or
                                                        // setVisibility(View.GONE)
            }
        }
    });

Answer 2

this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

   <ImageView
       android:id="@+id/imageDiamond"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:src="@drawable/app_icon" />

   <ScrollView
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_alignParentBottom="true"
       android:layout_below="@+id/imageDiamond"
       android:layout_centerHorizontal="true">

      <TextView
           android:id="@+id/textView"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="bottom"
           android:gravity="bottom" />
   </ScrollView>
</RelativeLayout>