Как определить форму круга в файле для рисования Android XML?

У меня проблемы с поиском документации с определениями фигур в XML для Android. Я хотел бы определить простой круг, залитый сплошным цветом в XML-файле, чтобы включить его в мои файлы макета.

К сожалению, документация на android.com не охватывает атрибуты XML классов Shape. Я думаю, мне следует использовать ArcShape, чтобы нарисовать круг, но там нет объяснения, как установить размер, цвет или угол, необходимые для создания круга из дуги.


person Janusz    schedule 06.07.2010    source источник
comment
Здесь вы можете прочитать о том, как создать форму, которую можно рисовать: developer.android .com / guide / themes / resources /.   -  person Mario Kutlev    schedule 20.08.2013
comment
Вы можете получить XML-код круга отсюда developer.android.com/samples/ WearSpeakerSample / res / drawable /   -  person Shahab Rauf    schedule 15.02.2018
comment
С тех пор документация Android Dev была улучшена. Теперь он охватывает элемент android:shape - Drawable resources.   -  person naXa    schedule 27.09.2018


Ответы (16)


Это простой круг, который можно рисовать в 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>
person Arefin    schedule 25.08.2012
comment
А как динамически менять цвет? - person Ankit Garg; 26.12.2014
comment
@AnkitGarg, вы можете применить цветовой фильтр из кода Java (см. Класс Drawable) - person milosmns; 12.02.2015
comment
Я попробовал dp, и он превратился в овал. Для меня использование pt вместо этого исправило. - person Tyler; 29.03.2015
comment
В некоторых телефонах, если вы используете овальную форму, даже устанавливая одинаковое значение для ширины и высоты, это кажется немного странным. Использование кольца в качестве формы решило проблему. - person FelipeKunzler; 30.08.2015
comment
Нет необходимости в size в shape, если вы позже определите размер квадрата для представления. - person Ferran Maylinch; 25.11.2015
comment
Его форма овальная, а не круглая. Кто-нибудь может подтвердить ?? - person Tarun; 21.12.2015
comment
Вы тоже можете добавить изображение в середину этого круга? - person Jonathan; 27.02.2018
comment
@jonney Добавьте туда же круглое изображение с полями. Задайте новый вопрос, если вам нужна дополнительная помощь. - person Jake Lee; 15.03.2018
comment
как я могу заполнить полукруг двумя цветами - person Sattar; 02.08.2018
comment
@Tarun просто установите ширину равной высоте, она будет отображаться в виде круга - person Vadim Kotov; 28.11.2019
comment
для программного изменения цвета drawable вы можете получить grawable напрямую, вызвав getDrawable макета, который он был назначен, а затем изменить цвет оттуда. - person Bénédicte Lagouge; 11.03.2020

Установите это в качестве фона просмотра

<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 выглядела как круг, в этих примерах либо ваше представление о том, что вы используете эту форму в качестве фона, должно быть квадратом, либо вам необходимо установить свойства height и width для тег формы на равное значение.

person M. Reza Nasirloo    schedule 11.01.2016
comment
Хорошее решение. Конечно, овал выглядит как круг, если ширина и высота обзора одинаковы. Я думаю, что был способ сделать так, чтобы он выглядел как круг независимо от размера изображения. - person Ferran Maylinch; 13.02.2016
comment
@FerranMaylinch Я думаю, что есть способ сделать так, чтобы он выглядел как круг независимо от размера представления. Я решил это, используя RelativeLayout, обертывающий как ImageView (с кругом как src drawable) с фиксированной шириной / высотой, так и TextView, который обертывает текст (например). - person Michele; 04.04.2016
comment
Я делаю то же самое, но круг нарисован овальным - person Bugs Happen; 19.01.2017
comment
Что, если нам нужно создать вокруг текстового представления с разными цветами границ во время выполнения? - person Anshul Tyagi; 27.03.2017
comment
@AnshulTyagi Я считаю, что это можно сделать, вызвав yourView.getBackground() и установив цвет вручную. вам нужно привести его к правильному типу, например ShapeDrawable. По этому поводу есть связанные вопросы по SO. - person M. Reza Nasirloo; 28.03.2017

Код для простого круга

<?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>
person Ravi Makvana    schedule 25.11.2014

Вы можете использовать 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 отображается как:

введите описание изображения здесь

person Riyas PK    schedule 29.07.2016
comment
Эй, у меня есть отступ между кругом и окном просмотра. Можете ли вы помочь мне? - person Ajeet; 07.02.2017
comment
@Ajeet, вы можете изменить размер области просмотра, и вы можете поместить свой путь внутри группы и указать перевод и масштаб <group android:translateX="-10" android:translateY="15"><path ... - person Boris Treukhov; 16.03.2017
comment
@Riyas, можешь ли ты объяснить часть pathData? что означают эти координаты? - person Darshan Miskin; 16.04.2019

Посмотрите образцы Android SDK. В проекте ApiDemos есть несколько примеров:

/ ApiDemos / res / вытяжка /

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

person goosemanjack    schedule 11.08.2011

Если вам нужен такой круг

введите описание изображения здесь

Попробуйте использовать приведенный ниже код:

<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>
person Paraskevas Ntsounos    schedule 06.02.2018

Вот простой файл 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" в определении макета вашей кнопки

person kip2    schedule 09.06.2015
comment
+ добавить «размер» к фигуре (ам) (в зависимости от варианта использования). - person TouchBoarder; 18.12.2015

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>

введите описание изображения здесь

person Tienanhvn    schedule 06.07.2019

форма круга в графическом файле 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>

Скриншот

введите описание изображения здесь

person Aftab Alam    schedule 05.06.2020

Вы можете попробовать это -

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

введите описание изображения здесь

person krhitesh    schedule 07.06.2018
comment
Это действительно здорово! Это, безусловно, требует некоторой игры, поскольку атрибуты не интуитивно понятны. Мне удалось заставить это отображать красивый пустой кружок для границы каждый раз. И вы можете использовать отступы, чтобы отображался весь круг. - person SMBiggs; 01.08.2019

По какой-то причине я не мог нарисовать круг внутри своего ConstraintLayout, я просто не мог использовать ни один из ответов выше.

Что отлично сработало, так это простой TextView с текстом, который появляется, когда вы нажимаете «Alt + 7»:

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>
person Иво Недев    schedule 01.05.2018
comment
Очень умно! Я уверен, что кому-то это пригодится. - person SMBiggs; 01.08.2019

Вы можете попробовать использовать это

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

and you don't have to bother the width and height aspect ratio if you are using this for a textview

person Cyril David    schedule 13.11.2019
comment
это то, что я хочу, спасибо - person Mosa; 20.02.2021

Вы можете создать настраиваемый объект для динамического изменения цвета и радиуса круга.

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

Установите это в пользовательском интерфейсе, чтобы получить форму круга

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

Результат будет таким

введите описание изображения здесь

person Jinesh Francis    schedule 10.03.2021

Попробуйте ниже код с тире:

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

Вывод без тире

Выход

person Mujahid Khan    schedule 28.04.2021

Просто используйте

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );
person Community    schedule 06.07.2010
comment
И как я могу установить это как src ImageView в моем файле макета XML? - person Janusz; 06.07.2010
comment
Это не применимо напрямую для кода макета xml. - person François Legrand; 24.08.2017
comment
это действительно работает. Спасибо :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (holder.getView (). Context, R.color.green) val layers = arrayOf (background, resource !!) greenRoundIcon.setImageDrawable (LayerDrawable (слои)) - person David; 27.02.2019

person    schedule
comment
Что <corners /> делает в овале (который, на мой взгляд, не имеет углов)? - person SMBiggs; 01.08.2019