How to create custom shape button with selector in android?

Question

MOCK UP

Button

Requirement

I want to put custom button with selector.

Mock up is given above.

If anyone knows solution then share it.

Thank you.

if you are using api >11 you can using rotateX and rotateY method to achieve this kind of view. — Zar E Ahmer, Jan 01 '15 at 07:04

score 13 · Answer 1 · answered Aug 06 '13 at 07:50

basically you will need to create some new XML files and apply them to your Button element. As i can see from the mockup you will need a stroke and the background color with some shading effect applied, you can research more into the shading thing but the background color and the stroke is pretty straight forward.

Here is an example, done_rounded_btn.xml:

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:state_pressed="true" 
        android:state_enabled="true" 
        android:drawable="@drawable/zzzzzzzzz_btn_orange" />
    <item 
        android:state_focused="true" 
        android:state_enabled="true"
        android:drawable="@drawable/zzzzzzzzz_btn_orange" />
    <item 
        android:state_focused="false" 
        android:state_enabled="false"
        android:drawable="@drawable/zzzzzzzzz_btn_inactiv" />
    <item android:drawable="@drawable/zzzzzzzzz_btn_black"/>
</selector>

for the selection part and then you create the custom drawables corresponding to the mockup.

An example, zzzzzzzzzz_btn_orange:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="@color/done_color">
    </solid>

    <corners
        android:bottomLeftRadius="3dp"
        android:bottomRightRadius="3dp"
        android:topLeftRadius="3dp"
        android:topRightRadius="3dp" />

</shape>

And then add it to your button as background, main.xml:

<Button
            android:id="@+id/registers_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/done_rounded_btn"
            android:text="@string/done_txt"
            android:textColor="@color/white"
            android:textSize="15sp" />

Hope this helps!

I have two PNGs with this direction. So, how can I rotate(skew) button. — Darshak, Aug 06 '13 at 08:17
well you will recreate the effects from the PNGs from scratch(at least that's what i would do). Use a color picker(like the add-on on Mozilla) to get the color code for each state of the button, add it to your drawables, then add the stroke effect. I am not sure about the shadow effect, but you can look into that here on StackOverflow — Adrian Olar, Aug 06 '13 at 08:44
No particular reason, just feel free to name it however you think it's best:) — Adrian Olar, Oct 18 '14 at 14:33

aniki.kvn · Answer 2 · 2013-10-25T07:08:41.913

You can use this instead of standard Button and set selector as background in xml:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.Button;

/**
 * Custom Shape Button which ignores touches on transparent background.
 */
public class ButtonWithUntouchableTransparentBg extends Button {

    public ButtonWithUntouchableTransparentBg(Context context) {
        this(context, null);
    }

    public ButtonWithUntouchableTransparentBg(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ButtonWithUntouchableTransparentBg(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setDrawingCacheEnabled(true);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();

        // ignores touches on transparent background
        if (isPixelTransparent(x, y))
            return true;
        else
            return super.onTouchEvent(event);
    }

    /**
     * @return true if pixel from (x,y) is transparent
     */
    private boolean isPixelTransparent(int x, int y) {
        Bitmap bmp = Bitmap.createBitmap(getDrawingCache());
        int color = Color.TRANSPARENT;
        try {
            color = bmp.getPixel(x, y);
        } catch (IllegalArgumentException e) {
            // x or y exceed the bitmap's bounds.
            // Reverts the View's internal state from a previously set "pressed" state.
            setPressed(false);
        }

        // Ignores touches on transparent background.
        if (color == Color.TRANSPARENT)
            return true;
        else
            return false;
    }
}

its obviously but I have to say that this solution supports selectors so just add several states images for button in usual way (using selector.xml) and its ready 2go. — Stan, Nov 19 '13 at 15:58

score 5 · Answer 3 · answered Jan 21 '15 at 11:09

You can also create a shape that is using a selector inside. If your shape is just changing its color in different states, this is a lot cleaner.

color/color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/blue_dark" android:state_pressed="true" />
    <item android:color="@color/blue_light" />
</selector>

drawable/shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/color_selector" />
    <corners android:bottomLeftRadius="6dip" android:bottomRightRadius="6dp" />
    <padding android:bottom="0dip" android:left="0dip" android:right="0dip" android:top="0dip" />
</shape>

score 0 · Answer 4 · answered Sep 16 '20 at 07:26

Button with rounded corners with two states (enabled/disabled):

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:radius="28dp" />
            <solid android:color="@color/white" />
            <stroke android:width="1dp" android:color="@color/orange" />
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="28dp" />
            <solid android:color="@color/grey_card_background" />
            <stroke android:width="1dp" android:color="@color/grey" />
        </shape>
    </item>
</selector>

score -2 · Answer 5 · answered Aug 25 '14 at 09:56

inside your item put the shape in the selector XML

EX FROM MY CODE :

<!-- if pressed -->
<item android:state_pressed="true"><shape android:padding="10dp" android:shape="rectangle">
        <solid android:color="@color/blue" />

        <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
    </shape></item>

<!-- if not pressed -->
<item><shape android:padding="10dp" android:shape="rectangle">
        <solid android:color="@color/Purbble" />

        <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
    </shape></item>

needs color attribute to be defined – Amt87 Dec 09 '15 at 15:52 — Amt87, Dec 09 '15 at 15:52

How to create custom shape button with selector in android?

5 Answers5

Linked

Related