The B (white) layout is over the A (image) layout, and I need to crop the background so that I get this result.
Is that possible with drawables?
If not, what's the other solution?
This is the layout I used:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/gradient_back"
android:layout_width="match_parent"
android:layout_height="166dp"
>
<TextView
android:id="#+id/txtWhiteStripe"
android:background="#drawable/white_stripe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="(B) Some text here"
android:textStyle="bold"
android:textColor="#f00"
android:textSize="16sp"
/>
</RelativeLayout>
To get this result - well, just a proof of a concept, here: it might not be the most appealing graphics ever... ;)
The pictures I used were:
Background (gradient_back.png) - I could have used a single line, but... well I made a full image
and the white stripe (white_stripe.9.png) - which is the most interesting part in the concept
Unfortunately, it's nearly invisible, since it's all white and transparent, on a white background.
But it really looks like this one, in the 9 patch tool:
I should have restricted the content bottom padding a bit - but, well, it's easily done by removing some of the black pixels from the right side.
Enjoy.
Related
I have a textview which has to use a 9-patch drawable as the background. But the 9-patch drawable has left and right paddings which make the background image not stretch properly to cover the whole text. I tried resetting the paddings for the textview itself but it doesn't fix the problem.
Would anyone have any idea how to make it work?
Thanks.
The black lines on the left and top defines the stretchable are, and those on the right and bottom marks the "content" area in a 9-patch image.
So, if you don't want padding means you want a full-length content area. You should mark full-width content area by drawing a full-length line at the bottom and right of the 9patch image.
In this image, the black lines on the right and bottom represent the content area. You can see the preview on the right side, and notice the content area in light blue color. You can fill the content area by extending the bottom and right lines.
Editing 9-patch file is not a good idea, because this method may deform the background image.
I used a trick to handle this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView"
android:layout_alignTop="#+id/textView"
android:background="#drawable/your_9_patch_image"/>
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="a custom text!"/>
</RelativeLayout>
I have set the 9-patch background drawable for a View behind my TextView in a RelativeLayout. So the there is no unwanted padding :)
Theoretically you cant really change the padding of 9 patch image programatically.
So you have two options:
1) Have several 9 patch images in your drawable folder for each resolution: drawable-hdpi, drawable-xhdpi etc
2) Embed a inner layout:
<RelativeLayout
android:background="#drawable/nine_patch_image_without_padding"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_margin="10dp" // Your padding goes here
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="How you doing"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
It worked for me. I use the second options as it is simpler and quicker to use :)
so Im trying out the 9-patch images. I started out with a PNG-file where I have a semi-transparent square with rounded corners:
Then, I created the 9-patch, like this (note the little dot on top and to the left):
I thought that was enough to handle this, but when adding this 9-patch to Eclipse, I get weird results.
Result nbr 1
Based on this XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/taxibg3"
android:orientation="vertical" >
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/login_square" />
</LinearLayout>
I get this result:
Result nbr 2
Based on this XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/taxibg3"
android:orientation="vertical" >
<ImageView
android:layout_width="300dp"
android:layout_height="158dp"
android:background="#drawable/login_square" />
</LinearLayout>
I get this result:
I have also tried to make the "9-patch-lines" on the top and left longer, but that also gives weird artefacts.
Any ideas?
-- EDIT --
I also tried with this 9-patch (screen-shot from 9patch-tool):
which gives this bad result (note the black lines):
---- EDIT 2 ----
Leonidos told me that the 9-patch was too big, and that they cannot decrease in size. So I tried that out, with equally bad results.
This is the 9-patch (download the file here)
and this is how it looks (notice the black lines):
--- EDIT 3 ---
I took a look at "show bad patches" in the pathtoo, and this is what is shows:
But it doesnt really matter. If I change it so it looks like this:
I still get the black stripes!
Oh why oh why!? =)
Make it small as possible. 9-patch cant shrink they can stretch. Fill right and bottom border with black color. Edit 9-patch borders with draw9patch tool to prevent errors. Your 9-patch should look similar to this one.
Try to do 9-patch markings from all 4 sides. Also make sure you have .9.png file extension (f.i. your_cool_pic.9.png)
Here is my example
The 1 pixel border must be either completely black (nine patch markers) or completely transparent. Basically, edit the image to cut out anything in the 1 pixel border except for the two black dots.
Also, your image can be much, much smaller in size. The point of a nine patch is that the markers on the top and left sides mark what is to be stretched. Most of that content with straight edges could be removed.
I am really confused about this.I have set the background color of the whole screen to blue and I have a framelyout with image view under it. When I choose playingcard drawable as its source then the white background of the playing card is becoming blue and the image is not clear. Why is this happening?
Below is what the screen is looking like:
.
My image is :
:
And here is Part of the XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000FF" >
<FrameLayout
android:id="#+id/frameLayoutBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/ivBottom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:src="#drawable/c11"/>
I don't want to set the background of image to white as I am using padding and I don't want the padding to be white.. The weird thing is that if I use other images that are say red then it shows perfectly, it is just when I use playing cards (I have 52 cards), it is showing like that
Any help please?
Thank you.
Your image has transparent pixels. Use an image editor to convert them to white.
Alternatively, you can specify a margin instead of padding and setBackgroundColor() on your ImageView.
I have a PopupWindow that I am using in my Activity, and everything works fine except for the padding of the elements contained within the PopupWindow - it's much too large - literally taking up most of the small PopupWindows space. Here is the XML I use to define the PopupWindow:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/homescreen_popup_bg_levels">
<TextView
android:id="#+id/x"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#FF000000"
android:textSize="12dp">
</TextView>
<TextView
android:id="#+id/y"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12dp"
android:textColor="#FF000000">
</TextView>
</LinearLayout>
Here is a screenshot of the PopupWindow:
Any idea why the text is being padded down and to the right so much? I've tried adjusting the XML padding, etc but no luck.
Figured it out. The issue was indeed the padding of the 9-patch image - not including any meant the OS was guessing as to where to allow text, and pushing that text towards the center. Setting the padding element of the 9-patch images used for the background solved the issue.
Oh, and something else to note... when using a level list, it appears that Android is only looking at the padding of the first image that is loaded, then applying that to each and every image. As I am (was) using the levels to contain four asymmetric images (call-outs to the top left, right, bottom left, right), all of the images are getting the same padding, pixel for pixel, as the first one that gets loaded.
To solve this issue, I'm now simply setting the background image dynamically, rather than changing the level.
I would guess that your issue is the homescreen_popup_bg_levels drawable.
Try removing it and see what happens. If that's the issue, create a correct 9-patch.
I have a 9 patch png in a RelativeLayout and everything looks great! However, when i create a textView in the RL, the textView is not at the top of the parent... I also tested this on the phone, same result... why does it do this?
Thanks for your assistance!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testLL"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/backrepeat"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="15dp"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#drawable/contentbox">
<TextView
android:text="Test"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
</RelativeLayout>
</LinearLayout>
In looking up how 9patches are rendered, it basically turns the non-stretchable areas into default layout padding. This is to facilitate easy entry of stuff into the target (stretchable) area, without having to go in and define paddings manually. By assigning a 9patch, you are using it's padding. It assigns paddings to top left right and bottom based on how many px the 9patch has until it reaches the stretchable center.
You may try doing something like android:paddingTop="-50px" in your textView and see what happens. I haven't tested this, so I'd be interested to see how it turns out.
Edit to your comment with pic: Since your 9patch's top stretchy region doesnt start for about 90 px, its automatically going to pad the first element 90 px down, to place it within the "stretchy target" region. Try my above suggestion to see how it works, I'm pretty interested to see how it turns out. I don't have my IDE accessible from my Mobile, otherwise I'd test it for you ;)
Edit: I apologize, I've been saying "padding" instead of margin. But the theory is the same. Not modifying the above for permanent documentation of my idiocy.