I created a simple 9-patch image for Android. Poured into a folder drawable-mpdi. Everything works, but the upper frame is lost. It is not clear why. See screenshot:
This is my 9-patch file:
https://dl.dropbox.com/u/30086473/input_login_active2.9.png
My XML layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#drawable/login_bg"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/auth_logo"/>
<EditText
android:layout_width="273dip"
android:id="#+id/login"
android:layout_marginTop="20dip"
android:layout_height="wrap_content"
android:background="#drawable/auth_edit_text"
android:hint="#string/auth_login"/>
<EditText
android:layout_width="273dip"
android:id="#+id/password"
android:layout_height="wrap_content"
android:background="#drawable/auth_edit_text_left"
android:hint="#string/auth_login_left"
android:layout_marginLeft="17dip"/>
</LinearLayout>
</LinearLayout>
What is the problem? How to recycle 9-patch, that there was a blue frame at the upper of element?
There is #drawable/auth_edit_text:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/t" />
</selector>
Your pixel borders seem to be incorrect (reversed maybe). Try this instead:
With your original, you'd be stretching the phone icon as well, not just the bubble. Also, you had the content area and stretch area reversed for the top and bottom (I've inverted them in the attachment). While I don't know that that would specifically cause the problem you've shown, I would give it a try and see what happens.
EDIT: Try this:
EDITED ANSWER FROM COMMENTS: I think that may be your issue is that it's looking for the ldpi image, not finding one, and falling back to the default and scaling it down. Since the border is only 1 px, it simply disappears when scaled down.
Related
I'm building layers in Android, for that I'm loading an background image into ImageView with a small mini black boxes drawn over it, like placeholders.
I was wonder how can I set some EditText over those small mini points on the image,you cant see them but suppose I have to black box'x over the bg image and I want to place over them my text1,text2. I tried using RelativeLayout and using fixed padding but when changing the screen size or orientation it get messy, I read that the best thing is to place them on run time by checking the screen resolution and calculating the right sizes for each EditText, but it is to much work I think.
<?xml version="1.0" encoding="utf-8"?>
<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" >
<RelativeLayout
android:id="#+id/background_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/bg" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
</RelativeLayout>
</RelativeLayout>
This is the Image, and I want to put some text on the black boxes of the result and the team.
What options do I have?
There is lot of device size variation in Android you can't get perfection by doing this, I would recommend you to use plain background of image and take that small mini boxes as different image and set it as a EditText background.
other wise you have to manually set the padding and margin for every devices in which you getting differences.
I hope this will help you.
In Android UI design using XML, how is it possible to put an ImageButton to align exactly with the background of the activity xml file.
Suppose, I have two images, one acts as the background image for the activity, and the second one acts as the image button source.
This is the background image.
http://i.stack.imgur.com/e1Ow5.png
This is the button image. http://i.stack.imgur.com/m0tUU.png
I will set the first image as background to the activity. My question is how will I properly place and align the second image,that is the button to be exactly inside the "central rectangle" of the background. The "central rectangle" is the place holder, and it can be anywhere in the screen.
Not: I tried using relative layout, but, couldn't really place the button depending on the background.
Edit:-
Actually the rectangle and the rounded-rectangle at the center of the background is just a place-holder. It can be anything, even nothing. Or it can be anywhere. It might not be at the center. Consider the whole image, I need to put the button image where the place-holder is. That is my intention. Say for example , consider a radio application, where there is a turning button acting as volume rocker. Everything else in the image is the background, and the volume rocker might be a different image.
The answer is its impossible the way your are trying to do it.
What you want to do is cut the background up further so the button is centered.
So using your images as an example, here is how the view hierarchy would look
->FrameLayout1
---->Framelayout2
-------->Button
FrameLayout1 would be the background without the inner square
FrameLayout2 would be the inner square
Button would the button asset and placed centered in FrameLayout 2.
There are other techniques on top of this you will need to make it look pixel perfect, like using 9 patch drawables.
Considering you are trying out in landscape mode( your images seems so)
You can try the following code.
bg : your background
img: your center image
<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"
android:background="#drawable/bg" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/img" />
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_bg" />
</RelativeLayout>
drawable/img_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg">
</item>
<item android:drawable="#drawable/fr">
</item>
</layer-list>
or
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/bg" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/fr" />
</RelativeLayout>
bg.png and fr.png are transparent image with same height and width.
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 want to draw ImageView with text over a relative layout with 9patch background.
<?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"
android:background="#drawable/splash_last" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/appnameimg" >
</ImageView>
</RelativeLayout>
In editor i have this:
On the phone :
It seems that I have just 3 character from string.
Where is my mistake?
UPD
there background and text image. Can it be because of "bad" 9patch?
link to images
I am able to reproduce the issue. It looks like the way you are trying to define the 9 patch is the issue. You want one corner to be un-stretchable which is not possible. According to this doc, the area to be stretched is intersection of left and top one pixel black lines. Using that definition it is not possible to define corner as un-stretchable. If I remove the 9 patch the both images looks fine.
You need to define how your image will scale inside of the ImageView container.
Set android:scaleType="fitCenter" in your XML to center the image in the list view and fit it inside of the container.
Ex.
<ImageView
android:id="#+id/imageView2"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/appnameimg" >
</ImageView>
or one of the other options that might suit you better from here
ImageView.ScaleType
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.