Jak zdefiniować kształt okręgu w wyciągalnym pliku XML systemu Android?


687

Mam pewne problemy ze znalezieniem dokumentacji definicji kształtów w XML dla Androida. Chciałbym zdefiniować prosty okrąg wypełniony jednolitym kolorem w pliku XML, aby uwzględnić go w moich plikach układu.

Niestety dokumentacja na android.com nie obejmuje atrybutów XML klas Shape. Myślę, że powinienem użyć ArcShape do narysowania okręgu, ale nie ma wyjaśnienia, jak ustawić rozmiar, kolor lub kąt potrzebny do utworzenia koła z łuku.


3
Tutaj możesz przeczytać o tym, jak stworzyć kształt do rysowania: developer.android.com/guide/topics/resources/...
Mario Kutlev,


Od tego czasu dokumentacja Androida Dev została ulepszona. Teraz obejmuje android:shapeelement - Zasoby do wyciągnięcia .
naXa

Odpowiedzi:


1514

Jest to prosty krąg do rysowania w Androidzie.

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

51
A jak dynamicznie zmieniać kolor?
Ankit Garg,

5
@AnkitGarg możesz zastosować filtr kolorów z kodu Java (patrz Klasa rysowana)
milosmns

7
Próbowałem dpi był on zniekształcony w owalny kształt. Dla mnie użycie ptzamiast tego naprawiło to.
Tyler

13
Nie potrzeba, aby sizew shapejeśli później zdefiniować kwadratowy rozmiar widoku.
Ferran Maylinch

2
Jego kształt jest owalny, a nie okrągły. Czy ktoś może potwierdzić?
Tarun,

762

Ustaw to jako tło widoku

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

wprowadź opis zdjęcia tutaj

Do użycia pełnego koła:

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

wprowadź opis zdjęcia tutaj

Bryła z obrysem:

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

wprowadź opis zdjęcia tutaj

Uwaga : Aby ovalkształt wyglądał jak okrąg, w tych przykładach albo widok, w którym używasz tego kształtu, ponieważ jego tło powinien być kwadratem, albo musisz ustawić wartość heighti widthwłaściwości znacznika kształtu na równą wartość.


2
Niezłe rozwiązanie. Oczywiście owal pojawia się jako koło, jeśli szerokość i wysokość widoku są takie same. Myślę, że istniał sposób, aby wyglądać jak koło, bez względu na rozmiar widoku.
Ferran Maylinch

2
@FerranMaylinch „Myślę, że istniał sposób, aby wyglądał jak koło bez względu na rozmiar widoku”. Rozwiązałem to za pomocą zawijania RelativeLayout zarówno ImageView (z okręgiem jako rysowanym „src”) o stałej szerokości / wysokości, jak i TextView, który zawija tekst (na przykład).
Michele,

Robię dokładnie to samo, ale okrąg jest narysowany jako owalny
Bugs Happen

Co zrobić, jeśli potrzebujemy go do tworzenia wokół widoku tekstu z różnymi kolorami obramowania w czasie wykonywania?
Anshul Tyagi

@AnshulTyagi Wierzę, że możesz to zrobić, dzwoniąc yourView.getBackground()i ustawiając kolor ręcznie. musisz rzucić go na odpowiedni typ, taki jak ShapeDrawable. Są na ten temat powiązane pytania dotyczące SO.
M. Reza Nasirloo,

93

Kod dla prostego kręgu

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

46

Spójrz na próbki zestawu SDK systemu Android. Istnieje kilka przykładów w projekcie ApiDemos:

/ ApiDemos / res / drawable /

  • black_box.xml
  • shape_5.xml
  • itp

Będzie wyglądać mniej więcej tak dla koła z wypełnieniem gradientowym:

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


46

Możesz użyć VectorDrawable jak poniżej:

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

Powyższy plik XML jest renderowany jako:

wprowadź opis zdjęcia tutaj


Hej, mam wypełnienie między okręgiem a rzutnią. Czy możesz mi pomóc?
Ajeet

1
@Ajeet możesz zmienić rozmiar rzutni i możesz umieścić swoją ścieżkę w grupie oraz określić tłumaczenie i skalę<group android:translateX="-10" android:translateY="15"><path ...
Boris Treukhov

2
@Riyas czy możesz wyjaśnić część pathData? co oznaczają te współrzędne?
Darshan Miskin

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

1
Co robi <corners />owal (który moim zdaniem nie ma narożników)?
Scott Biggs,

18

Jeśli chcesz koło takiego

wprowadź opis zdjęcia tutaj

Spróbuj użyć kodu poniżej:

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

17

Oto prosty plik circle_background.xml dla materiałów wstępnych:

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

Możesz użyć tego atrybutu 'android:background="@drawable/circle_background"w definicji układu przycisku


+ dodaj „rozmiar” do kształtu (kształtów) (w zależności od przypadku użycia).
TouchBoarder,

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

7

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>

wprowadź opis zdjęcia tutaj


4

Możesz spróbować tego -

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

Możesz także dostosować promień okręgu, dostosowując android:thickness.

wprowadź opis zdjęcia tutaj


To jest naprawdę miłe! Z pewnością wymaga trochę zabawy, ponieważ atrybuty nie są intuicyjne. Udało mi się to zrobić, aby za każdym razem wyświetlać ładne puste kółko dla granicy. I możesz użyć dopełnienia, aby mieć pewność, że wyświetla się cały okrąg.
Scott Biggs,

2

Z jakiegoś powodu nie mogłem narysować okręgu wewnątrz mojego ConstraintLayout, po prostu nie mogłem użyć żadnej z powyższych odpowiedzi.

To, co zadziałało idealnie, to prosty TextView z tekstem, który pojawia się po naciśnięciu „Alt + 7”:

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

Bardzo mądry! Jestem pewien, że ktoś uzna to za przydatne.
Scott Biggs

bardzo przydatne, świetne ..
Mahbubur Rahman Khan

1

Możesz spróbować tego użyć

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

i nie musisz przejmować się proporcjami szerokości i wysokości, jeśli używasz tego do przeglądania tekstu


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

0

kształt koła w rysowalnym pliku XML systemu Android

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

Zrzut ekranu

wprowadź opis zdjęcia tutaj


-23

Po prostu użyj

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

26
I jak mogę ustawić to jako src ImageView w moim pliku układu XML?
Janusz

Nie dotyczy to bezpośrednio kodu układu xml
François Legrand

1
to faktycznie działa. Dzięki :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (holder.getView (). Context, R.color.green) val layer = arrayOf (tło, zasób !!) greenRoundIcon.setImageDrawable (LayerDrawable (warstwy))
David

Tak nie lubiłem, ale działa i pomaga mi, dzięki
Pavel Shorokhov
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.