CODEWITHSUNDEEP
androidxmlandroid-layoutlayout
SAVVY
SAVVY

Reputation: 850

How to make a curved layout

enter image description here

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"
    />

Upvotes: 1

Views: 3302

Answers (3)

user6649667
user6649667

Reputation:

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 :)

Upvotes: 2

kris larson
kris larson

Reputation: 30985

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.

Upvotes: 1

Aleksandar G
Aleksandar G

Reputation: 1181

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>

Upvotes: 0

Related Questions