CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-drawable
Sandeep Singh
Sandeep Singh

Reputation: 1127

Make Custom Drawable Shape in Android

I want to make drawable like below,

enter image description here

I am able to make the Rectangle and Triange shape in two different xml files. But i want to joint them to make the drawable like this.

Upvotes: 4

Views: 9979

Answers (3)

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21766

Use layer-list to make this custom shape drawable.

/res/drawable/custom_shape.xml:

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

    <!-- Transparent Rectangle -->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <!-- Colored Rectangle -->
    <item
        android:bottom="20dp">
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="#9A8585" />
        </shape>
    </item>

    <!-- Bottom Triangle -->
    <item
        android:left="80dp"
        android:right="120dp"
        android:top="0dp"
        android:bottom="30dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#9A8585" />
            </shape>
        </rotate>
    </item>

    <!-- Top Border -->
    <item
        android:bottom="75dp">
        <shape android:shape="rectangle">
            <solid android:color="#EFC1B3" />
        </shape>
    </item>

</layer-list>

USE:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_shape"/>

OUTPUT:

enter image description here

Hope this will help~

Upvotes: 10

Dharmesh Baldha
Dharmesh Baldha

Reputation: 816

Use <layer-list/> for that.

Here is an example for instance.

in Drawable folder of resin project directory, make xml file and name it as layerlist.xml and paste it below code as your requirement. you can also add your shape drawable instead of drawable in the <item/> tag in the example. and use this xml as a background of ImageView. 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

Here is the result of the use of <layer-list/>.

enter image description here

I hope it helps you...

Upvotes: 3

Sami Eltamawy
Sami Eltamawy

Reputation: 10009

I expect that you need it for a a Tabular navigator or a ViewPager. My suggestion is that

1)Use the rectangle as your background for all the cases.

2)Create the same triangle drawable but with the background color (White or transparent) for the unselected item.

3)Create a view with the triangle background for all the items

4)Manually setVisibility of the triangle view according to the selection state

Upvotes: 0

Related Questions