[英]Android - make an arrow shape with xml
I want to make a button for my shape like this one我想为我的形状制作一个像这样的按钮
Is there a way to do this with xml ?有没有办法用 xml 做到这一点? Like setting some points, in my case I have 5..
就像设置一些点一样,就我而言,我有 5..
What you need is to create a shape xml file
in your project's drawable-xxx
folder and then use this shape as background for a button.您需要在项目的
drawable-xxx
文件夹中创建一个shape xml file
,然后将此形状用作按钮的背景。
Here is the shape file called arrow_shape.xml
:这是名为
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>
Then use it as button's background, for example然后将其用作按钮的背景,例如
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/arrow_shape"/>
Here is the screenshot:这是屏幕截图:
More info on Layer-List
you can find here .您可以在此处找到有关
Layer-List
更多信息。
EDIT:编辑:
Keep in mind though that I used certain values for the shape's width and height.请记住,我对形状的宽度和高度使用了某些值。 If you change those you might need to change the values of the
top, bottom and right attributes
.如果您更改这些,您可能需要更改
top, bottom and right attributes
。 So, in that case consider using different values in your project's values
directory.因此,在这种情况下,请考虑在项目的
values
目录中使用不同的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>
With the Material Components library you can just use the standard MaterialButton
defining the shapeAppearanceOverlay
attribute:使用Material Components 库,您可以只使用定义
shapeAppearanceOverlay
属性的标准MaterialButton
:
Something like:就像是:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Triangle"
... />
And in your style define:并以您的风格定义:
<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">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.