Android で直角二等辺三角形 ⊿ のボタンを描画してみた件

# 方法
Stack Overflow に[回答](https://stackoverflow.com/a/30484166/5897175)がありました :mag: 

# アレンジ版
⊿ ボタンを１つだけ配置してみます。

## コード

``` RightIsoscelesTriangleButton.java
package com.sample.application;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 直角二等辺三角形のボタン
 */
public class RightIsoscelesTriangleButton extends View {

    private Region region;
    private OnClickListener listener;


    public RightIsoscelesTriangleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setStrokeWidth(0);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setAntiAlias(true);
        paint.setColor(ContextCompat.getColor(getContext(), R.color.purple));

        // ⊿ を描画します
        Path path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(getWidth(), getHeight());
        path.lineTo(getWidth(), 0);
        path.lineTo(0, getHeight());
        path.close();
        
        canvas.drawPath(path, paint);
        canvas.drawColor(Color.TRANSPARENT);

        RectF rectF = new RectF();
        path.computeBounds(rectF, true);

        region = new Region();
        region.setPath(path, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        invalidate();
        if (region.contains((int) event.getX(), (int) event.getY()) == false) {
            return false;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
                if (listener != null) {
                    listener.onClick();
                }
                return true;
            case MotionEvent.ACTION_DOWN:
                return true;
        }

        return false;
    }

    /**
     * ⊿ ボタンにクリックリスナーを設定します
     *
     * @param listener {@link OnClickListener}
     */
    public void setOnClickListener(OnClickListener listener) {
        this.listener = listener;
    }

    /**
     * ⊿ ボタンのクリックリスナー
     */
    public interface OnClickListener {
        /**
         * ⊿ ボタンがタップされた場合のコールバック
         */
        void onClick();
    }
}
```

``` app/build.gradle
apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.3"
    defaultConfig {
        applicationId "com.sample.application"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

ext {
    supportLibraryVersion = "25.3.1"
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    compile "com.android.support:appcompat-v7:${supportLibraryVersion}"
    compile "com.android.support:design:${supportLibraryVersion}"
    compile "com.android.support:percent:${supportLibraryVersion}"
    
    testCompile "junit:junit:4.12"
}
```

``` activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.sample.application.RightIsoscelesTriangleButton
        android:id="@+id/button"
        android:layout_centerInParent="true"
        app:layout_aspectRatio="100%"
        app:layout_widthPercent="50%" />

</android.support.percent.PercentRelativeLayout>
```

``` MainActivity.java
package com.sample.application;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RightIsoscelesTriangleButton rightIsoscelesTriangleButton = (RightIsoscelesTriangleButton) findViewById(R.id.button);
        rightIsoscelesTriangleButton.setOnClickListener(new RightIsoscelesTriangleButton.OnClickListener() {
            @Override
            public void onClick() {
                Snackbar.make(findViewById(android.R.id.content), "⊿ がタップされました", Snackbar.LENGTH_SHORT).show();
            }
        });
    }
}
```

## 実行結果

⊿ の領域部分がタップされると [Snackbar](https://developer.android.com/reference/android/support/design/widget/Snackbar.html) が表示されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/6881/110ed0d9-a366-7fdc-c036-c73670ec984c.png" width="350px" />