테두리가있는 투명한 원


83

Android에서 XML을 사용하여 테두리 만있는 원을 만들려고합니다.

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

답변:


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


7
나는 그것을 만든 android:thicknessRatio="2"밀폐 링 (넥서스 5, 롤리팝)로
데이비드

원 밖의 영역이 투명하게 표시되지 않습니다.
Paradox

대신 버튼의 이미지 뷰 시도 @Paradox
Nikunj 파텔

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 자리 값을 전달하여 해당 색상 값의 알파를 설정합니다.


1
안녕하세요 Pratik, 답변의 알파 부분을 이해하지 못했습니다. XML 파일에 <solid android : color = "# 0000"/> 줄을 추가했습니다. 그러나 여전히 같은 결과를 얻었습니다.
Anirudh

이 알파는 색상의 불투명도를 설정하는 데 사용되었습니다. 완전 투명보다 4 0 또는 8 0을 설정하면 8 0의 값에서 처음 2 자리가 증가하면 불투명도 값만 증가합니다
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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.