798

我在查找 XML for Android 中形状定义的文档时遇到了一些问题。我想在 XML 文件中定义一个用纯色填充的简单圆圈,以将其包含到我的布局文件中。

遗憾的是,android.com 上的文档并未涵盖 Shape 类的 XML 属性。我认为我应该使用ArcShape来绘制一个圆,但是没有说明如何设置从 Arc 中制作一个圆所需的大小、颜色或角度。

4

18 回答 18

1724

这是一个简单的圆形作为 Android 中的可绘制对象。

<?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>
于 2012-08-25T12:24:53.533 回答
847

将此设置为您的视图背景

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

在此处输入图像描述

注意:要使oval形状显示为圆形,在这些示例中,您使用此形状作为其背景的视图应该是正方形,或者您必须将形状标记的heightandwidth属性设置为相等的值。

于 2016-01-11T15:08:59.657 回答
103

简单圆的代码

<?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>
于 2014-11-25T10:01:17.627 回答
51

您可以使用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 呈现为:

在此处输入图像描述

于 2016-07-29T16:17:12.187 回答
46

查看 Android SDK 示例。ApiDemos 项目中有几个例子:

/ApiDemos/res/drawable/

  • black_box.xml
  • shape_5.xml
  • ETC

对于带有渐变填充的圆圈,它看起来像这样:

<?xml 版本="1.0" 编码="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <渐变 android:startColor="#FFFF0000" android:endColor="#80FF00FF"
            安卓:角度=“270”/>
</形状>

于 2011-08-11T17:32:37.013 回答
23

如果你想要这样的圈子

在此处输入图像描述

尝试使用以下代码:

<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>
于 2018-02-06T09:36:35.400 回答
22
<?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>
于 2016-01-29T10:00:42.947 回答
19

这是一个简单的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"您可以在按钮的布局定义中使用该属性

于 2015-06-09T23:28:08.983 回答
16

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>

在此处输入图像描述

于 2019-07-06T00:36:52.750 回答
15

Android XML 可绘制文件中的圆形

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

截屏

在此处输入图像描述

于 2020-06-05T19:35:04.883 回答
9
<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke
        android:width="10dp"
        android:color="@color/white"/>

    <gradient
        android:startColor="@color/red"
        android:centerColor="@color/red"
        android:endColor="@color/red"
        android:angle="270"/>

    <size 
        android:width="250dp" 
        android:height="250dp"/>
</shape>
于 2017-04-10T12:05:56.400 回答
6

用破折号试试下面的代码:

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

<solid android:color="@color/black" />

<stroke
    android:width="@dimen/_1sdp"
    android:color="@color/white"
    android:dashWidth="@dimen/_1sdp"
    android:dashGap="@dimen/_1sdp" />

尝试不带破折号的代码

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

<size
    android:width="@dimen/_60sdp"
    android:height="@dimen/_60sdp" />

<solid android:color="@color/black" />

<stroke
    android:width="@dimen/_1sdp"
    android:color="@color/white"
     />

不带破折号的输出

输出

于 2021-04-28T08:03:20.340 回答
5

你可以尝试使用这个

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

<item>
    <shape
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false" >
        <solid android:color="@color/button_blue_two" />
    </shape>
</item>

如果您将其用于文本视图,则不必担心宽度和高度的纵横比

于 2019-11-13T12:21:31.543 回答
5

你可以试试这个——

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="700"
    android:thickness="100dp"
    android:useLevel="false">

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

</shape>

此外,您可以通过调整来调整圆的半径android:thickness

在此处输入图像描述

于 2018-06-07T08:39:26.753 回答
4

由于某种原因,我无法在我的 ConstraintLayout 内画一个圆圈,我只是无法使用上面的任何答案。

当您按下“Alt+7”时,完美的工作是一个带有文本的简单 TextView:

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>
于 2018-05-01T13:52:40.113 回答
2

您可以创建自定义可绘制对象以动态更改圆的颜色和半径

import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.drawable.Drawable;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class CircleDrawable extends Drawable {

    private Paint circlePaint;
    private int fillColor;
    private int strokeColor;
    private float radius;

    public CircleDrawable(int fillColor, int strokeColor, float radius) {
        this.fillColor = fillColor;
        this.strokeColor = strokeColor;
        this.radius = radius;
        circlePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        int x=getBounds().centerX();
        int y=getBounds().centerY();
        //draw fill color circle
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setColor(fillColor);
        canvas.drawCircle(x,y,radius,circlePaint);
        // draw stroke circle
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setColor(strokeColor);
        circlePaint.setStrokeWidth(5);
        canvas.drawCircle(x,y,radius,circlePaint);
    }

    @Override
    public void setAlpha(int alpha) {
        circlePaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
         circlePaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

从 UI 中设置它以获取圆形

imageView.setImageDrawable(new CircleDrawable(Color.RED,Color.YELLOW,100));

输出将是这样的

在此处输入图像描述

于 2021-03-10T06:29:51.827 回答
0
<?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="@color/text_color_green"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>
于 2018-10-10T11:36:39.600 回答
-22

只需使用

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );
于 2010-07-06T10:05:43.360 回答