Bagaimana cara menentukan bentuk lingkaran dalam file yang dapat digambar Android XML?

Saya memiliki beberapa masalah dalam menemukan dokumentasi definisi bentuk dalam XML untuk Android. Saya ingin mendefinisikan lingkaran sederhana yang diisi dengan warna solid dalam File XML untuk memasukkannya ke dalam file layout saya.

Sayangnya Dokumentasi di android.com tidak mencakup atribut XML dari kelas Shape. Saya pikir saya harus menggunakan ArcShape untuk menggambar lingkaran tetapi tidak ada penjelasan tentang cara mengatur ukuran, warna, atau sudut yang diperlukan untuk membuat lingkaran keluar dari Arc.

Ini adalah lingkaran sederhana yang dapat digambar di Android.

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

   <solid 
       android:color="#666666"/>

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

Jadikan ini sebagai latar belakang tampilan Anda

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="#78d9ff"/>
</shape>

Untuk penggunaan lingkaran padat:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#48b3ff"/>
</shape>

Padat dengan stroke:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#199fff"/>
    <stroke
        android:width="2dp"
        android:color="#444444"/>
</shape>

Catatan : Untuk membuat ovalbentuk muncul sebagai lingkaran, dalam contoh ini, baik tampilan Anda bahwa Anda menggunakan bentuk ini sebagai latar belakangnya harus persegi atau Anda harus mengatur heightdan widthproperti tag bentuk ke nilai yang sama.

Kode untuk lingkaran sederhana

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <solid android:color="#9F2200"/>
        <stroke android:width="2dp" android:color="#fff" />
        <size android:width="80dp" android:height="80dp"/>
</shape>

Lihat di sampel Android SDK. Ada beberapa contoh dalam proyek ApiDemos:

/ ApiDemos / res / drawable /

• black_box.xml
• shape_5.xml
• dll

Ini akan terlihat seperti ini untuk lingkaran dengan isian gradien:

<? xml version = "1.0" encoding = "utf-8"?>
<shape xmlns: android = "http://schemas.android.com/apk/res/android" android: shape = "oval">
    <gradient android: startColor = "# FFFF0000" android: endColor = "# 80FF00FF"
            android: angle = "270" />
</shape>

Anda dapat menggunakan VectorDrawable seperti di bawah ini:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="64"
    android:viewportWidth="64">

    <path
        android:fillColor="#ff00ff"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

Xml di atas diterjemahkan sebagai:

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

    <!-- fill color -->
    <solid android:color="@color/white" />

    <!-- radius -->
    <stroke
        android:width="1dp"
        android:color="@color/white" />

    <!-- corners -->
    <corners
        android:radius="2dp"/>
</shape>

Berikut adalah circle_background.xml sederhana untuk pra-materi:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/color_accent_dark" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/color_accent" />
        </shape>
    </item>
</selector>

Anda dapat menggunakan dengan atribut 'android:background="@drawable/circle_background"dalam definisi tata letak tombol Anda

Jika Anda ingin lingkaran seperti ini

Coba gunakan kode di bawah ini:

<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/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray" />
</shape>

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

    <stroke
        android:width="10dp"
        android:color="@color/white"/>

    <gradient
        android:startColor="@color/red"
        android:centerColor="@color/red"
        android:endColor="@color/red"
        android:angle="270"/>

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

res / drawble / circle_shape.xml

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

        <shape android:shape="oval">
            <solid android:color="#e42828"/>
            <stroke android:color="#3b91d7" android:width="5dp"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

Anda dapat mencoba ini -

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="700"
    android:thickness="100dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

Anda juga dapat menyesuaikan jari-jari lingkaran dengan menyesuaikan android:thickness.

Saya tidak bisa menggambar lingkaran di dalam ConstraintLayout saya karena suatu alasan, saya tidak bisa menggunakan jawaban di atas.

Apa yang berhasil dengan sempurna adalah TextView sederhana dengan teks yang keluar, ketika Anda menekan "Alt + 7":

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>

Anda dapat mencoba menggunakan ini

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

<item>
    <shape
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false" >
        <solid android:color="@color/button_blue_two" />
    </shape>
</item>

dan Anda tidak perlu repot dengan aspek rasio lebar dan tinggi jika Anda menggunakan ini untuk tampilan teks

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/text_color_green"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

bentuk lingkaran dalam file yang dapat ditarik Android XML

<?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/white" />
    <stroke
        android:width="1.5dp"
        android:color="@android:color/holo_red_light" />
    <size
        android:width="120dp"
        android:height="120dp" />
</shape>

Tangkapan layar

Gunakan saja

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );