circle with Shape edges

Asked

Viewed 329 times

0

How to make this circle in xml ?

what I have so far:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="4dp"
        android:right="4dp"
        android:bottom="4dp"
        android:left="4dp">
        <shape
            android:shape="oval">
            <solid android:color="@color/corbtndia" />
        </shape>
    </item>
    <item>
        <shape
            android:shape="oval">
            <stroke android:width="2dp"
                android:color="@color/corbtndia"/>
        </shape>
        <shape
            android:shape="oval">
            <stroke android:width="2dp" android:color="@color/vermelhoperfil"/>
        </shape>
    </item>
</layer-list>

What I got: Oque quero

What do I want:

inserir a descrição da imagem aqui

android android-xml

  • The image you posted is whatever it is you got?

  • @ramaral I edited and put what I want and what I got

  • Not mistaken? You want one or two edges?

  • @ramaral I think is a single edge, however it has a part outside the edge, the problem is that I can not change the color the way I did,to be the same as day 3 for example

1 answer

1


In my projects I usually use this lib:

https://github.com/hdodenhof/CircleImageView

.xml

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView1"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="false"
                android:src="#0A1950"
                app:civ_border_overlay="false" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView2"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="true"
                android:src="#0A1950"
                app:civ_border_color="#4D5B82"
                app:civ_border_overlay="false"
                app:civ_border_width="1dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Day 1"
                android:textColor="#4D5B82" />

        </LinearLayout>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView3"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="false"
                android:src="#0A1950"
                app:civ_border_overlay="false" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView4"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="true"
                android:src="#0A1950"
                app:civ_border_color="#4D5B82"
                app:civ_border_overlay="false"
                app:civ_border_width="1dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Day 2"
                android:textColor="#4D5B82" />

        </LinearLayout>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView5"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="false"
                android:src="#0A1950"
                app:civ_border_overlay="false" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView6"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="true"
                android:src="#0A1950"
                app:civ_border_color="#F44336"
                app:civ_border_overlay="false"
                app:civ_border_width="1dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Day 3"
                android:textColor="#F44336" />

        </LinearLayout>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center">

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView7"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="false"
                android:src="#0A1950"
                app:civ_border_overlay="false" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="horizontal">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circleImageView8"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignParentLeft="false"
                android:layout_alignParentTop="true"
                android:src="#0A1950"
                app:civ_border_color="#ffffff"
                app:civ_border_overlay="false"
                app:civ_border_width="1dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Day 4"
                android:textColor="#ffffff" />

        </LinearLayout>

    </RelativeLayout>
</LinearLayout>

Upshot:

inserir a descrição da imagem aqui

  • I also use this lib, but it’s not what I need. it has a single edge, and as you can see in the image I need 2 edges is different

  • only use two Circle, one larger than the other within a Relativelayout

  • the smaller Voce lay edge

  • edited response.

Browser other questions tagged android android-xml

You are not signed in. Login or sign up in order to post.