Android custom shape

Question

I know it is possible to make a shape looking something like this: enter image description here

But I don't know how to start with it. Can I make it as a shape? or do I have to do something else?

BR

I think the biggest question here is: What is it for? From that we can determine the best way to go about doing this. If you just need the shap I would just override the ondraw of a view and draw an ellipse and and a rectangle in the same colour. A possible problem with this approach is if you wanted to fill with a gradient. — Quintin Balsdon, Aug 02 '12 at 13:37
Hey I will use it as a background behind some buttons. And yes... I will have a gradient on it. — 7heViking, Aug 02 '12 at 13:39
I would like to create it in code so I am sure it will stay sharp on all devices. — 7heViking, Aug 02 '12 at 13:45

score 5 · Accepted Answer · edited May 23 '17 at 12:01

5

Oh look at that, I was wrong - gradients are not a problem:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.view.View;

public class ButtonShadow extends View {

    public ButtonShadow(Context context)
    {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        RectF space = new RectF(this.getLeft(), this.getTop(), this.getRight(), this.getBottom());

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        paint.setShader(new LinearGradient(0, getWidth(), 0, 0, Color.BLACK, Color.WHITE, Shader.TileMode.MIRROR));

        canvas.drawArc(space, 180, 360, true, paint);

        Rect rect = new Rect(this.getLeft(),this.getTop() + (this.getHeight() / 2),this.getRight(),this.getBottom());
        canvas.drawRect(rect, paint);
    }
}

For more on gradient fills look here: How to fill a Path in Android with a linear gradient?

edited May 23 '17 at 12:01

Community

1
1

answered Aug 02 '12 at 14:03

Quintin Balsdon

5,484
10
54
95

How do I add this one to my layout? – 7heViking Aug 02 '12 at 14:16
hmmm. The view disappears when I use align_parrent_buttom = true; What do I do wrong? – 7heViking Aug 02 '12 at 15:52
Hmmm, not sure - it may take a few tries to find the right member to inherit from - if you change "extends View" to "extends TextView" it should still draw fine and maybe that will fix it. If not try "extends LinearLayout" – Quintin Balsdon Aug 03 '12 at 04:34
Thanks Someone Somewhere - you will receive your cape and superhero card in the mail shortly. Of course, this code may just be an example to start off with and require the developer to apply some brain power of his own. – Quintin Balsdon Oct 22 '13 at 10:37
I have same problem. I have created a shape but unable to use it in layout. Please suggest – Ashish Tiwari Sep 05 '14 at 10:19

score 4 · Answer 2 · answered Aug 02 '12 at 13:53

Refer this doc for details and you need to use Layer List.

Here is the code as per your image:

custom_layer_list.xml

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/topCircular" />

    <item
        android:drawable="@drawable/rect"
        android:top="20dp" />
</layer-list>

topCircular.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

<solid
    android:color="#000000" />
<corners
    android:topLeftRadius="25dp"
    android:topRightRadius= "25dp" />

</shape>

rect.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

<solid
    android:color="#000000" />

</shape>

This code is tested at my side. Plz check at your side. All the above three xml files goes in drawable folder. — Vineet Shukla, Aug 02 '12 at 14:43
@Vineet Shukla rect.xml is not working but topcircular.xml is enough for the asked shape in this question. — Sagar G., Nov 28 '13 at 07:24

ScouseChris · Answer 3 · 2012-08-02T13:28:16.123

1

You can define it in xml in a shapes file, but it may be a lot easier to make a simple 9 patch graphic, then you can easily customise how and where the curved and straight segments will be stretched.

See http://developer.android.com/tools/help/draw9patch.html for more info

EDIT

For more info on shapes see here: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

edited Aug 02 '12 at 13:28

answered Aug 02 '12 at 13:17

ScouseChris

4,377
32
38

Yes that I can do... But i would like not to do that so I can be sure the image will be clean and sharp no matter which device it is runing on. – 7heViking Aug 02 '12 at 13:24

score 1 · Answer 4 · answered Aug 10 '12 at 15:36

You can do it only with shape:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#000000" />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners  
        android:topLeftRadius="90dip"
        android:topRightRadius="90dip"
        android:bottomLeftRadius="0dip"
        android:bottomRightRadius="0dip" />
</shape>

Android custom shape

4 Answers4

Linked