Custom shaped Buttons - android

I have zero knowledge of custom shape designing in drawable.
I need to design custom shape button where the text on the button will be displayed from server.
Can anybody please help me in designing this shape?
Also, the shape should be auto adjustable like the button is used to function in wrap_content.
I need a shape like this:

What you're looking for is the Shape Drawable. Basically, in Android the easiest way to create custom shapes is by creating a Shape drawable and defining its shape in the drawable's XML.
Drawables are better than other image forms such as .PNG - specially for your use case. If you're new to custom shapes and drawables, I'd recommend you to read up more on them and their advantages.
Also, take a look at this question for a working example.
You'd find a number of similar examples all over SO and other websites. You might just also find a shape drawable that matches the exact pattern that you're looking for.

Related

How can I achieve curly or wavy borders for a view on Android?

There is the concept of rounded corners for views and drawables in Android, however, am working on an interface for a kids robot, and someone asked for curly borders - sort of like wavy (sine wave kind of thing). Now, how the heck can one achieve such a thing in either XML or Java - especially, without resorting to use of image overlays or backgrounds?
rounded corners aren't in fact rounded Views, its just a bit of transparency in corners. you can create some custom drawables/Bitmaps and set for your Views (as a background or use ImageView) or you can use custom programmatic drawing like HERE
Have tried to use images of that form and use them as background in a transparent container?

Button with dashed outline - 9patch with tileMode="repeat"?

I am having trying to accomplish this kind of a design. It needs to stretch to accomodate difference screens but rather then stretching it should repeat the pattern, I think the picture is pretty self-explanatory. 9patch only wont cut it as it only stretches.
Thanks for your time
The simplest method to do what you want would be to use a shape drawable with the stroke element set on it to obtain that dash pattern.
You may be able to also do it with a layer-list drawable.

Creating non-traditional shape tooltip in android with border

Hello fellow Android designers,
I am struggling right now to create xml tooltip that would look like the one on this picture:
Unfortunately it seems like a hell of a work. Till now I was only able to create a simple rounded rectangle like that:
Is it actually possible to create such a shape I have presented on the first photo using xml styling or should I try to create it programatically (which will probably take huge amount of time and creating border would be really hard)? Or maybe the simplest solution is the best and I should use partially transparent png image with the shape of my choosing?
Any advice would be much appreciated.
You can draw it using stretchable 9-patch drawable.
You can specify there which parts are fixed (the little knob on the left and corners) and which are stretchable (all other parts)

drawing non rectangular shapes on android

I am try to implement this shape with android xml drawables:
I am able to get the rectangle but I can figure out to get the triangle tip. I also need to apply a gradient to this shape.
Any help is greatly appreciated.
I think leveraging XML drawables is to create a clipping-mask via 9-patch drawable and then project that onto a rectangle drawable.
This probably will require a custom drawable class though. I searched and found that this Q/A might solve that part of the problem. Masking a Drawable/Bitmap on Android
Looking at the SDK docs ClipDrawable implies that it would help with that but it turns out that it might be a poorly named class. It doesn't do what I thought it would.
The easier way to accomplish this is to just create a 9-patch out of the object itself. You lose the gradient flexibility unfortunately when you do this.
You can use 9-patch to draw it.
http://developer.android.com/tools/help/draw9patch.html
just crop a little path around with triangle tips and make 9-patch like this check this link and then use drawable shape to draw your gradient on top of it.

Android: Border as gradient

How can I create a border (gradient from #color1 to transparent) around the activity using XML styles? Please see the image below.
With plain XML this is not possible (as far as I know). But you can use the 9-patch images in order to do this. Just create one with the Draw-9-patch tool from the sdk.
You can do it with and tags as special drawables.
Take a look at this example.

Categories

Resources