如何在Android XML drawable文件中定义圆形形状？

Question

如何在Android XML drawable文件中定义圆形形状？

androidandroid-drawableshapes

826

我在查找Android平台上XML中形状定义的文档时遇到了一些问题。我想在XML文件中定义一个填充有纯色圆圈，以便将其包含在我的布局文件中。

不幸的是，android.com网站上的文档没有涵盖Shape类的XML属性。我认为我应该使用ArcShape来绘制一个圆，但是没有关于如何设置大小、颜色或角度的说明，以使弧形成为圆形。

- Janusz

3

在这里，您可以了解如何创建形状可绘制对象：http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape - Mario Kutlev

你可以从这里获取圆形XML：https://developer.android.com/samples/WearSpeakerSample/res/drawable/circle.html - Shahab Rauf

自那时起，Android Dev文档已经得到了改进。现在它涵盖了android:shape元素 - Drawable资源。 - naXa stands with Ukraine

19个回答

879

将此设置为您的视图背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="#78d9ff"/>
</shape>

使用实心圆：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#48b3ff"/>
</shape>

带描边的实心：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#199fff"/>
    <stroke
        android:width="2dp"
        android:color="#444444"/>
</shape>

注意：为了使椭圆形状呈现为圆形，在这些示例中，您使用此形状作为背景的视图应为正方形，或者您必须将形状标签的height和width属性设置为相等的值。

- M. Reza Nasirloo

2

不错的解决方案。当视图的宽度和高度相同时，椭圆形状会显示为圆形。我认为有一种方法可以让它无论视图的大小都显示为圆形。 - Ferran Maylinch

2

@FerranMaylinch “我认为有一种方法可以使它以圆形的形式出现，无论视图的大小如何。” 我使用RelativeLayout包装了一个ImageView（具有“src”可绘制的圆形）和一个包含文本的TextView（例如），从而解决了这个问题。ImageView具有固定的宽度/高度。 - Michele

我正在做完全相同的事情，但圆被画成椭圆形。 - Bugs Happen

如果我们需要在运行时创建一个围绕着TextView的不同边框颜色，该怎么办？ - Anshul Tyagi

@AnshulTyagi 我相信你可以通过调用 yourView.getBackground() 并手动设置颜色来实现。你需要将其强制转换为适当的类型，如 ShapeDrawable。关于此问题，SO 上有相关的问题。 - M. Reza Nasirloo

104

简单圆形的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <solid android:color="#9F2200"/>
        <stroke android:width="2dp" android:color="#fff" />
        <size android:width="80dp" android:height="80dp"/>
</shape>

- Ravi Makvana

从 https://dev59.com/RG0NtIcB2Jgan1znPuE7#70477622，该文件需要放在 res/drawable 而不是 res/layout。 - Fletch

54

你可以使用以下方式来使用VectorDrawable：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="64"
    android:viewportWidth="64">

    <path
        android:fillColor="#ff00ff"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

上述xml渲染为:

- Riyas PK

嘿，我在圆形和视口之间有一个填充。你能帮我解决一下吗？ - Ajeet

1

@Ajeet，您可以更改视口的大小，并将路径放入组中并指定平移和缩放 <group android:translateX="-10" android:translateY="15"><path ... - Boris Treukhov

4

@Riyas，您能解释一下pathData部分吗？这些坐标表示什么意思？ - Darshan Miskin

46

请查看Android SDK示例。在ApiDemos项目中有几个示例：

/ApiDemos/res/drawable/

black_box.xml
shape_5.xml
等等

如果要创建一个渐变填充的圆形，可以类似以下这样：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
            android:angle="270"/>
</shape>

- goosemanjack

25

如果你想要像这样的一个圆形

尝试使用以下代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray" />
</shape>

- Paraskevas Ntsounos

23

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <!-- fill color -->
    <solid android:color="@color/white" />

    <!-- radius -->
    <stroke
        android:width="1dp"
        android:color="@color/white" />

    <!-- corners -->
    <corners
        android:radius="2dp"/>
</shape>

- Ashana.Jackol

2

在椭圆形中，<corners /> 标签有什么作用（我认为椭圆形没有角落）？ - SMBiggs

22

这是一个用于早期 Material Design 的简单的 circle_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/color_accent_dark" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/color_accent" />
        </shape>
    </item>
</selector>

您可以在按钮的布局定义中使用属性'android:background="@drawable/circle_background"

- kip2

根据用例，在形状中添加“大小”。 - TouchBoarder

21

一个 Android XML drawable 文件中的圆形形状

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1.5dp"
        android:color="@android:color/holo_red_light" />
    <size
        android:width="120dp"
        android:height="120dp" />
</shape>

屏幕截图

- Aftab Alam

18

res/drawble/circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape android:shape="oval">
            <solid android:color="#e42828"/>
            <stroke android:color="#3b91d7" android:width="5dp"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

- Tienanhvn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arefin · Accepted Answer

这是在Android中作为drawable的简单圆形。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#666666"/>

   <size 
       android:width="120dp"
        android:height="120dp"/>
</shape>