CODEWITHSUNDEEP
androidandroid-layoutandroid-drawableshapes
MKDevAr
MKDevAr

Reputation: 35

make custom xml shape android

I need to make custom shape like below: design image

in order to do that I've wrote below xml:

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

    >
    <item android:id="@+id/ring1">
        <shape
            android:innerRadiusRatio=""
            android:shape="ring"
            android:tint="@color/white"
            android:useLevel="false"></shape>

    </item>

    <item>
        <shape
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="140dp"
            android:useLevel="false">
            <gradient
                android:centerColor="#00F913"
                android:endColor="#006A10"
                android:startColor="#006A10" />

        </shape>

    </item>
    

</layer-list>

which it's result is:

result image

And there is 3 problems:

  1. 1st: when I give it to any views background the outer white line wouldn't appear
  2. 2nd: the shape is not a ring when i give it to views background
  3. 3rd: the original view has a color at center and it has other color around but with gradient I can add color to start, center, end and in the middle the middle gradient is extends to borders

Upvotes: 0

Views: 118

Answers (1)

Zain
Zain

Reputation: 40810

1st: when I give it to any views background the outer white line wouldn't appear

You can use oval shape instead of using ring for the white part., and add padding as much you need the radius of the outer white part as modified below

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

    <item>
        <shape android:shape="oval">
            <solid android:color="@color/white" />
            <padding
                android:bottom="7dp"
                android:left="7dp"
                android:right="7dp"
                android:top="7dp" />
        </shape>

    </item>

    <item>
        <shape android:shape="oval">
            <size
                android:width="36dp"
                android:height="36dp" />
            <gradient
                android:centerColor="#00F913"
                android:endColor="#006A10"
                android:startColor="#006A10" />
        </shape>

    </item>

</layer-list>

2nd: the shape is not a ring when i give it to views background

You can use ShapeableImageView

First: add below dependency in gradle module level

implementation 'com.google.android.material:material:1.3.0-alpha04'

Second: create below style in style.xml

<style name="circled">
    <item name="cornerSize">50%</item>
</style>

Third: apply the style to a ShapeableImageView using app:shapeAppearanceOverlay attribute

3rd: the original view has a color at center and it has other color around but with gradient I can add color to start, center, end and in the middle the middle gradient is extends to borders

This should be solved by using ShapeableImageView, please check below result after running the app

enter image description here

Sample test

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    android:layout_height="match_parent">

    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/circled"
        app:srcCompat="@drawable/some_circle" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Related Questions