Как нарисовать круг внутри круга с помощью форм 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>
... выглядит так:
![enter image description here]()
Ответ 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>
И это результат. ![enter image description here]()
Ответ 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>
Выход
![enter image description here]()
Ответ 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>
Результат:
![enter image description here]()
Обратите внимание, что в отличие от других ответов здесь, это решение не рисует круги поверх других кругов, что позволяет избежать оверлея.
