CODEWITHSUNDEEP
android
Siva K
Siva K

Reputation: 4968

how to set color for the rounded corners in android

in my app i want to place a rounded corner background in an activity. The image i want is as follows enter image description here

The background image of my app is to be a white screen and inside my rounded corner background i need white spaces. So to identify corners of the rounded background i need to give a black color for it. But my image appears as follows. enter image description here

Following is my code for rounded background

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#ffffff" /> 
  <stroke android:width="3dp" color="#ff000000" /> 
  <corners android:radius="15dp" android:color="#ababab" /> 
  <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> 
</shape>

How to get the black color as my corner color

Upvotes: 4

Views: 13284

Answers (4)

pawelzieba
pawelzieba

Reputation: 16082

Top shape:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <solid
        android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#ff000000" />
</shape>

Middle shape:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <solid
        android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#ff000000" />
</shape>

Bottom shape:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp" />
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <solid
        android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#ff000000" />
</shape>

Example for buttons:

    <Button
        android:background="@drawable/top"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="left|center_vertical"
        android:padding="5dp"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Top" />
    <Button
        android:background="@drawable/middle"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="left|center_vertical"
        android:padding="5dp"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="-3dp"
        android:text="Middle" />
    <Button
        android:background="@drawable/bottom"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="left|center_vertical"
        android:padding="5dp"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="-3dp"
        android:text="Bottom" />

And the result:

enter image description here

It's a modification of my other answer for similar question.

Upvotes: 3

Josh
Josh

Reputation: 10738

Here's an example that does almost exactly what you request:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#FFFFFFFF" android:endColor="#A4A4A4"
        android:angle="270" />
    <corners android:radius="5dp" />
    <stroke android:color="#4B4B4B" android:width="1dp" />
</shape>

From the great tutorial at: http://blog.stylingandroid.com/

Upvotes: 20

inazaruk
inazaruk

Reputation: 74790

It's a bit hard to understand what you actually want to achieve, but assuming you've added

 <corners ... android:color="#ababab" />

You want to make you cornewr to have color #ababab.

First file named shape.xml should have the xml from your answer:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#ffffff" /> 
  <stroke android:width="3dp" color="#ff000000" /> 
  <corners android:radius="15dp" /> 
  <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> 
</shape>

Note how I removed android:color="#ababab" from your example in <corners> tag.

Second file named solid.xml should have next xml:

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

Finally, the file named background.xml:

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

You should use @drawable/background for background in your activity.

enter image description here

Upvotes: 4

piotrpo
piotrpo

Reputation: 12636

Just create proper .9.png image - draw 10px x 10px frame, set empty center as "strechable" using 9patch tool delivered with SDK.

Upvotes: 2

Related Questions