Eliminate space in Android Layout

Question

I am trying to make a very simple Layout like this:

An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.

Here is the code I have, it is next to trivial

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.andrew.question.InitialActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:src="@drawable/bg" />
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:text="Hello, I am a Button" />
</LinearLayout>

The problem is, the button does not show up, it shows the image with some space The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.

This is how a screen capture on the emulator look like:

Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:

I get this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.andrew.question.InitialActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:text="Hello, I am a Button" />
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:src="@drawable/bg" />
</LinearLayout>

Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.

The full source code of this experiment can be found in

https://github.com/cshung/MiscLab/tree/master/Question

I think this answers your question. [Fit Image into ImageView, Keep Aspect Ratio And Then Resize ImageView to Image Dimensions?](http://stackoverflow.com/questions/8232608/fit-image-into-imageview-keep-aspect-ratio-and-then-resize-imageview-to-image-d) — Lilylakshi, Dec 22 '15 at 19:05

score 0 · Answer 1 · answered Dec 22 '15 at 18:53

0

Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

answered Dec 22 '15 at 18:53

Zielony

16,239
6
34
39

I fiddled with all possible scaling modes and none of them yield the screen I wanted. – Andrew Au Dec 22 '15 at 19:24

score 0 · Answer 2 · answered Dec 22 '15 at 18:56

Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.

Relative Layout

Using a relative layout instead you should have the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.andrew.question.InitialActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:src="@drawable/bg" />
    <Button
        android:id="@+id/button"
        android:layout_below="@id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:text="Hello, I am a Button" />
</RelativeLayout >

Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.

android:layout_below="@id/imageView"

Sorry, but this is not working. I copy and paste your code in and get exactly the same as what it was. — Andrew Au, Dec 22 '15 at 19:21

score 0 · Accepted Answer · answered Dec 22 '15 at 19:00

0

The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).

To get the right layout, you have to use layout_weight in the child views as follows:

<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    ...>

    <!-- take 90% of container -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.9"
        ... />

    <!-- take 10% of container -->
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1"
        ... />
</LinearLayout>

Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:

Either force the image to fit the widht/height:

<ImageView
     ...
     android:scaleType="fitXY"/>

Or show the center and fill the w/h:

<ImageView
     ...
     android:scaleType="centerCrop"/>

answered Dec 22 '15 at 19:00

Blo

11,903
5
45
99

This solution is the best so far, however I am still seeing some white spaces? Is it more productive if I stop messing around with these attributes and try to create the objects in code instead and specify exactly what sizes and positions I wanted? – Andrew Au Dec 22 '15 at 19:30
Even with `scaleType`, @AndrewAu, do you still have the empty space? I'd say handling it in xml is better to support many screen resolutions with less code and less effort. – Blo Dec 22 '15 at 19:35
Thanks, I figured that. I wish I could just calculate the coordinate and size values I wanted and force it. Turn out in code all I could do is just use those Layout objects, which is essentially the same as XML. I tried to scale mode on the image and indeed the spaces around the image is gone, but there is still spaces around the button. – Andrew Au Dec 22 '15 at 19:44
The space around the button are caused by the default style of Android, @AndrewAu. A nice tip is to use a `TextView` instead. You will able to call `setOnClickListener` as any button without the default style (grey background, padding, margins, etc) and do your own button style. – Blo Dec 22 '15 at 19:46
Finally I get what I wanted, the code in the GitHub repository is updated to reflect that. I thought it will just take me a while to get the Layout right, but I spent 3 hours :( – Andrew Au Dec 22 '15 at 20:33

score 0 · Answer 4 · answered Dec 22 '15 at 19:04

First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.

Set a desired height to the image view and also a scale type to get what you are expecting.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          tools:context="com.andrew.question.InitialActivity">

  <ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:scaleType="centerCrop"
    android:layout_height="300dp"
    android:src="@drawable/bg" />
 <Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello, I am a Button" />
</LinearLayout>

Screen shot

The image is not too large to start with, the math shows there should be at least 400 pixels if the scaling fixes the aspect ratio. I replaced the image by a square size (1080 x 1080) and nothing changes. I do not want to hard code a size because that will not work across screen resolutions. — Andrew Au, Dec 22 '15 at 19:22
if you set android:layout_height="wrap_content" in your imageview , you will understand what i am referring here. Change its value and you will see how the button is getting moved with respect to the height of the image. — Nishant Srivastava, Dec 22 '15 at 19:24

Eliminate space in Android Layout

4 Answers4

Relative Layout