Как нарисовать круг внутри круга с помощью форм xml?

Я пытаюсь сделать большой палец для панели поиска для своего приложения, и я хочу иметь внутренний круг, окруженный другим большим (полупрозрачным) внешним кругом. Я пытаюсь использовать layer-list, но у меня возникают проблемы. Ниже мой код...

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape
        android:shape="oval" >
        <solid android:color="#00f" />

        <size
            android:height="15dp"
            android:width="15dp" />
    </shape>
</item>

<item>
    <shape
        android:shape="oval" >
        <solid android:color="#f00" />

        <size
            android:height="10dp"
            android:width="10dp" />
    </shape>
</item>

</layer-list>

Я ожидаю увидеть небольшой красный круг поверх большого синего круга, но все, что я вижу, это маленький красный круг. У кого-нибудь есть идеи?

Ответ 1

Единственный способ, с помощью которого я работал, это определить прозрачный ход для внутреннего (то есть верхнего) круга, который отличается от размера большего и меньшего круга.

Например, это:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
    <shape android:shape="oval">
        <solid android:color="#00f"/>
        <size
                android:width="15dp"
                android:height="15dp"/>
    </shape>
</item>
<!-- Smaller red circle in front -->
<item>
    <shape android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke android:color="@android:color/transparent"
                android:width="5dp"/>
        <solid android:color="#f00"/>
        <size
                android:width="10dp"
                android:height="10dp"/>
    </shape>
</item>
</layer-list>

... выглядит так:

Ответ 2

надеюсь, что это поможет. Это можно сделать *.xml

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

      <item>
          <shape android:shape="oval">
              <padding
                  android:bottom="1dp"
                  android:left="1dip"
                  android:right="1dp"
                  android:top="1dp" />

              <solid android:color="#000" />
          </shape>
      </item>
      <item>
          <shape android:shape="oval">
              <padding
                  android:bottom="1dp"
                  android:left="1dip"
                  android:right="1dp"
                  android:top="1dp" />

              <solid android:color="#EEE" />
          </shape>
      </item>
    </layer-list>

Ответ 3

Поздно, но, возможно, полезно, вы можете использовать прописку для центрального круга.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="oval">
        <solid
            android:color="#00fff"/>
        <padding
            android:bottom="30dp"
            android:left="30dp"
            android:right="30dp"
            android:top="30dp"/>
        <stroke
            android:width="1dp"
            android:color="@color/holo_red_light"/>
    </shape>
</item>
<item>
    <shape
        android:shape="oval">
        <solid
            android:color="#00666666"/>

        <size
            android:width="120dp"
            android:height="120dp"/>
        <stroke
            android:width="1dp"
            android:color="@color/holo_red_light"/>
    </shape>

</item>
</layer-list>

Ответ 4

Мне удалось решить эту проблему, установив ширину и высоту <item> в <layer-list>. Вероятно, это не самая лучшая практика, но, похоже, выглядит так, как на фоне значка в виде списка с фиксированными размерами.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- larger circle at the back -->
    <item android:height="54dp" android:width="54dp" android:gravity="center">
        <shape
               android:shape="oval">

            <solid
                android:color="#0000FF"/>

            <!-- thicker outer boarder -->
            <stroke
                android:width="2dp"
                android:color="#000000"/>
        </shape>
    </item>


    <!-- inner circle -->
    <item android:height="40dp" android:width="40dp" android:gravity="center">
        <shape
               android:shape="oval"  >
            <solid
                android:color="#00FF00"/>

            <stroke
                android:width="1dp"
                android:color="#000000"/>

        </shape>
    </item>
</layer-list>

Ответ 5

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

<shape android:shape="oval">
    <solid android:color="#FFF" />
    <size
        android:width="15dp"
        android:height="15dp" />
    <stroke
        android:width="6dp"
        android:color="#000" /> 
</shape>

И это результат.

Ответ 6

Надеюсь, что приведенный ниже фрагмент кода поможет :)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <!-- larger circle at the back -->
        <item>
            <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="#FFFFFF" />
                  <stroke
                      android:width="1dp"
                      android:color="#000000" /></shape>
        </item>

    <!-- inner circle -->
    <item  >
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:innerRadius="0dp"
               android:shape="ring"
               android:thicknessRatio="2.1"
               android:useLevel="false" >
            <solid android:color="#000000" />
            <stroke
                android:width="1dp"
                android:color="#FFFFFF" /></shape>
    </item>
</layer-list>

Ответ 7

это короткая версия ответа Шона Барбо

<stroke
    android:width="1dp"
    android:color="@color/white" />
<solid android:color="@color/dark_blue" />

<size
    android:width="14dp"
    android:height="14dp" />

Ответ 8

Просто вы должны использовать атрибут Shap

XML-код для рисования

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <stroke android:width="2dp" android:color="#B91969"/>
    <size android:width="@dimen/dim_16dp" android:height="@dimen/dim_16dp" />
    <solid android:color="#0f0" />
</shape>

Выход

Ответ 9

Если вам нужно нарисовать 3 или более кружков, следуйте этой схеме:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
            <stroke
                android:width="20dp"
                android:color="#0000ff" />
        </shape>
    </item>
    <!-- Green circle in middle -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
            <stroke
                android:width="20dp"
                android:color="#00ff00" />
        </shape>
    </item>
    <!-- Smaller red circle at front -->
    <item>
        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

Результат:

Обратите внимание, что в отличие от других ответов здесь, это решение не рисует круги поверх других кругов, что позволяет избежать оверлея.