Android layout with 2 images leaving whitespace at the bottom

Question

I am trying to create a layout that would always display 2 images, splitting the screen length equally into half, leaving no whitespace on screen (even if the images are center cropped).

So far I have the following code, but this leaves a lot of empty white space at the bottom of the screen. The reason I use "RelativeLayout" within the "LinearLayout" is because I want my text1 view to come at the lower portion of my image 1 (overlapping the image1).

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="230dp"
    android:layout_marginBottom="3dp" >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:contentDescription="@string/picture"
        android:scaleType="centerCrop" />

   <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:padding="5dp"
        android:textColor="#fff" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="230dp"
    android:layout_marginBottom="3dp" >

    <ImageView
        android:id="@+id/img2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:contentDescription="@string/picture"
        android:scaleType="centerCrop" /> 

</RelativeLayout>

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

You are hardcoding the height to 230dp for each layout which could be causing the problem. In the Linear layout you should use weights to distribute the screen area equally.

Use android:layout_weight="1" in both the relative layouts

Check here for more information

Android: 2 relative layout divided in half screen

edited May 23 '17 at 10:27

Community

1
1

answered Feb 02 '14 at 04:03

Ajit Pratap Singh

1,299
12
24

score 1 · Answer 2 · answered Feb 02 '14 at 04:31

1

The layout you are describing is a simple, weighted LinearLayout. Simply add the following attribute to your LinearLayout:

android:weightSum="2"

Then for each RelativeLayout, change the height attribute to:

android:layout_height="0px"

And add the following attribute to the same RelativeLayouts:

android:layout_weight="1"

answered Feb 02 '14 at 04:31

Phil

35,852
23
123
164

Thanks! This works, but from my understanding of weightSum, we don't really need to specify it as long as it is the sum of the weights of the children. – KT100 Feb 02 '14 at 09:42

score 0 · Answer 3 · answered Feb 02 '14 at 04:46

try to use the frame layout if you want to overlap the textview on image view and use layout weight on the frame layout

Sample code for layout xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="3dp"
    android:layout_weight="0.5" >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Test"
        android:gravity="center"
        android:layout_gravity="center_vertical|bottom"
        android:padding="5dp"
        android:textColor="@android:color/black" />
</FrameLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="3dp"
    android:layout_weight="0.5" >

    <ImageView
        android:id="@+id/img2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:scaleType="centerCrop" />
</FrameLayout>

Android layout with 2 images leaving whitespace at the bottom

3 Answers3