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:la开发者_Go百科yout_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 thebackground
.
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>
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!
android:scaleType="fitXY"
It works for me.
those extra padding is autogenerated since the android would try to get the original aspect ratio. please try below
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
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,
- Either change the size of the image to fit the specified layout, or
- Use
android:scaleType
to fit the image. For example, you can specifyandroid:scaleType="fitXY"
use this android:scaleType="fitXY" in imageview xml
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"
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.
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" />
精彩评论