このような形のボタンを作りたい
これをxmlで行う方法はありますか?いくつかのポイントを設定するように、私の場合は5.です。
必要なのは、プロジェクトのshape xml file
フォルダーにdrawable-xxx
を作成し、この形状を使用することですボタンの背景として。
これがarrow_shape.xml
という名前のシェイプファイルです。
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<!-- Colored rectangle-->
<item>
<shape Android:shape="rectangle">
<size
Android:width="100dp"
Android:height="40dp" />
<solid Android:color="#5EB888" />
<corners Android:radius="0dp"/>
</shape>
</item>
<!-- This rectangle for the top arrow Edge -->
<!-- Its color should be the same as the layout's background -->
<item
Android:top="-40dp"
Android:bottom="65dp"
Android:right="-30dp">
<rotate
Android:fromDegrees="45">
<shape Android:shape="rectangle">
<solid Android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the lower arrow Edge -->
<!-- Its color should be the same as the layout's background -->
<item
Android:top="65dp"
Android:bottom="-40dp"
Android:right="-30dp">
<rotate
Android:fromDegrees="-45">
<shape Android:shape="rectangle">
<solid Android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
次に、それをボタンの背景として使用します。たとえば、
<Button
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="@drawable/arrow_shape"/>
これがスクリーンショットです:
Layer-List
の詳細については、 こちら を参照してください。
編集:
ただし、シェイプの幅と高さには特定の値を使用したことを覚えておいてください。それらを変更する場合は、top, bottom and right attributes
の値を変更する必要があるかもしれません。したがって、その場合は、プロジェクトのvalues
ディレクトリで異なる値を使用することを検討してください。
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item Android:width="50dp" Android:height="10dp" Android:right="6dp">
<shape>
<solid Android:color="@Android:color/holo_green_dark"/>
<corners
Android:bottomLeftRadius="2dp"
Android:topLeftRadius="2dp"/>
</shape>
</item>
<item Android:width="7dp" Android:height="7dp"
Android:left="50dp">
<rotate Android:fromDegrees="45"
Android:pivotX="0"
Android:pivotY="0">
<shape>
<solid Android:color="@Android:color/holo_green_dark"/>
</shape>
</rotate>
</item>
</layer-list>
Material Components library を使用すると、標準の MaterialButton
shapeAppearanceOverlay
属性:
何かのようなもの:
<com.google.Android.material.button.MaterialButton
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Triangle"
... />
そしてあなたのスタイルで定義します:
<style name="ShapeAppearanceOverlay.Button.Triangle" 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>