web-dev-qa-db-fra.com

Android - créer une forme de flèche avec xml

Je veux faire un bouton pour ma forme comme celui-ci

enter image description here

Existe-t-il un moyen de le faire avec xml? Comme fixer quelques points, dans mon cas j'en ai 5 ..

androidandroid-buttonandroid-shape
17
Boldijar Paul

Ce dont vous avez besoin est de créer un shape xml file dans le projet drawable-xxx dossier, puis utilisez cette forme comme arrière-plan pour un bouton.

Voici le fichier de forme appelé 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>

Ensuite, utilisez-le comme arrière-plan du bouton, par exemple

<Button
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/arrow_shape"/>

Voici la capture d'écran:

enter image description here

Plus d'informations sur Layer-List vous pouvez trouver ici .

MODIFIER:

Gardez à l'esprit que j'ai utilisé certaines valeurs pour la largeur et la hauteur de la forme. Si vous changez ceux dont vous pourriez avoir besoin pour changer les valeurs de top, bottom and right attributes. Donc, dans ce cas, envisagez d'utiliser des valeurs différentes dans le répertoire values de votre projet.

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

Avec la bibliothèque de composants de matériaux vous pouvez simplement utiliser le standard MaterialButton définissant (shapeAppearanceOverlay attribut:

Quelque chose comme:

  <com.google.Android.material.button.MaterialButton
      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Triangle"
      ...      />

Et dans votre style définissez:

  <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