Develop Reference

blur edges of 9-patch image of editbox

i have generated nine patch image using 9-Patch generator
but its not showing desired result , following is my core image and i have use this in a 9-patch image generator.
current result is
desired result is
you can clearly see the difference that edges of 9 patched image is quite thin and blur. how do i resolve it
Edits
Region
Padding
Optical

Make sure, while generating 9-patch image all the curves are not selected.
Check out the below image.
Also before downloading there is option "Interactive Preview", check it out as per the name it will show how your image will show for your current selection.

I don't see a reason to go for 9 patch png mess for simple layouts like this.
You can easily achieve it using a drawable and set it as background for your EditText.
Use the below code for your drawable, eg. blue_border.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="4dp" />
<stroke android:width="1dp" android:color="#2979ff"/>
<solid android:color="#color/colorWhite"/>
</shape>
</item>
</selector>
Use the above blue_border.xml as background to EditText in main layout.
<EditText
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLines="1"
android:maxLength="10"
android:background="#drawable/rounded_layout_ex"
android:hint="Mobile Number"/>
The outcome you'll get from above code:
You can always change the border color, width, background or corner radius by changing the attributes in your drawable blue_border.xml.

Android Shape Inverse Rectangle

Is there any xml that i can use to perform something like this ?
I want to have an single ImageView where i show my picture. The picture is "fillparent" that it goes on the whole screen. But i only want to see the pink part normal and all outside the lines i want something like an "alpha = 0.5" or just that it is a little bit less seen than the main.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="120px" android:right="120px" android:bottom="120px" android:left="120px">
<shape android:shape="rectangle">
<solid android:color="#9fffffff" />
</shape>
</item>
I want to put an xml as foreground to perform this. With an shape of an rectangle and an alpha of 0.5 it works exactly the opposite side. Now i just need something like an inverse rectangle or something.
Thanks for your time.

Draw rectangle with empty partial fill

Here's what I want to do: Click
I have a progressBar and I want to overlay this onto it so that I can achieve rounded corners. Problem is, if I use a 9patch image, it doesn't scale down, and scaling up pixelates the corners. Also, the corners when I increase the size of the progressBar, don't look sharp enough.
So I thought maybe drawing such a rectangle on top would make it 100% precise with crisp quality. Unfortunately, I've never used that before and there's no tutorial similar to what I want to achieve.
Thanks for all the help.

If you apply a shape drawable, you should be able to achieve what you want. You reference it just like any other drawable (android:src/android:background).
Let's name this file rounded_rect.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#80ffffff" />
</shape>
The radius can be more or less than 20dp, it will actually scale down if the container that it's drawn in requires less for the sides to be perfectly rounded; the color is white with a bit of transparency (#80).
Save it to your drawable folder and refer to it as you usually would with any png/jpg/etc drawable:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rounded_rect" />

Radial gradient in XML with parent size

Im trying to achieve a component to make custom shadows to buttons or other components, i know that it will be easier with a 9patch or a png with the shadow, but i want to change it color and size programmatically also in its states (pressed,etc), so i decided to try with 9 images, all in XML so the shadow shades start its gradient from the side of the component.
<!-- Left Shadow layer -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#FFFF0000"
android:startColor="#00FF0000" />
</shape>
</item>
It looks good, the problem is on the corners and with the android:gradientRadius parameter now its set to a fixed size, but in the contextual help is said that can be set in a percentage of the base size 10% or parent size 10%p, what i want its to set a 100%p radius so the gradient will always go from the main color and disappear in the edge of the square.
-- EDIT --
The android doc about gradientRadius gradientRadius
<shape android:shape="rectangle" >
<gradient
android:endColor="#00FF0000"
android:startColor="#FFFF0000"
android:gradientRadius="18"
android:centerX="100%"
android:centerY="100%"
android:type="radial" />
</shape>
And thats where im now :( i do not know how can i set this size to fit its parent view.
Any help will be appreciated, when im finished with the component i will put the code in an answer :) so typical buttons can have customizable shadows in xml.
An image of the deserved component.
--Edit--
Im still interested in this :) no one has a clue?

I think you should give up with xml and implement drawable in code.
When you extend Drawable class you can get size as rectangle with getBounds(). Also you can dynamicaly recalculate in onBoundsChange method.
You can also easily construct gradients and use them in Paint object (setShader method)

How to add corners to a view

I added a full border around a view but I need to add just the corner as shown image below :
I mean the red corner only .
I tried to adjust the below border xml , but it didn't work :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="10dp" android:height="10dp" android:color="#B22222" />
<solid android:color="#FCE6C9" />
<corners android:radius="20dp" />
</shape>
Any help will be appreciated

I don't think it's possible to do this using a ShapeDrawable, as it would require you to use some sort of margin or padding on the drawable itself. There actually is a padding attribute, but unfortunately that only has effect on the content of the View, and not the drawable itself.
That being said, an easy solution would be to create a 9-patch in stead and apply that as background to the TextView. Just for demonstration purposes: make the 9-patch look somewhat like this:
Edit:
On second thought, there's actually another option that relies on using a LayerDrawable to create the desired effect. It's a bit tedious to create and I have my doubts it'll be more efficient than using a 9-patch, but at least you don't have to render out images, which means that if you need to make e.g. a change in colours, it's more straightforward.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded" />
<item android:drawable="#android:color/white" android:left="30dp"
android:right="30dp" />
<item android:bottom="30dp" android:drawable="#android:color/white"
android:top="30dp" />
<item android:bottom="30dp" android:left="10dp" android:right="10dp"
android:drawable="#color/pink" android:top="30dp" />
<item android:bottom="10dp" android:left="30dp" android:right="30dp"
android:drawable="#color/pink" android:top="10dp" />
</layer-list>
Some details: #drawable/rounded is the code snippet you posted yourself. The following two items are simply white rectangles with an offset, to create the white edges. Now, since these will also overlay the pink surface, we need two more pink rectangles (again with specific offsets) to counter that. The result is a background that looks exactly like what you're showing in your question.
Note that you might want to see if you can optimise this a bit. At the least I'd recommend not hardcoding the offsets (like I did for simplicity), but store them in a dimens.xml file so you can keep these values centralized and consistent by referencing them from both the ShapeDrawable and LayerDrawable.
Addendum: On pre-ICS (or perhaps pre-Honeycomb) devices, there appears to be an issue with directly referencing colours with the android:drawable attribute. You can however easily get around this by setting up another drawable (be it either a 9-patch or ShapeDrawable) to represent this colour. For example, in the snippet above, you would replace android:drawable="#color/pink" with android:drawable="#drawable/color_pink", where color_pink can simply be an xml file containing:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FCE6C9" />
</shape>
Obviously you will need to do the same for all other colours referenced in the LayerDrawable. Tested on Gingerbread 2.3.7.

I would create a 9-patch file and set it to be the background of the main container. The steps to do that would be.
You create the background you would like roughly in fireworks, illustrator, or whatever image editing software you prefer.
Then crop the artwork so that there is only a 1 pixel border around the artwork. Save it as a png.
Open the draw9patch.bat file in your android sdk folder on your computer C:\Program Files (x86)\Android\android-sdk\tools.
Open your png file. You can then use your mouse to click on the outer 1 pixel border which will turn the clicked pixels black. The areas that you have black pixels on both the top and bottom or on the left and right will be the area that is stretched. In your case you just want to have the middle area where there is no red stretched.
My personal preference is to just open the file above and save it as a 9 patch file. Then open it in my photo editing software to create a 1 pixel thick line in the same fashion as above. It is quicker and more precise.
Finally add the file to your drawable folder. Then set the background of your main view container to the drawable.
That should be it. Hope that helps.