Empty space in RelativeLayout

Question

I try to use RelativeLayout to make an image over another, but needless empty space appears.

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

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="12dp"
    android:paddingRight="12dp"
    android:paddingTop="12dp"
    android:gravity="top">

    <ImageView
        android:id="@+id/heroImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test3"
        android:layout_alignParentTop="true"
        android:scaleType="fitStart" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/corner" />

</RelativeLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF"
    android:id="@+id/linearlayout_hero">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hero Appearance"/>
</LinearLayout>

You can see it between the image of Wolverine and text.

Can you define what you mean with "needless empty space"? You've provided 12dp of padding, and your image is a different aspect ratio than the frame in which it would reside. The only way you could fit the image in the space is to stretch it or clip the left and right sides. — Paul Lammertsma, Sep 30 '15 at 23:10

Aakash · Accepted Answer · 2015-09-30T21:32:41.020

3

Add this to your ImageView

android:scaleType="fitStart"
android:adjustViewBounds="true"

edited Sep 30 '15 at 21:32

answered Sep 30 '15 at 20:10

Aakash

5,181
5
20
37

it stretches image over the space, but I need image to stay square. – Sigmund Sep 30 '15 at 20:38
How do you imagine the image should appear? Clipping the left and right sides? – Paul Lammertsma Sep 30 '15 at 20:45
in that case you can use frame layout, in your case the image has spaces on its sides so you either need to remove those spaces or use frame layout – Aakash Sep 30 '15 at 20:51
@Aakash , I change it to `FrameLayout`, but still have the same empty space – Sigmund Sep 30 '15 at 21:25
@IgorSkryl edited my answer, please check, should work now – Aakash Sep 30 '15 at 21:33

score 0 · Answer 2 · answered Sep 30 '15 at 20:03

0

replace you bottom linear layout with this block

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="#FFF"
    android:id="@+id/linearlayout_hero">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hero Appearance"/>
</LinearLayout>

answered Sep 30 '15 at 20:03

Ravi Gadipudi

1,446
1
17
30

@Ravie Gadipudi , should I just change my code with yours? If yes, it doesn't help :( – Sigmund Sep 30 '15 at 20:29

score 0 · Answer 3 · answered Sep 30 '15 at 20:41

You can put the LinearLayout inside the RelativeLayout like this:

    <LinearLayout
        android:id="@+id/linearlayout_hero"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/heroImage"
        android:background="#FFF">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hero Appearance" />
    </LinearLayout>

score 0 · Answer 4 · answered Oct 01 '15 at 01:42

i'm trying to answer your question.

I think it's because your image(hero/corner) has a blank space at the bottom, because the width & height of the RelativeLayout is wrap content, so the RelativeLayout is fitted to the images.

Please check your image :)

Empty space in RelativeLayout

4 Answers4