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.

Janusz
źródło
3
Tutaj możesz przeczytać o tym, jak stworzyć kształt do rysowania: developer.android.com/guide/topics/resources/...
Mario Kutlev,
Możesz pobrać koło xml tutaj developer.android.com/samples/WearSpeakerSample/res/drawable/…
Shahab Rauf
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>
Arefin
źródło
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ść.

M. Reza Nasirloo
źródło
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>
Ravi Makvana
źródło
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>

goosemanjack
źródło
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

Riyas PK
źródło
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>
Ashana.Jackol
źródło
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>
Paraskevas Ntsounos
źródło
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

kip2
źródło
+ 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>
TeeTracker
źródło
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

Tienanhvn
źródło
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

krhitesz
źródło
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>
Иво Недев
źródło
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

Cyryl David
źródło
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>
varun setia
źródło
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

Aftab Alam
źródło
-23

Po prostu użyj

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

źródło
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