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.
Related
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.
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 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've got following 9patch, which I got thanks to nice people who answered my previous question:
I use it for background in relative layout and TextView and got following.
Thats for RelativeLayout:
<RelativeLayout
android:id="#+id/relativeHeader"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android: background="#drawable/cap_stack">
And for TextView:
<TextView
android:paddingTop="5dp"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="22dp"
android:background="#drawable/cap_stack"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
As you can see, I got 1px wide line visible in both cases. And in case of TextView text is not placed in the center vertical. How can I fix it(is it drawable problem or xml)? Will appreciate any help
You shouldn't have a solid border all the way around. The top and left borders define the stretch areas (you only need one pixel on the top for stretching, and you want JUST the gradient to stretch on the vertical axis). The bottom and right borders define the content area, so you want to leave some padding as well. The four corner pixels should never be filled.
Try this one:
or this one:
try this for your textview, the problem is your layout_height You are wanting the textSize attribute instead. Also, notice I used the SP unit instead of DP as that is what the docs recommend for text size values. I hope this helps!
<TextView
android:paddingTop="5dp"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="22sp"
android:background="#drawable/cap_stack"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
Did you named your image as cap_stack.9.png? It seems android is not processing it as 9patch.
android:gravity="center_vertical" works with LinearLayout Only , Use Layout_centerVertical=true for relativeLayout .
and that lines on border seems part of your image , not seeing any other possibility //////so rechecking image once might be helpful .