Как определить форму круга в отрисовываемом файле 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" />
</ Форма>


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>

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


+ добавить «размер» к фигуре (ам) (в зависимости от варианта использования).
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>

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>

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


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.

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


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

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>

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 (слоев))
Дэвид

Так не понравилось, но это работает, и это помогает мне, спасибо
Павел Шорохов
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.