How to make a curved layout

Question

I am trying to make a layout half transparent what I am trying is to make the red part transparent and the part which is not colored with strong color .I am able to set this with placing a black layer in the back of one layer but I want to make it half transparent like the red part will show the image placed in the back side how can I do this ? this is the xml I tried

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
    android:width="0.5dp"
    android:color="@color/white" />
<corners
    android:bottomLeftRadius="150dp"
    android:bottomRightRadius="1000dp"
    android:topLeftRadius="0dp"
    android:topRightRadius="0dp" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

<solid android:color="@color/red"
    />

use radius properties on rectangle. Simple! :) – Nov 22 '16 at 17:20 — , Nov 22 '16 at 17:20
@14bce109 can you give an example how to do it ;) – SAVVY Nov 22 '16 at 18:19 — SAVVY, Nov 22 '16 at 18:19

score 2 · Answer 1 · edited May 23 '17 at 10:30

So you have managed that curved shape I guess. To make this transparent, Use its color transparent instead of simple red color. Try following code with your xml.

<gradient
    android:angle="45"
    android:endColor="#aaF00"
    android:centerColor="#aaF00"
    android:startColor="#aaF00" />

So the whole file look like:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
    android:width="0.5dp"
    android:color="@color/white" />
<corners
    android:bottomLeftRadius="150dp"
    android:bottomRightRadius="1000dp"
    android:topLeftRadius="0dp"
    android:topRightRadius="0dp" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<gradient
    android:angle="45"
    android:endColor="#aa000000"
    android:centerColor="#aa000000"
    android:startColor="#aa000000" />
/>

I've added alpha to your red color. Refer this link for more information about alpha scale.

You can also visit this for exact information about colors and especially alpha scale to make color transparent.

Hope this will help you :)

score 1 · Answer 2 · answered Nov 22 '16 at 17:19

1

You can put this shape drawable inside a layer-list drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- black background -->
    <item android:drawable="@android:color/black"/>
    <!-- red shape on top of black background -->
    <item android:drawable="@drawable/curved_shape"/>
</layer-list>

Then use this layer-list drawable as your background.

answered Nov 22 '16 at 17:19

kris larson

30,387
5
62
74

bro but I am making the red part transparent so if i place black layer in the back It will not be transparent .How can i make it half transperent – SAVVY Nov 22 '16 at 18:38
Ooh. This isn't really doable with XML. You would need to code a custom `Drawable` that would draw a `Path` and put different colors inside and outside of the `Path`. – kris larson Nov 22 '16 at 20:19
1

just combined the concept of @14bce109 and your and it worked – SAVVY Nov 23 '16 at 06:42

score 0 · Answer 3 · answered Nov 22 '16 at 17:19

Just place your layout inside one with black background.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal"
              android:background="#000000">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:background="@drawable/your_shape">
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
        </LinearLayout>

</LinearLayout>

In my real project I am replacing the red part with the transparent so I can not put the background as black — SAVVY, Nov 22 '16 at 18:16

How to make a curved layout

3 Answers3