Прозрачный круг с рамкой
Я пытаюсь создать круг только с границей, используя XML в Android:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke android:width="1dp"
android:color="#000000"/>
</shape>
Код, который я использовал, размещен выше. Тем не менее, я получаю твердый диск, а не кольцо. Я хотел бы получить вывод, используя только XML, а не canvas. Что я делаю неправильно?
Благодарю.
РЕДАКТИРОВАТЬ: начало работать благодаря ответу ниже. Вот мой окончательный код:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
android:useLevel="false" >
<solid android:color="@android:color/transparent" />
<size android:width="100dp"
android:height="100dp"/>
<stroke android:width="1dp"
android:color="#FFFFFF"/>
</shape>
11 ответов
Попробуйте что-то вроде этого
<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/transparent" />
<stroke
android:width="2dp"
android:color="@android:color/darker_gray" />
</shape>
Обновление: сделано android:thicknessRatio="2"
дать полный круг (используя Nexus 5 - Lollipop)
Использовать это будет работать
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:centerX=".6"
android:centerY=".40"
android:endColor="@android:color/transparent"
android:gradientRadius="20"
android:startColor="@android:color/transparent"
android:type="radial" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<size
android:height="100dp"
android:width="100dp" />
</shape>
Пустотелый
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="@color/indicator_unselected" />
</shape>
Полный
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="100dp" />
<solid android:color="@android:color/white" />
</shape>
Эффект обводки может быть достигнут путем рисования прозрачного овала с обводкой требуемого цвета (#000 в примере):
<?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/transparent" />
<stroke
android:width="1dp"
android:color="#000" />
<size
android:width="40dp"
android:height="40dp" />
</shape>
Если вы можете использовать векторные рисунки, попробуйте это
<vector android:height="24dp" android:viewportHeight="512.0"
android:viewportWidth="512.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FFFFFF" android:fillType="evenOdd"
android:pathData="M0,0L512,0L512,512L0,512L0,0ZM256,511C396.8,511 511,396.8 511,256C511,115.2 396.8,1 256,1C115.2,1 1,115.2 1,256C1,396.8 115.2,511 256,511Z"
android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>
Вы можете использовать Android встроенное значение для прозрачного как @android:color/transparent
или использовать #0000
или же #00000000
для вышеуказанного начало для 4 цифр сначала было для альфы, а в значении 8 цифр первые две цифры были для того же алфавита.
Когда вы просто даете 3-значную или 6-значную цветную шкалу, альфа-значение по умолчанию передается путем передачи 4-значного или 8-значного значения, устанавливающего альфа этого значения цвета
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval" >
<gradient
android:endColor="@android:color/transparent"
android:gradientRadius="20"
android:startColor="@android:color/transparent" />
<stroke
android:width="1dp"
android:color="#d9d9d9" />
<size
android:height="100dp"
android:width="100dp" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="oval" >
<gradient
android:endColor="@android:color/transparent"
android:gradientRadius="20"
android:startColor="@android:color/transparent" />
<stroke
android:width="1dp"
android:color="#b3b3b3" />
<size
android:height="100dp"
android:width="100dp" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval" >
<stroke
android:width="4dp"
android:color="@color/colorPrimaryDark" />
<corners android:radius="0dp" />
</shape>
</item>
<item
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<shape android:shape="oval">
<solid android:color="@color/colorRed" />
<size android:height="@dimen/_100sdp"
android:width="@dimen/_100sdp"></size>
</shape>
</item>
</layer-list>
Если вы установите цвет на #00000000
, результат будет прозрачным. Вы хотели бы сделать это таким образом, если вы хотите изменить это в будущем развития. Если вы хотите, чтобы он был красным и частично прозрачным, например, это было бы #ff000088
Последние два числа - непрозрачность. Я делаю это таким образом, чтобы облегчить будущие изменения.
Вы можете попробовать установить фон изображения с помощью этого рисунка:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval" >
<stroke
android:width="4dp"
android:color="@android:color/black" />
<corners android:radius="0dp" />
</shape>
</item>
<item
android:top="8dp"
android:bottom="8dp"
android:left="8dp"
android:right="8dp">
<shape android:shape="oval">
<solid android:color="@android:color/black" />
<size
android:height="100dp"
android:width="100dp" />
</shape>
</item>
</layer-list>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="2"
android:shape="ring"
android:thicknessRatio="1"
android:useLevel="false">
<gradient
android:type="radial"
android:gradientRadius="8dp"
android:endColor="@color/colorDarkPurple"
android:elevation="5dp"
/>
<stroke
android:width="2dp"
android:color="@color/colorLilac"/>
</shape>