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.
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 :)
THE ISSUE:
I cannot seem to get my ImageButtons to appear in the right place or be the right size.
THE PLATFORM:
Eclipse with Android API 16
THE PROBLEM:
My RelativeLayout is 600x800 and my ImageButtons are 194x64, yet when I put them in the editor they are twice as big as they should be. See link to image.
My XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/main_portal_bg" >
<RelativeLayout
android1:layout_width="353dp"
android1:layout_height="758dp"
android1:layout_marginLeft="115dp"
android1:layout_marginTop="29dp"
android1:background="#000000" >
</RelativeLayout>
<ImageButton
android1:id="#+id/new_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_marginTop="89dp"
android1:contentDescription="#string/back_button_desc"
android1:background="#drawable/new_customer_button_selector" />
<ImageButton
android1:id="#+id/returning_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/new_customer_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/returning_customer_button_selector" />
<ImageButton
android1:id="#+id/redeem_coupon_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/returning_customer_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/redeem_coupon_button_selector" />
<ImageButton
android1:id="#+id/info_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/redeem_coupon_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/info_button_selector" />
</RelativeLayout>
THE RESEARCH:
I have tried to use ScaleType of FitXY, setting MaxHeight and MinHeight, and using android:background instead of android:src. The only way I have been able to make them smaller is by using the Graphical Editor to resize them by holding down SHIFT and dragging the bottom-right corner. That also unfortunately forces them to be automatically aligned to the bottom of the layout and when I try to move them they snap back to their original size and all the other buttons get shuffled around the layout. Editing the XML only gets me part of the way there.
THE QUESTIONS:
Every time I try to move a button in the Graphical Editor, all the other buttons get shuffled in a seemingly random pattern around the screen. Why does this happen?
I set a width of 194dp and a height of 64dp. Changing these values does nothing. Why doesm't this affect the actual width and height of my ImageButton?
When using the Graphical Editor to resize the button by holding SHIFT and dragging the corner, this doesn't change the width and height values in the XML, but just adds margins. See resulting XML below:
<ImageButton
android1:id="#+id/new_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentBottom="true"
android1:layout_alignRight="#+id/returning_customer_button_selector"
android1:layout_marginBottom="408dp"
android1:layout_marginRight="86dp"
android1:layout_marginTop="89dp"
android1:background="#drawable/new_customer_button_selector"
android1:contentDescription="#string/back_button_desc" />
HERE IS MY FINAL GOAL:
Please tell me how I can get there. This simple thing should be easier.
After reading the information supplied at developer.android.com/guide/practices/screens_support.html, I now understand the 4 different types of screen density. Thanks CaseyB for that link.
I calculated my screen density at roughly 160, after using the utility I found at http://members.ping.de/~sven/dpi.html.
My problem was that the default AVD created by the AVD Manager has the LCD density set to 240 (high).
After setting it to 160, my project rendered with the buttons the correct size.
I left all my drawables in the drawables folder, since I am developing for 1 screen resolution and density. If I decided to use another tablet, then I might make use of the other folders.
TIP: Don't depend on the Eclipse Graphical Editor for asset alignment or sizing. I'm not sure its entirely accurate. I use the old edit the XML and run the project method when trying to adjust size and spacing.
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.
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 .