How to include an image (would take 50% of the height) and several texts views on the same layout?

Question

For several days I've been dealing with an issue I can't manage to resolve by myself.

I'm building an Android app on which a list of news would show, one news by page or view on the Android phone. I would just need to scroll down to look at the second, third, etc. news. Basically I wish to have an image that would take the first half of the screen and the other half of the screen would be showing textviews.

I've found several interesting answers like Make image appear half of the screen or Android: 2 relative layout divided in half screen nut none could solve my problem.

As you will see, I have 2 layouts which are part of a linear layout.

I cannot manage to get only the content of one news (1 image and the 4 textviews) in one single view that would take 100% of the layout height. And I'm looking for the same result for each news.

It should be something like Flipboard app, in case you've heard about this app.

Here's my xml file :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:transitionGroup="false"
    android:weightSum="2">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/news_hockey2"
            android:adjustViewBounds="true"
            />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="47dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="title"
                android:id="@+id/title"
                android:textIsSelectable="true"
                android:layout_weight="0.1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:id="@+id/date_of_pub_list"
                android:text="date_of_pub"
                android:layout_weight="0.1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="121dp"
                android:text="article"
                android:id="@+id/article"
                android:layout_marginBottom="10dp"
                android:layout_weight="0.2"
                android:phoneNumber="false" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="link"
                android:id="@+id/link"
                android:layout_marginBottom="15dp"
                android:layout_weight="0.1" />

        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

score 0 · Answer 1 · answered May 19 '15 at 21:25

There's no reason for you to wrap the ImageView or the LinearLayout with the textViews in RelativeLayouts. Remove those and set the Linearlayout and ImageView to:

android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"

How to include an image (would take 50% of the height) and several texts views on the same layout?

1 Answers1