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

687

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

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

Януш
источник
3
Здесь вы можете прочитать о том, как создать форму для рисования: developer.android.com/guide/topics/resources/…
Марио Кутлев
Вы можете получить кружок XML здесь: developer.android.com/samples/WearSpeakerSample/res/drawable/…
Шахаб Рауф,
Документация по Android Dev была улучшена с тех пор. Теперь он охватывает android:shapeэлемент - Drawable Resources .
NaXa

Ответы:

1515

Это простой круг для рисования в 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>
Арефин
источник
51
А как динамически менять цвет?
Анкит Гарг
5
@AnkitGarg вы можете применить цветной фильтр из кода Java (см. Класс Drawable)
milosmns
7
Я попытался, dpи это было искажено в овальную форму. Для меня использование ptвместо этого исправило это.
Тайлер
13
Нет необходимости sizeв, shapeесли вы позже определите размер квадрата для представления.
Ферран Майлинч
2
Его форма овальная, а не круглая. Кто-нибудь может подтвердить ??
Тарун
762

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

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

М. Реза Насирлоо
источник
2
Хорошее решение. Конечно, овал выглядит как круг, если ширина и высота вида одинаковы. Я думаю, что был способ сделать его похожим на круг независимо от размера изображения.
Ферран Майлинч
2
@FerranMaylinch «Я думаю, что был способ сделать так, чтобы он выглядел как круг, независимо от размера изображения». Я решил это, используя RelativeLayout, обертывающий и ImageView (с кругом как «src») с фиксированной шириной / высотой, и TextView, который оборачивает текст (например).
Мишель
Я делаю то же самое, но круг нарисован как овал
Баги
Что если нам понадобится создать текстовое представление с разными цветами границ во время выполнения?
Аншул Тяги
@AnshulTyagi Я считаю, что вы можете сделать это, позвонив yourView.getBackground()и установив цвет вручную. Вы должны привести его к правильному типу, как ShapeDrawable. Есть связанные вопросы на SO по этому поводу.
М. Реза Насирлоо
93

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

<?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>
Рави Маквана
источник
46

Посмотрите в образцах 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">
    <градиент android: startColor = "# FFFF0000" android: endColor = "# 80FF00FF"
            Android: угол = "270" />
</ Форма>

goosemanjack
источник
46

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

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

Рияс ПК
источник
Эй, у меня есть отступ между кругом и окном просмотра. Можете ли вы мне помочь?
Ajeet
1
@Ajeet вы можете изменить размер окна просмотра и вы можете поместить свой путь в группу и указать перевод и масштаб<group android:translateX="-10" android:translateY="15"><path ...
Борис Треухов
2
@Riyas вы можете объяснить часть pathData? что эти координаты подразумевают?
Даршан Мискин
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>
Ashana.Jackol
источник
1
Что делать <corners />в овале (который, по моему мнению, не имеет углов)?
Скотт Биггс
18

Если вы хотите круг , как это

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

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

<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>
Параскевас Нцуунос
источник
17

Вот простой 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
8
<?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>
TeeTracker
источник
7

Рез / 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
источник
4

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

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

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

krhitesh
источник
Это действительно мило! Это, безусловно, требует некоторой игры, поскольку атрибуты не являются интуитивно понятными. Мне удалось заставить это отображать хороший пустой круг для границы каждый раз. И вы можете использовать отступы, чтобы убедиться, что отображается весь круг.
Скотт Биггс
2

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

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

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>
Иво Недев
источник
Очень умный! Я уверен, что кто-то найдет это полезным.
Скотт Биггс
очень полезно, здорово ..
Махбубур Рахман Хан
1

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

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

и вам не нужно беспокоиться о соотношении сторон ширины и высоты, если вы используете это для просмотра текста

Кирилл Давид
источник
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>
Varun Setia
источник
0

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

Скриншот

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

Афтаб Алам
источник
-22

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

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

источник
26
И как я могу установить это в качестве источника ImageView в моем файле макета XML?
Януш
Это не относится непосредственно к коду XML-макета
Франсуа Легран,
1
это на самом деле работает. Спасибо :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (holder.getView (). Context, R.color.green) val Layers = arrayOf (background, resource !!) greenRoundIcon.setImageDrawable (LayerDrawable (слоев))
Дэвид
Так не понравилось, но это работает, и это помогает мне, спасибо
Павел Шорохов