CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-custom-view
Karlis
Karlis

Reputation: 1501

Android change color without changing shape

I have created layout similar to this:

<RelativeLayout     
    android:id="@+id/layout_one" 
    style="@style/layout_one" >

    <RelativeLayout 
        android:id="@+id/layout_two"
        style="@style/layout_two" >

    <RelativeLayout 
        android:id="@+id/layout_three"
        style="@style/layout_three" >

    </RelativeLayout>
</RelativeLayout>

For layout one I have created a custom drawable with rectangle shape so that the corners would be rounded and blue background color.

But for layout three I need to set white background color but if I do android:background="#FFFFFF" than it changes also the shape and the bottom corners are no longer rounded.

My first thought was to create custom drawable for the layout_three with rounded bottom corners but it wasnt working. Either all the corners were rounded or none.

Need to create something like this in the picture with rounded corners. Any suggestions?

Layout with rounded corners and two colors

Upvotes: 0

Views: 1055

Answers (3)

null
null

Reputation: 807

I see that for layout three you use @style/layout_three which is different from @style/layout_one. So why don't you go to your style folder and put item with background white in layout_three style

It should look something like this:

<style name="layout_three">
      <item name="android:background">#FFFFFF</item>
      <!-- ... other stuff here... -->
</style>

EDIT: Sorry I did not understand your question well, reading that comment now. There is only one way that comes to my mind right now to help you fix that.

Create an .xml file in your drawable folder and name it layout_three.xml or whatever. And use this code:

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

<item>
<shape android:shape="rectangle" >
    <solid android:color="#FFFFFF" />
    <padding
        android:bottom="10dp"  <!--  you can set padding here 
                                 or on your layout layout_three -->
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"  
    />

    <corners android:radius="2dp" /> <!-- change the radius too -->
</item>
</layer-list>

And then you just use @drawable/layout_three instead of @style/layout_three

EDIT2: You can also use this code for the corners if you want only the bottom one to be rounded

<corners 
     android:topRightRadius="0dp"
     android:topLeftRadius="0dp"
     android:bottomLeftRadius="2dp"
     android:bottomRightRadius="2dp"/>

Upvotes: 1

Karlis
Karlis

Reputation: 1501

I just read that the problem is that the Android layout preview doesn't show the different corner radius so you have to test in on device or emulator to see the difference.

Upvotes: 0

Permita
Permita

Reputation: 5493

You can create a xml drawable with rounded bottom corners for your requirement. Try the below code:

<item>
 <shape android:shape="rectangle" >
  <solid android:color="#FFFFFF" />
  <corners android:radius="7dp"
     android:topRightRadius="0dp"
     android:topLeftRadius="0dp"
     android:bottomLeftRadius="7dp"
     android:bottomRightRadius="7dp"/>
 </shape>
</item>

Upvotes: 0

Related Questions