当前位置: 动力学知识库 > 问答 > 编程问答 >

How to create custom shape button with selector in android?

问题描述:

MOCK UP


Requirement


I want to put custom button with selector.

Mock up is given above.

If anyone knows solution then share it.

Thank you.

网友答案:

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!

网友答案:

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;
    }
}
网友答案:

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>
网友答案:

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>

分享给朋友:
您可能感兴趣的文章:
随机阅读: