Прозрачный круг с рамкой

83

Я пытаюсь создать круг только с рамкой, используя 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, а не холст. Что я делаю неправильно?

Благодарю.

РЕДАКТИРОВАТЬ: Все заработало благодаря ответу ниже. Вот мой последний код:

<?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>
android xml geometry transparent Анирудх
источник

Ответы:

188

Попробуйте что-то вроде этого

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

stinepike
источник
7
Я сделал его android:thicknessRatio="2"замкнутым кольцом (Nexus 5, Lollipop)
Дэвид
Область за пределами круга мне не кажется прозрачной.
Paradox
@Paradox попробуйте изображение вместо кнопки
Никундж Патель
33

используйте это, это будет работать

<?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>
анупам шарма
источник
13

Полый 

<?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>
Хитеш Саху
источник
6

Эффект обводки может быть достигнут, нарисовав прозрачный овал с обводкой требуемого цвета (# 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>
Алексей Буров
источник
3

Если вы можете использовать векторные чертежи, попробуйте это

<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>
Гектор
источник
2

Вы можете использовать встроенное значение Android для прозрачности @android:color/transparentили использовать#0000 или#00000000

для приведенного выше начало для 4-значного сначала было для альфа, а в 8-значном значении первые две цифры были для того же, что и альфа.

Когда вы просто указываете 3-значное или 6-значное значение цвета, чем значение альфа по умолчанию, вы, передавая 4-значное или 8-значное значение, устанавливаете альфа-значение этого значения цвета

Pratik
источник
1
Привет, Pratik, я не понял альфа-часть вашего ответа. Я добавил строку <solid android: color = "# 0000" /> в файл XML. Но все равно получил тот же результат.
Анирудх
эта альфа использовалась для установки непрозрачности цвета. Если вы установите 4 0 или 8 0, тогда он будет полностью прозрачным, с увеличением первых 2 цифр в значении 8 0 это только увеличивает значение непрозрачности
Pratik
2 
<?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>
Палак Джайн
источник
1 
<?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>
Мохсинали
источник
0

Если вы установите цвет #00000000, результат будет прозрачным. Вы бы захотели сделать это таким образом, если бы хотели изменить это в будущем при разработке. Например, если вы хотите, чтобы он был красным и частично прозрачным, это будет #ff000088: Последние два числа - это непрозрачность. Я делаю это так, чтобы облегчить будущие изменения.

Джек Папел
источник
0 
<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>
Патрисия Милу
источник