Develop Reference

Change background color dynamically and use a border

I have the following template
<?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="wrap_content"
android:orientation="vertical"
android:background="#drawable/borders" >
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/category_starred_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating_not_important"
android:contentDescription="#string/app_name" />
<TextView
android:id="#+id/category_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/category_starred_icon"
android:textIsSelectable="false"
android:textSize="18sp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:textColor="#android:color/white"
android:hint="#string/category" />
</RelativeLayout>
</LinearLayout>
i get a warning This RelativeLayout layout or its LinearLayout parent is possibly useless; transfer the background
attribute to the other view, i want solve it, but i have the follow problem i have a border in the LinearLayout is like a drop shadow but when i change the background color in my code
mLayout.setBackgroundColor(Color.paseColor(mColorString));
i lost the border, how i can solve the warning witout lose the border, the main problem is the background colors are dynamically

Have a look at this: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
This is an drawable that organizes other drawables in a layer list (one on top of the other). With it, you can use other drawables, like shape, to define the borders and the background the way you want.
I can't make a complete answer now, but if you search for this, I'm sure you can do it. When I have more time, I may come back to help you, if you haven't found out how to solve this yet.

How do i place a background on an image inside a relativelayout?

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

Add a semi-opaque black layer over a background image in Android TextView

This is what I'm trying to do:
I have a .png image as background for my TextView; The color of the text is white. To make the text easier to read, I'd like add a seme-opaque, black layer on top of my .png image.
This is what I've done so far:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/aboutContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:text="#string/aboutEN"
android:textColor="#FFFFFF"
android:background="#drawable/myimage"/>
I tried to add android:background="#color/blackOpaque">
But Eclipse complains that I've already got a background image. So I tried to change the transparency of my image file like this:
Drawable myimage = getResources().getDrawable(R.drawable.myimage);
myimage.setAlpha(50);
But nothing seems to happen at all.
What should I do? Thanks!
Thanks!

This saved my #$$!
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:background="#drawable/myimage" />
<TextView android:id="#+id/aboutContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/aboutEN"
android:background="#AA000000"
android:textColor="#ffffff" />

RelativeLayout behaves different as list view item

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

android:background hides my text

I have a widget layout as follow :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/widget_bg">
<TextView android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/widgetText"
android:text="#string/sWaitingForLocation"
android:layout_marginLeft="4dip"
android:layout_marginRight="4dip"
android:layout_marginTop="4dip"
android:layout_marginBottom="4dip"
android:textStyle="bold"
android:gravity="center">
</TextView>
</LinearLayout>
But the text doest appear, like it's hidden behind the background.
My background is a 9patch png.
It does work if I use android:background="android:color/black" ...
Can it be my png ? (created using android tool draw9patch)

This might also be a solution for your problem: Android background hides child view text.
Can you say what was the problem with your 9-patch and how you fixed it?

Possibilities that come to mind:
The text color isn't the same as your drawable is it?
there is text to display?

I have found the problem : my ninepatch png was messed up.