Custom shaped buttons in Android layout

Question

How would one achieve these type of buttons?

Can selector and shapes achieve this (the buttons clickable area should have the shape of the button) or are there any libraries and custom widgets for this?

Answer 1

I did a custom view called RoundButton,add this class in your project

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Xfermode;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Jinesh Francis on 5/6/17.
 */

public class RoundButton extends View {
    private Paint firstCirclePaint,secondCirclePaint,secondCircleStrokePaint;
    private int firstCircleColor=0xFF006680,secondCircleColor=0xFF85A3BD,secondCircleStokeColor=0xFFFFFFFF;
    private int width,height;
    private PorterDuffXfermode porterDuffXfermode;
    public RoundButton(Context context) {
        super(context);
        init(context,null);
    }

    public RoundButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        firstCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        firstCirclePaint.setColor(firstCircleColor);

        secondCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        secondCirclePaint.setColor(secondCircleColor);

        secondCircleStrokePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        secondCircleStrokePaint.setColor(secondCircleStokeColor);

        porterDuffXfermode=new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        secondCircleStrokePaint.setXfermode(porterDuffXfermode);
        canvas.drawCircle(width/2,width/2,width/2,firstCirclePaint);
        canvas.drawCircle(width/2,(width/2)+(width/3),(width/3)+(width/(width/8)),secondCircleStrokePaint);
        canvas.drawCircle(width/2,(width/2)+(width/3),width/3,secondCirclePaint);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int desiredWidth = 300;
        int desiredHeight = desiredWidth+((desiredWidth/3)/2)+(desiredWidth/(desiredWidth/8));

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width;
        int height;

        //Measure Width
        if (widthMode == MeasureSpec.EXACTLY) {
            //Must be this size
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            //Can't be bigger than...
            width = Math.min(desiredWidth, widthSize);
        } else {
            //Be whatever you want
            width = desiredWidth;
        }

        //Measure Height
        if (heightMode == MeasureSpec.EXACTLY) {
            //Must be this size
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            //Can't be bigger than...
            height = Math.min(desiredHeight, heightSize);
        } else {
            //Be whatever you want
            height = desiredHeight;
        }

        //MUST CALL THIS
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width=w;
        height=h;
    }

    public int getFirstCircleColor() {
        return firstCircleColor;
    }

    public void setFirstCircleColor(int firstCircleColor) {
        this.firstCircleColor = firstCircleColor;
    }

    public int getSecondCircleColor() {
        return secondCircleColor;
    }

    public void setSecondCircleColor(int secondCircleColor) {
        this.secondCircleColor = secondCircleColor;
    }

    public int getSecondCircleStokeColor() {
        return secondCircleStokeColor;
    }

    public void setSecondCircleStokeColor(int secondCircleStokeColor) {
        this.secondCircleStokeColor = secondCircleStokeColor;
    }
}

For adding button in layout

 <"write_your_package_of_RoundButton_here".RoundButton
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/round"
        android:layout_height="wrap_content" />

And In Activity set Clicklistner for RoundButton

 RoundButton roundButton= (RoundButton) findViewById(R.id.round);
 roundButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
       Toast.makeText(MainActivity.this, "View Clicked!", Toast.LENGTH_SHORT).show();
    }
 });

ScreenShot: