I'm trying to make a 9-Patch image to use for Android application.
Here is a screenshot from 9-Patch tool with my image:
I'm adding on layout this image:
<Button android:id="#+id/tiny"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="Text"
android:textSize="8sp"
android:background="#drawable/arrow_active" />
(Image is located in "drawable" folder and image name is "arrow_active.9.png" )
Here is a screenshot from eclipse:
On real device I also don't see the arrow of image.
I'm tried with ImageView and Button, layout is TableRow.
Also I tried with smaller image:
On real device I see black pixels added by 9Path tool.
Try this tool...
It is graphically well, and auto generate images for all buckets. You can set streatch regions and content padding from it..
Related
I've been trying to create a frame around my imageview using a picture of a wooden frame. I turned the woodenframe picture into a 9patch and its still not wrapping around the imageview.
<RelativeLayout
android:id="#+id/ChosenPic"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="3"
android:orientation="vertical"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical|fill_horizontal"
android:scaleType="fitXY"
android:src="#drawable/woodenframe" >
</ImageView>
</RelativeLayout>
So this is the ninepatch and i want it to fit around a picture of my choosing no matter the size.
EDIT:
This is what i want.
You have two options. I recommended the first one.
First option:
Put each image view in a separate LinearLayout and apply the 9patch to the LinearLayout it self not the image view
Second option:
Use or set the background resource of the image view in Java to the 9patch resource or the background attr in xml to the 9 patch resource and the src to the image it self.
Note that it better to use a Layer-List and add a combination of two shapes or whatever rather than using a 9patch resource.
Reference:
https://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
The "nine-patch" frame image that you upload is not a proper nine-patch.
First, it is a jpg. The extension should be .9.png.
Second, the contents are not correct. Specifically:
You need to have a 1px transparent border around the entire image. I do not see that in your jpg, though that just be an artifact of exporting it as a jpg.
You need to define a stretchable region by drawing black pixels in that 1px border. I see no black pixels defining such a region in the uploaded image.
I highly recommend going back and reading the nine-patch documentation again, and trying the draw 9-patch tool for creating a proper nine-patch.
Your 9-Patch is not configured correctly.
It isn't enough to just rename your file. To get it working properly, you have to define certain areas that should be stretched to fit the dimensions of your view.
You can also define paddings for that 9-Patch to inset the content when applying the 9-Patch to your view.
There's a handy tool called "Draw 9-Patch" in the android SDK that helps you defining these areas:
http://developer.android.com/tools/help/draw9patch.html
To start it, simply run the
draw9patch.bat
located in
...\sdk\tools\
I made this button:
http://i.stack.imgur.com/QkrMD.png
But the image is much bigger than it should be (it should be a quarter of its current size). I made various sizes of the image and put each into the respective drawable folder.
The size of the icon should be:
http://i.stack.imgur.com/12E8r.png
How do I scale the image down to the size I need to do be (as it is in the regular drawable size)?
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3,056"
android:drawableLeft="#drawable/ic_arrow_up_b"
android:background="#color/gray"
android:padding="15dp"
/>
I don't think you should use a Button in this case. You should use a ImageButton. Maybe they work the same but if you are putting an image in a button, using ImageButton makes a lot of sense.
If you use an ImageButton, the image is always stretched to fit the size of the button. That means if you want to make the image smaller, you just make the button smaller.
Am running into something that I have spent hours trying to get working. I have tried searching but what stumbles me is how to search a resolution for this as it is a strange and apparently not-so-common issue?
All I want is to be able to stretch a 'dash of paint' vertically using the y-axis scalable area marked as a single pixel on the left. My 9patch file is below:
I have gotten this to HALF-work as can be seen (ignore the top horizontal line, this is a separate imageview):
As you can see, I am missing what I call the 'Non-scalable end' which is basically the static part of the 9patch file (unmarked on left y-axis scalable area)
The code in the layout is simple:
<ImageView
android:id="#+id/repeater"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/PlayersList"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/PlayersList"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/repeater" />
(file is named repeater.9.png and stored in res/drawable-xhdpi)
Note: For some reason this works exactly as required in the 9-patch tool, but doesn't seem to work in eclipse (earlier screenshot):
Is this the effect you were looking for ?
I have attached images for all drawables let me know if it worked.
You can use http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
to generate 9 patch images instead of making it form default tools.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_example"
android:scaleType="fitXY"
android:contentDescription="#null"
android:adjustViewBounds="false" />
I am trying to use the 9-patch technique to create the button.
It looks almost great in the Layout Window of Eclipse
When I run it in the emulator it shows up like this:
Here is the actual PNG image
Selector XML
<item android:drawable="#drawable/splash_facebook_button" />
Button Code in Layout
<Button
android:id="#+id/button1"
android:layout_width="208dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dip"
android:background="#drawable/splash_facebook_button_selector"
android:text="Sign up with Facebook" />
Looks to me like it's not treating the image as a 9-patch. Have you saved it with the .9.png extension?
Edit:
Had a better look at the actual image and I don't think you've quite got it set up correctly. The bottom and right border define where the content will go (in this case you want it over to the right, with a bit of padding).
The top and left define the areas that will be stretched when the image is scaled. In this case you want it to be areas of constant blue that get stretched, rather than the logo. I've updated the image with an example of how to do this:
This works for me!
I currently working on my personal project in Android. I'm quite a newbie in android development well it's been a months since I've started to self study this but I just can't focus on this one. Well, so here's my problem, first I will discuss what I've made so far:
I've placed a 6 ImageView for each tableRow (six table rows) in a table layout which make it a 6x6 ImageView.
each of the imageView has a default image icon (the default icon from the android drawable).
Once I clicked the ImageView I will change it's Image using setImageDrawable.
the default icon of the android is sized smaller than the images I've placed in which I think 36x36 pixels is the default icon (the android default) wherein my images are in size of 80x80 pixels.
Now here's the problem:
Once I've clicked the image it will successfully changes the image but will also resize the imageView into the size of my image(80x80 px).
well how do I get over this? I've tried setting the ImageView's scale type into fitXY but it has done nothing still my the imageView is resized.
I've also tried changing the wrap_content into fill_parent but nothing also happens (well I just think that it may solve the problem lol)
Here's the property of my ImageView:
<ImageView android:scaleType="fitXY"
android:id="#+id/imageView1"
android:src="#drawable/image0"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</ImageView>
Any help please? Thanks in advance!
you can set the fix size for the image view into the xml file or by coding through for e.g. here in xml file
<ImageView android:scaleType="fitXY"
android:id="#+id/imageView1"
android:src="#drawable/image0"
android:layout_height="90dp"
android:layout_width="120dp">
</ImageView>
so all image are display with the size 120*90 so when you change the picture it will fit into this imageview