NOTE: I have ended up reporting this as a bug to the android project here: http://code.google.com/p/android/issues/detail?id=39159 Please also have a look at the accepted bounty answer, the solution is, unfortunately, to use an absolute (ie specifiying 'dp's rather than 'wrap_content' etc) layout to fix the issue.
I'm getting some VERY strange behaviour when placing a background on an image. I have simplified this down quite heavily to demonstrate the issue to you. What im doing is placing an image in a relativelayout, and also using a background. It seems that giving the relativelayout a padding is causing the background of the image to be missdrawn. Wrap_content seems to be messing up.
Firstly, here is the code that demonstrates the problem. Note that the same behaviour is seen without using a linearlayout and just giving the imageview a background, but this really demonstrates the problem better.
<?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="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
Here is the black_bg xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF000000"/>
</shape>
Here is red_rectangle:
NOTE that this is a reference image, to demonstrate the problem. my actual image has detail, and so cannot be a .9.png
And here is a screenshot of the problem:
You can see that the image width is less than the linearlayout, despite the linearlayout having a width set to "wrap_content". If I set the relativelayout padding to 0dp, this problem dissapears.
This is hopefully a fairly well contained set of resource I'm providing here, so people can try it out themselves if they wish.
For reference, I am using this to provide a border around the image, so I could set the linearlayout (or the image itself) to have a padding, the problem still persists in that case.
EDIT: It appears I probably need a little more context around this, as answers are focussing round how to provide this border. Here is a screenshot of a more contextual layout. I didnt want to include this in the first place as it adds more confusion to the problem:
The FIRST 5dp padding you see is for the content of this entire item (the relativelayout). Then, as i said originally, the idea is that "I could set the linearlayout (or the image itself) to have a padding" in addition to the first padding you see in the relativelayout. Currently, this layout should have NO border shown.
the problem seems to be with the different stretching properties of image(in image view) and the one set as a background(in linear layout). The image set as a backgroung doesnt necessarily maintains the aspect ratio while the image in the image tends to maintain it.
When you give the height of the layout to 60 dp, the image shrinks maintaining the aspect ratio leaving the black strips on the sides.
This works for me:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/asd"
android:scaleType="fitXY"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I believe this is a good candidate of a bug!
Anyway, I understand what you intend to achieve with this layout. The problem is setting the height of your RelativeLayout. I will not ask you to wrap content! Simply, since the height is set to 60dp and padding to 5dp, take a further step and set the height of the LinearLayout to 50dp which is 60-2*5 :)
Finally, to get the border, add a padding of, say, 5dp to your LinearLayout and set the Height of the ImageView to 50dp - 2*5 = 40dp.
This will work perfectly
<?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="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="5dp"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I dont know why its showing the extra black patch there. Have you tried running the app? The UI editor has some defects, especially when it comes to ImageView..
Now for the border around image, set the background and padding to the ImageView itself. Do not need the LinearLayout. Add the scale type attribute with "centerInside" value.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#000"
android:scaleType="centerInside"/>
"For reference, I am using this to provide a border around the image"
Add a drawable "border.xml"
<shape xmlns:android:"http://schemas.android.com/apk/res/android" android:shape:"rectangle">
<stroke android:width="5dp" android:color="#FF000000" />
<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>
set your ImageView background to this drawable.
And lets simplify your layout and center the ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#drawable/border" />
</RelativeLayout>
Try this ...........
<?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="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg"
**android:padding="5dp"**
>
<ImageView
**android:layout_width="fill_parent"
android:layout_height="fill_parent"**
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
make your image view like this ..
<ImageView
android:id="#+id/imageViewMyicon"
android:layout_width="30dp"
android:background="#drawable/myiconbackground"
android:layout_height="30dp"
android:src="#drawable/myicon"
android:contentDescription="#string/my_icon"
/>
Inside your drawable myiconbackground.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#0D95BD"/>
<corners android:radius="5dp"/>
<padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"/>
</shape>
i checked this one is working for me , should do for you as well
Related
I'm currently working on a mobile app and I have a problem when I try to put a footer under a Scroll View.
Here is my code:
<RelativeLayout
android:id="#+id/RelativeLayout01"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/bottomcontent"
android:orientation="vertical"
android:background="#drawable/border">
//the footer is added dynamically
</RelativeLayout>
<ScrollView
android:layout_weight="1"
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/contentcontainer">
<LinearLayout
android:id="#+id/scrollcontentcontainer"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
//the content is added dynamically from a layout template
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
The content of the scrollview is a set of relative layout with some buttons and textviews inside. It's based on a layout I'm inflating several times.
The footer is just a linearlayout with some buttons in it as well.
The thing is I tried all the different solutions I found on Internet and none of them were working. In my case the footer is stuck under the content of the scrollView, not under the scrollview itselfm so I have to scroll down until the content is over to reach my footer. But the footer is supposed to remain on the bottom of the screen...
I tried those solutions as well, nothing was working:
- http://www.javacodegeeks.com/2013/10/android-fixed-header-and-footer-with-scrollable-content-layout-example.html
(when I try this I have a footer on the top of the screen and nothing else...)
- http://www.byteslounge.com/tutorials/android-fixed-header-and-footer-with-scrollable-content-layout-example
and some others (not working as well!)
I also tried all the possible things like using gravity, weight, fillViewPort, align to the bottom... But impossible to have the expected result.
The minimum API is set to 14, I use android studio.
Thanks for help guys!
edit1 :
border drawable
`enter code here
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="-2dp"
android:left="-2dp"
android:right="-2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#000000" />
<solid android:color="#3b010101" />
<padding android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
</layer-list>
You can try the following, I also had troubles with adding ScrollView inside a RelaveLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/bottomcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/border">
<!---add something there eg:-->
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"/>
</RelativeLayout>
<ScrollView
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottomcontent"
android:layout_alignParentTop="true">
<LinearLayout
android:id="#+id/contentcontainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/scrollcontentcontainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
.
I found the following in this documentation. This is causing the problem for sure
Note: In platform version 17 and lower, RelativeLayout was affected by
a measurement bug that could cause child views to be measured with
incorrect MeasureSpec values. (See MeasureSpec.makeMeasureSpec for
more details.) This was triggered when a RelativeLayout container was
placed in a scrolling container, such as a ScrollView or
HorizontalScrollView. If a custom view not equipped to properly
measure with the MeasureSpec mode UNSPECIFIED was placed in a
RelativeLayout, this would silently work anyway as RelativeLayout
would pass a very large AT_MOST MeasureSpec instead.
This behavior has been preserved for apps that set
android:targetSdkVersion="17" or older in their manifest's uses-sdk
tag for compatibility. Apps targeting SDK version 18 or newer will
receive the correct behavior
I have a RelativeLayout in my Android project. This has it's background set to a Bitmap:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:src="#drawable/splash2" />
splash2 is a PNG image sized 2560x1440 pixels. I haven't set the background of the layout directly to the image, because the default scale mode (or gravity) is fill which stretches the image to fit the screen. With center it should take correct size image from the center and show it unscaled. In case of a vertical 1080x1920 screen, it should take that big piece and center it in the layout.
However, I have a problem. The image is bigger than any screen out in the market today. Still, with my Nexus 7, which has a 1920x1080 screen, it has borders around the image. The layout is set to full screen. The image is shrinked vertically.
How do I fix this?
You can use android:gravity="fill" to cover vertical & horizontal direction
For splash image try gravity="center|fill"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/black" />
<item>
<bitmap
android:gravity="center|fill"
android:src="#drawable/fondo" />
</item>
</layer-list>
ImageView's scale type centerCrop was what I wanted. Unfortunately I couldn't specify this property for bitmaps. I changed my splash screen layout to FrameLayout and added an ImageView and TextView overlapping each other. This way I was able to achieve what I wanted.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SplashScreen"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/splash2"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/roadSignName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#FFF"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:text="My program"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000"
android:textSize="40sp" />
</RelativeLayout>
</FrameLayout>
Try adding this to the bitmap:
android:gravity="fill_vertical"
This should fix it.
P.S. Sorry for the first answer, I edited it now.
I'm trying to add a divider to a horizontal linear layout but am getting nowhere. The divider just doesn't show. I am a total newbie with Android.
This is my layout XML:
<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="match_parent"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/llTopBar"
android:orientation="horizontal"
android:divider="#00ff00"
android:dividerPadding="22dip"
android:showDividers="middle">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="asdf" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="asdf" />
</LinearLayout>
</RelativeLayout>
use this for horizontal divider
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/honeycombish_blue" />
and this for vertical divider
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/honeycombish_blue" />
OR if you can use the LinearLayout divider, for horizontal divider
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="1dp"/>
<solid android:color="#f6f6f6"/>
</shape>
and in LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#drawable/divider"
android:orientation="vertical"
android:showDividers="middle" >
If you want to user vertical divider then in place of android:height="1dp" in shape use android:width="1dp"
Tip: Don't forget the android:showDividers item.
Try this, create a divider in the res/drawable folder:
vertical_divider_1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="1dip" />
<solid android:color="#666666" />
</shape>
And use the divider attribute in LinearLayout like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:divider="#drawable/vertical_divider_1"
android:dividerPadding="12dip"
android:showDividers="middle"
android:background="#ffffff" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Note: android:divider is only available in Android 3.0 (API level 11) or higher.
It is easy to add divider to layout, we don't need a separate view.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:divider="?android:listDivider"
android:dividerPadding="2.5dp"
android:orientation="horizontal"
android:showDividers="middle"
android:weightSum="2" ></LinearLayout>
Above code make vertical divider for LinearLayout
Update: pre-Honeycomb using AppCompat
If you are using the AppCompat library v7 you may want to use the LinearLayoutCompat view. Using this approach you can use drawable dividers on Android 2.1, 2.2 and 2.3.
Example code:
<android.support.v7.widget.LinearLayoutCompat
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:showDividers="middle"
app:divider="#drawable/divider">
drawable/divider.xml: (divider with some padding on the top and bottom)
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="2dp"
android:insetTop="2dp">
<shape>
<size android:width="1dp" />
<solid android:color="#FFCCCCCC" />
</shape>
</inset>
Very important note: The LinearLayoutCompat view does not extend LinearLayout and therefor you should not use the android:showDividers or android:divider properties but the custom ones: app:showDividers and app:divider. In code you should also use the LinearLayoutCompat.LayoutParams not the LinearLayout.LayoutParams!
I just ran into the same problem today. As the previous answers indicate, the problem stems from the use of a color in the divider tag, rather than a drawable. However, instead of writing my own drawable xml, I prefer to use themed attributes as much as possible. You can use the android:attr/dividerHorizontal and android:attr/dividerVertical to get a predefined drawable instead:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:showDividers="middle"
android:divider="?android:attr/dividerVertical"
android:orientation="horizontal">
<!-- other views -->
</LinearLayout>
The attributes are available in API 11 and above.
Also, as mentioned by bocekm in his answer, the dividerPadding property does NOT add extra padding on either side of a vertical divider, as one might assume. Instead it defines top and bottom padding and thus may truncate the divider if it's too large.
You can use the built in divider, this will work for both orientations.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="?android:attr/listDivider"
android:orientation="horizontal"
android:showDividers="middle">
Frustratingly, you have to enable showing the dividers from code in your activity. For example:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set the view to your layout
setContentView(R.layout.yourlayout);
// Find the LinearLayout within and enable the divider
((LinearLayout)v.findViewById(R.id.llTopBar)).
setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
}
If the answer of Kapil Vats is not working try something like this:
drawable/divider_horizontal_green_22.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="22dip"/>
<solid android:color="#00ff00"/>
</shape>
layout/your_layout.xml
LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/llTopBar"
android:orientation="horizontal"
android:divider="#drawable/divider_horizontal_green_22"
android:showDividers="middle"
>
I encountered an issue where the padding attribute wasn't working, thus I had to set the height of the divider directly in the divider.
Note:
If you want to use it in vertical LinearLayout, make a new one, like this:
drawable/divider_vertical_green_22.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="22dip"/>
<solid android:color="#00ff00"/>
</shape>
Your divider may not be showing due to too large dividerPadding. You set 22dip, that means the divider is truncated by 22dip from top and by 22dip from bottom. If your layout height is less than or equal 44dip then no divider is visible.
In order to get drawn, divider of LinearLayout must have some height while ColorDrawable (which is essentially #00ff00 as well as any other hardcoded color) doesn't have. Simple (and correct) way to solve this, is to wrap your color into some Drawable with predefined height, such as shape drawable
You have to create the any view for separater like textview or imageview then set the background for that if you have image else use the color as the background.
Hope this helps you.
Good afternoon droids!
I am facing an annoying layout problem to which i have no explanation after hours and hours of investigation... :/. I created a reduced test case which i present here.
I have a simple list item layout.
list item http://www.freeimagehosting.net/4075a.jpg
lis item image link
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="96dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:id="#+id/textView1" android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_centerVertical="true" android:layout_centerHorizontal="true" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="TextView"
android:id="#+id/textView2" android:layout_alignParentTop="true" />
<ImageView
android:layout_width="10dp"
android:layout_height="match_parent"
android:id="#+id/imageView1"
android:src="#drawable/errorindicator"
android:layout_below="#id/textView2" />
</RelativeLayout>
the errorindicator is a red rectangle, which you can see on the image on the left side. The xml looks like that:
<?xml version="1.0" encoding="utf-8"?>
<shape shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/ControllingConflictColor" />
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
The described list item layout works as expected.
Now i try to fill a list view with list items as described above. The result looks like that:
list view with list items http://www.freeimagehosting.net/4cc4b.jpg
list view image link
The corresponding xml:
<?xml version="1.0" encoding="utf-8"?>
<ListView android:id="#+id/listView1" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Preview: listitem=#layout/test -->
</ListView>
As you can see on the image, the red rectangle does not match it's parent in the height anymore as it should. The images are made from the designer, but the same effect is also on the emulator and device. I am developing for API Level 8.
**I'd love if somebody could explain me, why the described layout does not work as expected in a list view. Why does the shape drawable behave different? **
Thank you for your time :)
edit: i have problems embedding the image, i used a link instead, sorry ;(
edit: added xml-drawable tag.
edit: My example can be even made much more easier. I included two text views because it has some similarity to my real layout. You can remove the two text views from the example and there still exists the problem, that the shape drawable in the image view does not match the parents height as defined, if the layout is used in a list view.
Im also finding it hard to get it done using a RelativeLayout. Well try this layout for your row xml. It uses LinearLayout.
<?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="wrap_content"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:id="#+id/textView2"
android:layout_alignParentTop="true" />
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:layout_width="10dip"
android:layout_height="fill_parent"
android:background="#drawable/errorindicator"/>
<TextView android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="TextView" android:layout_weight="1.0"
android:id="#+id/textView1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
Because i guess my desired behaviour is not possible with the give layout manager, i went another way which fits my personal situation.
I have overriden the onDraw method of the RelativeLayout and paint this red rectangle myself (after the layout process finished and the heights are set)...
If you made the asset as a png, you could then 9-patch it and add it as the background of the RelativeLayout
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>
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 specify android: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" />