Android: Создайте кнопку с треугольной формой, используя определения xml (drawable)

Я хочу создать это с помощью кнопки (TextView) с помощью определения XML:

В макете Activity я:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_arrow" <!-- I NEED IMPLEMENT THIS -->
        android:clickable="true"
        android:drawablePadding="7dp"
        android:gravity="center"
        android:drawableLeft="@drawable/music_cloud"
        android:onClick="exportSong"
        android:padding="20dp"
        android:text="@string/export_upload"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/dark_yellow_text_color"
        android:textStyle="bold" />

Я основал несколько сообщений:

making-a-triangle-shape-using-xml-definitions

Треугольник Android (стрелка), определяемый как форма XML

или Android - создайте форму стрелки с помощью xml

Я попытался изменить несколько определений XML, но ничего хорошего не было. Есть ли простой способ, как реализовать эту форму? Также он должен иметь прозрачный фон.

Ответ 1

Если у кого-то еще есть проблемы с этим:

XML:

<item android:top="45dp">
    <shape>
        <size android:height="100dp" android:width="90dp"/>
        <solid android:color="@android:color/holo_orange_light" />
    </shape>
</item>
<item android:top="36dp" android:left="11dp">
    <rotate
        android:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="80%"
        android:pivotY="20%" >
        <shape>
            <size android:width="40dp"
                android:height="30dp"/>
            <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>
            <solid android:color="@android:color/holo_orange_light" />
        </shape>
    </rotate>
</item>
</layer-list>

переопределить TextView и использовать его в вашем макете:

public class CustomTextView extends TextView {

    private int mWidth;
    private int mHeight;


    public CustomTextView(Context context, AttributeSet attrs)  {
        super(context, attrs);

    }

    @Override
    protected void onDraw(Canvas canvas) {

       super.onDraw(canvas);
        Paint mPaint = new Paint();
        int color = getResources().getColor(R.color.YourColor);

        mPaint.setColor(color);
        Path mPath = new Path();
        mPath.moveTo(.0f, this.getHeight());
        mPath.lineTo(0.8f * this.getWidth(), this.getHeight());
        mPath.lineTo(this.getWidth(), 0.5f * this.getHeight());
        mPath.lineTo(0.8f * this.getWidth(), .0f);
        mPath.lineTo(.0f, .0f);
        mPath.lineTo(.0f, this.getHeight());

        canvas.clipPath(mPath);
        canvas.drawPath(mPath,mPaint);


    }
}

Относительно примера xml: перекрываются два прямоугольника. Вам нужно много играть со значениями, и это затрудняет использование на разных представлениях. Я думаю, что использование пользовательского представления является лучшим решением в этом случае.

Ответ 2

Вы можете добиться этого также с помощью MaterialButton, включенного в библиотеку компонентов материалов.

Добавьте MaterialButton в макет, а затем:

используйте атрибут app:icon, чтобы добавить значок слева
применять стиль Widget.MaterialComponents.Button.Icon, предоставленный библиотекой
определить пользовательскую фигуру с помощью атрибута app:shapeAppearanceOverlay (для этого требуется v.1.1.0)

Что-то вроде:

   <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/ic_add_24px"
        android:text="..."
        app:shapeAppearanceOverlay="@style/CustomShapeAppearanceOverlay.Button"
        .../>

где shapeAppearanceOverlay определен в вашем styles.xml:

  <style name="CustomShapeAppearanceOverlay.Button" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopRight">18dp</item>
    <item name="cornerSizeBottomRight">18dp</item>
  </style>

Окончательный результат:

Ответ 3

<item>
    <inset android:insetBottom="2dp" >
        <selector xmlns:android="http://schemas.android.com/apk/res/android" >
            <item android:state_pressed="true">
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFAB00"
                        android:startColor="#FFAB00" />
                </shape>
            </item>
            <item android:state_focused="true">
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFAB00"
                        android:startColor="#FFAB00" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFD600"
                        android:startColor="#FFD600" />
                </shape>
            </item>
        </selector>
    </inset>
</item>
<item
    android:bottom="65dp"
    android:right="-129dp"
    android:top="-40dp">
    <rotate android:fromDegrees="50" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/background_color_light_yellow" />
        </shape>
    </rotate>
</item>
<item
    android:bottom="-40dp"
    android:right="-129dp"
    android:top="65dp">
    <rotate android:fromDegrees="-50" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/background_color_light_yellow" />
        </shape>
    </rotate>
</item>