Search code examples
androidgeometryshapesoval

Draw a complex circle (Has border only on the left half of it) using Android Shapes


I'm trying to draw a complex circle with the right half different from the second one using the XML description of Android.

The final circle should have border on the left and no border on the right.

I though about creating two different circles (One with border, the other without) and merge them but I did not manage to do it. Any ideas?

first_circle.xml

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

second_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/black"/>
    <stroke android:width="6dp" android:color="@color/lectra_black" />
</shape>

final_circle.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp" android:drawable="@drawable/first_circle">
    </item>
    <item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp" android:drawable="@drawable/second_circle">
    </item>
</layer-list>

Solution

  • I'm answering my question : half circle with counter, the other half without.

    drawable contains circle_grey.xml, counter_black.xml, counter_black_clip.xml.

    layout contains activity_main.xml.

    circle_grey.xml

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

    counter_black.xml

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

    counter_black_clip.xml

    <?xml version="1.0" encoding="utf-8"?>
    <clip xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/counter_black"
        android:clipOrientation="horizontal"
        android:gravity="left" />
    

    activity_main.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <LinearLayout
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/circle_grey"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/layout_half_cercle"
                android:weightSum="7"
                android:background="@drawable/counter_black_clip"
                android:orientation="horizontal"/>
    
        </LinearLayout>
    </RelativeLayout>
    

    activity_main.java

    package app.test.com.myapplication;
    
    import android.graphics.drawable.ClipDrawable;
    import android.support.v7.app.ActionBarActivity;
    import android.os.Bundle;
    import android.widget.LinearLayout;
    
    public class MainActivity extends ActionBarActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            LinearLayout layoutDate = (LinearLayout) findViewById(R.id.layout_half_cercle);
            ClipDrawable drawable = (ClipDrawable) layoutDate.getBackground();
            drawable.setLevel(drawable.getLevel() + 5000);
        }
    }