Question

I added a full border around a view but I need to add just the corner as shown image below :

I mean the red corner only .

I tried to adjust the below border xml , but it didn’t work :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <stroke android:width="10dp" android:height="10dp" android:color="#B22222" /> 
    <solid android:color="#FCE6C9" /> 
    <corners android:radius="20dp"  /> 
</shape>

Any help will be appreciated

Answer 1

I don’t think it’s possible to do this using a ShapeDrawable, as it would require you to use some sort of margin or padding on the drawable itself. There actually is a padding attribute, but unfortunately that only has effect on the content of the View, and not the drawable itself.

That being said, an easy solution would be to create a 9-patch in stead and apply that as background to the TextView. Just for demonstration purposes: make the 9-patch look somewhat like this:

---

Edit:
On second thought, there’s actually another option that relies on using a LayerDrawable to create the desired effect. It’s a bit tedious to create and I have my doubts it’ll be more efficient than using a 9-patch, but at least you don’t have to render out images, which means that if you need to make e.g. a change in colours, it’s more straightforward.

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

    <item android:drawable="@drawable/rounded" />
    <item android:drawable="@android:color/white" android:left="30dp"
        android:right="30dp" />
    <item android:bottom="30dp" android:drawable="@android:color/white"
        android:top="30dp" />
    <item android:bottom="30dp" android:left="10dp" android:right="10dp"
        android:drawable="@color/pink" android:top="30dp" />
    <item android:bottom="10dp" android:left="30dp" android:right="30dp"
        android:drawable="@color/pink" android:top="10dp" />

</layer-list>

Some details: @drawable/rounded is the code snippet you posted yourself. The following two items are simply white rectangles with an offset, to create the white edges. Now, since these will also overlay the pink surface, we need two more pink rectangles (again with specific offsets) to counter that. The result is a background that looks exactly like what you’re showing in your question.

Note that you might want to see if you can optimise this a bit. At the least I’d recommend not hardcoding the offsets (like I did for simplicity), but store them in a dimens.xml file so you can keep these values centralized and consistent by referencing them from both the ShapeDrawable and LayerDrawable.

Addendum: On pre-ICS (or perhaps pre-Honeycomb) devices, there appears to be an issue with directly referencing colours with the android:drawable attribute. You can however easily get around this by setting up another drawable (be it either a 9-patch or ShapeDrawable) to represent this colour. For example, in the snippet above, you would replace android:drawable="@color/pink" with android:drawable="@drawable/color_pink", where color_pink can simply be an xml file containing:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <solid android:color="#FCE6C9" /> 
</shape>

Obviously you will need to do the same for all other colours referenced in the LayerDrawable. Tested on Gingerbread 2.3.7.