如何在android xml可绘制文件中定义圆形?

时间:2022-11-21 12:34:23

I have some problems finding the documentation of the definitions of shapes in XML for Android. I would like to define a simple circle filled with a solid color in an XML File to include it into my layout files.

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

Sadly the Documentation on android.com does not cover the XML attributes of the Shape classes. I think I should use an ArcShape to draw a circle but there is no explanation on how to set the size, the color, or the angle needed to make a circle out of an Arc.

遗憾的是,android.com上的文档没有包含Shape类的XML属性。我想我应该用弧形来画一个圆,但是对于如何设置圆的大小、颜色或角度没有任何解释。

12 个解决方案

#1


1126  

This is a simple circle as a drawable in Android.

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

#2


580  

Set this as your view background

设置为您的视图背景

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

如何在android xml可绘制文件中定义圆形?

For solid circle use:

固体循环使用:

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

如何在android xml可绘制文件中定义圆形?

Solid with stroke:

固体与中风:

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

如何在android xml可绘制文件中定义圆形?

Note: To make the oval shapes appear as circle, in these examples, either your view that your are using these shapes as its background should be a square or you have to set the height and width properties of the shape tag to an equal value.

注意:在这些例子中,为了使椭圆形状出现在圆圈中,你可以看到,你的视图使用这些形状作为背景应该是正方形,或者你必须设置形状标签的高度和宽度属性为相等的值。

#3


82  

Code for Simple circle

代码简单的圆

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

#4


45  

Look in the Android SDK samples. There are several examples in the ApiDemos project:

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

/ApiDemos/res/drawable/

/ ApiDemos / res /可拉的/

  • black_box.xml
  • black_box.xml
  • shape_5.xml
  • shape_5.xml
  • etc

It will look something like this for a circle with a gradient fill:

对于一个带有渐变填充的圆,它看起来是这样的:

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

#5


39  

You can use VectorDrawable as below :

你可以使用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>

The above xml renders as :

上面的xml呈现为:

如何在android xml可绘制文件中定义圆形?

#6


15  

Here's a simple circle_background.xml for pre-material:

这是一个简单的circle_background。xml pre-material:

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

You can use with the attribute 'android:background="@drawable/circle_background" in your button's layout definition

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

#7


15  

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

#8


6  

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

#9


4  

If you want a circle like this:

如果你想要这样一个圆:

如何在android xml可绘制文件中定义圆形?

Try using the code below:

试着使用下面的代码:

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

#10


0  

I couldn't draw a circle inside my ConstraintLayout for some reason, I just couldn't use any of the answers above.

由于某些原因,我不能在我的约束布局中画一个圆圈,我不能使用上面的任何答案。

What did work perfectly is a simple TextView with the text that comes out, when you press "Alt+7":

当你按下Alt+7时,一个简单的文本视图就会显示出来:

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>

#11


0  

You can try this -

你可以试试这个-

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

Also, you can adjust the radius of the circle by adjusting android:thickness.

你也可以通过调整android:厚度来调整圆的半径。

如何在android xml可绘制文件中定义圆形?

#12


-23  

Just use

只使用

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );

#1


1126  

This is a simple circle as a drawable in Android.

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

#2


580  

Set this as your view background

设置为您的视图背景

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

如何在android xml可绘制文件中定义圆形?

For solid circle use:

固体循环使用:

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

如何在android xml可绘制文件中定义圆形?

Solid with stroke:

固体与中风:

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

如何在android xml可绘制文件中定义圆形?

Note: To make the oval shapes appear as circle, in these examples, either your view that your are using these shapes as its background should be a square or you have to set the height and width properties of the shape tag to an equal value.

注意:在这些例子中,为了使椭圆形状出现在圆圈中,你可以看到,你的视图使用这些形状作为背景应该是正方形,或者你必须设置形状标签的高度和宽度属性为相等的值。

#3


82  

Code for Simple circle

代码简单的圆

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

#4


45  

Look in the Android SDK samples. There are several examples in the ApiDemos project:

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

/ApiDemos/res/drawable/

/ ApiDemos / res /可拉的/

  • black_box.xml
  • black_box.xml
  • shape_5.xml
  • shape_5.xml
  • etc

It will look something like this for a circle with a gradient fill:

对于一个带有渐变填充的圆,它看起来是这样的:

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

#5


39  

You can use VectorDrawable as below :

你可以使用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>

The above xml renders as :

上面的xml呈现为:

如何在android xml可绘制文件中定义圆形?

#6


15  

Here's a simple circle_background.xml for pre-material:

这是一个简单的circle_background。xml pre-material:

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

You can use with the attribute 'android:background="@drawable/circle_background" in your button's layout definition

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

#7


15  

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

#8


6  

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

#9


4  

If you want a circle like this:

如果你想要这样一个圆:

如何在android xml可绘制文件中定义圆形?

Try using the code below:

试着使用下面的代码:

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

#10


0  

I couldn't draw a circle inside my ConstraintLayout for some reason, I just couldn't use any of the answers above.

由于某些原因,我不能在我的约束布局中画一个圆圈,我不能使用上面的任何答案。

What did work perfectly is a simple TextView with the text that comes out, when you press "Alt+7":

当你按下Alt+7时,一个简单的文本视图就会显示出来:

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>

#11


0  

You can try this -

你可以试试这个-

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

Also, you can adjust the radius of the circle by adjusting android:thickness.

你也可以通过调整android:厚度来调整圆的半径。

如何在android xml可绘制文件中定义圆形?

#12


-23  

Just use

只使用

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );