How to make a transparent black color in a rectangular box. (color is black, but it needs to be transparent and need to show the screen behind)

Question

I have designed link below, but it is fully black. I have changed a clor code, but it is not in black transparent.

Image which I have added as a dropdown is black

If i add any other transparent color it shows as below. Rectangle area get thicked

How can I make the whole as transparent black as below. Also I need the whole black to change to the below color

My Code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="10dp" android:top="10dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#000000"/>
            <corners
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="35dp"
                android:topLeftRadius="15dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:right="1dp" android:bottom="10dp" android:bottomRightRadius="100dp">
        <rotate
            android:fromDegrees="-30"
            android:pivotX="100%"
            android:pivotY="0%"
            >
            <shape android:shape="rectangle">
                <solid android:color="@color/black"  />
            </shape>
        </rotate>

    </item>

</layer-list>

You can accept one answer (if it helps you) by click on big gray check button on its left side. — MaLa, Dec 26 '20 at 14:16

MaLa · Answer 1 · 2020-12-10T12:53:48.203

1

Add alpha to the view. No need to edit the shape.

<View
        android:alpha="0.5"
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"/>

This works if you run the application. What the design editor shows is different from what the application shows, so you need to test it!

edited Dec 10 '20 at 12:53

answered Dec 10 '20 at 12:46

MaLa

582
2
16

score -1 · Answer 2 · answered Dec 10 '20 at 06:54

-1

android:background="#CC000000"

in XML

where CC is the alpha value, 00 is the red factor, 00 is the green factor, and 00 is the blue factor.

Some opacity code:

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5%  — 0D
0% —  00

answered Dec 10 '20 at 06:54

Deep Parsania

253
2
12

But the rectangle color makes a dark black color when applying this for both color. And it looks like this https://i.stack.imgur.com/92u8K.png – sejn Dec 10 '20 at 06:57
remove second shape solid color – Deep Parsania Dec 10 '20 at 07:04
If I remove this it does not show the arrow – sejn Dec 10 '20 at 08:46

score -1 · Answer 3 · answered Dec 10 '20 at 07:06

Try this:

ic_chat_bubble_24.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:alpha="0.28"// customize on your own
    android:autoMirrored="true"
    android:tint="?attr/colorControlNormal"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M20,2H4c-1.1,0 -2,0.9 -2,2v18l4,-4h14c1.1,0 2,-0.9 2,-2V4c0,-1.1 -0.9,-2 -2,-2z" />
</vector>

and rotate it 180 degree

ic_chat.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_baseline_chat_bubble_24"
    android:fromDegrees="180">

</rotate>

Can you let me know how can I increase the width and height of the chat_bubble when according to the list of items in the popup. I have the popup with multiple text — sejn, Dec 10 '20 at 09:49
set `ic_chat.xml` as the background of your view(TextView,LinearLayout) so that this will behave according to the view's height and width — chand mohd, Dec 10 '20 at 10:51

How to make a transparent black color in a rectangular box. (color is black, but it needs to be transparent and need to show the screen behind)

3 Answers3