Unwanted padding around an ImageView

Question

I need to include a header graphic in all of my activities/views. The file with the header is called header.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content"
  android:background="#0000FF" 
  android:padding="0dip">

  <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="0dip"
    android:layout_marginTop="0dip"
    android:layout_marginBottom="0dip"
    android:padding="0dip"
    android:paddingTop="0dip"
    android:paddingBottom="0dip"
    android:layout_gravity="fill"
    android:background="#00FF00"
    />
</FrameLayout>

Note the android:background="#00FF00" (green), it's just visualisation purposes.

I include them into my views like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  style="@style/white_background">

  <include layout="@layout/header" />
  (...)

So, when I actually try it out, the result looks like the left image, instead of what it should look like (right):

(1) This - the orange - part is the image/ImageView in question
(2) The unloved green border. note: normally, the green area would be transparent - It's only green because I set the background.

Note the green border around the image at the top; It's part of the ImageView and I just can't figure out why it is there or how I can get rid of it. It set all paddings and margins to 0 (but the result is the same when I omit them). The image is a 480x64px jpeg* and I put it in res/drawable (not in one of the drawable-Xdpi though).

(* jpeg, because it seems I stumbled upon the old png gamma problem - at first I worked around the problem by making the green border the same orange as the picture, and the colors didn't match.)

I tried it on my htc desire/2.2/Build 2.33.163.1 and on the emulator. Also I described the problem to someone in #android-dev; She could reproduce the problem but had no explanation either. build target is 1.6.

update @tehgoose: this code yields the exact same top+bottom padded result.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  style="@style/white_background">

  <!-- <include layout="@layout/header" />  -->

  <ImageView
    android:src="@drawable/header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#00FF00"
    android:layout_weight="0"
    />

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dip"
    android:layout_weight="1">

    (... rest of the elements)

  </LinearLayout>
</LinearLayout>

Answer 1

finally!

<ImageView
  (...)
  android:adjustViewBounds="true" />

the adjustViewbounds attribute did the trick:

Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.

i stumbled upon it here. thanks for your help!

Answer 2

android:scaleType="fitXY"

It works for me.

Answer 3

It has to do with the image aspect ratio. By default, the system keeps the original aspect ratio of the image source. Which in most cases does not exactly match the layout or dimensions specified in the layout. Therefore,

1. Either change the size of the image to fit the specified layout, or
2. Use android:scaleType to fit the image. For example, you can specify android:scaleType="fitXY"

Answer 4

May be you can give specific height to imageView say 50dp or 40dp and adjust image to make green border dissappear.

Eg: android:layout_height="40dp"

Answer 5

android:layout_height="wrap_content"

You need to change it to "fill_parent"

You also might need to scale your image so it will be the right ratio to fill the framelayout it is in.

I don't understand why you need the frame layout there at all. Without it, your image would just fill the screen anyways.

EDIT: yes, sorry, the xml is the height for the imageview.

Answer 6

use this android:scaleType="fitXY" in imageview xml

Answer 7

those extra padding is autogenerated since the android would try to get the original aspect ratio. please try below

scaletype = "fitCenter"
android:adjustViewBounds="true"
android:layout_height="wrap_content"

Answer 8

You need to provide shape around imageview to give a better look.

Here what i have used:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--<gradient android:startColor="#FFFFFF" android:endColor="#969696"

    android:angle="270">
-->
<gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF"

    android:angle="270">
</gradient>
    <stroke android:width="2dp" android:color="@color/graycolor" />
<corners android:radius="2dp" />
<padding android:left="5dp" android:top="5dp" android:right="5dp"
    android:bottom="5dp" />