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.

score 1 · Accepted Answer · answered Jan 12 '17 at 15:06

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)
            }
        }
    });

score 0 · Answer 2 · edited Jan 12 '17 at 12:59

0

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>

edited Jan 12 '17 at 12:59

David

306
6
20

answered Jan 12 '17 at 12:02

ROBOHORSE

11
2

useless! try adding more textviews – Sadiq Md Asif Jan 12 '17 at 12:11
Do you can use one textView? It works for one item. Just fill your one with all text – ROBOHORSE Jan 12 '17 at 12:14
also you can use [spannable](https://developer.android.com/reference/android/text/Spannable.html) for customizing or html code like [this](http://stackoverflow.com/a/2116191/4357850) – ROBOHORSE Jan 12 '17 at 12:17
@ROBOHORSE text view need to grow on upwards.. don't want scrollable... – khaleel_jageer Jan 12 '17 at 12:24

How to achieve this view in android xml?

2 Answers2