web-dev-qa-db-ja.com

Android-xmlで矢印の形を作る

このような形のボタンを作りたい

enter image description here

これをxmlで行う方法はありますか？いくつかのポイントを設定するように、私の場合は5.です。

androidandroid-buttonandroid-shape
17
Boldijar Paul

必要なのは、プロジェクトの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"/>

これがスクリーンショットです：

enter image description here

Layer-Listの詳細については、 こちら を参照してください。

編集：

ただし、シェイプの幅と高さには特定の値を使用したことを覚えておいてください。それらを変更する場合は、top, bottom and right attributesの値を変更する必要があるかもしれません。したがって、その場合は、プロジェクトのvaluesディレクトリで異なる値を使用することを検討してください。

24
Onik
<?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>

green arrow

11
XimenaB

Material Components library を使用すると、標準の MaterialButtonshapeAppearanceOverlay 属性：

何かのようなもの：

  <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>

enter image description here

4
Gabriele Mariotti