CODEWITHSUNDEEP
androidxmlshapes
c0dehunter
c0dehunter

Reputation: 6140

How to make Shape like this?

I want to get shape similar to what you can see below. The thing I am missing is the header color (the color behind Anonymous text). I've reproduced what I wanted by simply moving mouse over second textview which is now highlighted and makes this effect :)

Current code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <stroke android:width="2dp" android:color="#000000" />
 <gradient android:startColor="#898989" android:endColor="#B5B5B5" android:angle="270"/> 

 <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
 android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>

enter image description here

Upvotes: 3

Views: 2177

Answers (3)

MilapTank
MilapTank

Reputation: 10076

this tools might be helpful further in development

http://angrytools.com/

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

Upvotes: 0

eladr
eladr

Reputation: 288

You need to use a Layer List that contains two drawables.

For example, the first will cover the whole shape, and the second will overlay it but with android:top="10dp" set, to create an offset showing the underlying first shape

Edit:
Like so:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <stroke
                android:width="2dp"
                android:color="#000000" />

            <solid android:color="#00ff00" />

            <corners
                android:bottomLeftRadius="7dp"
                android:bottomRightRadius="7dp" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="20dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#B5B5B5"
                android:startColor="#898989" />

            <corners
                android:bottomLeftRadius="7dp"
                android:bottomRightRadius="7dp" />
        </shape>
    </item>
</layer-list>

Upvotes: 2

Macarse
Macarse

Reputation: 93123

Use a LinearLayout and place two TextView with different shapes as background.

The first one having its upper corners rounded and the second one its bottom corners.

Upvotes: 1

Related Questions