Create semi transparent background image to layout

Question

See the image for example

I want to implement a login screen where I want user to login through only Google plus sign in. I was looking for design to choose from but couldn't get the idea. But then I came across something like. I tried to implement it.

This is what I tried.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bt4u.shopcite.login">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha=".5"
        android:background="@drawable/ny"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="@dimen/_100sdp"
        android:layout_height="@dimen/_100sdp"
        android:layout_centerHorizontal="true"
        app:srcCompat="@drawable/applogo" />

    <com.google.android.gms.common.SignInButton
        android:id="@+id/Sign_in_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:alpha="1" />
</RelativeLayout>

You can see I tried to use alpha but its not giving me same results. I want a clone type of what is shown in the image.

Possible duplicate of [How can I make an image transparent on Android?](https://stackoverflow.com/questions/5078041/how-can-i-make-an-image-transparent-on-android) — Reaz Murshed, Mar 04 '18 at 09:38

score 0 · Answer 1 · answered Mar 04 '18 at 09:32

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.bt4u.shopcite.login">

<ImageView
    android:id="@+id/yourbackgroundImageIDD"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:srcCompat="@drawable/yourbackgroundImage" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"">
</LinearLayout>
<ImageView
    android:id="@+id/imageView3"
    android:layout_centerHorizontal="true"
    android:layout_width="@dimen/_100sdp"
    android:layout_height="@dimen/_100sdp"
    app:srcCompat="@drawable/applogo" />
<com.google.android.gms.common.SignInButton
android:id="@+id/Sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>

You can try above layout. Set a background image then LinearLayout with background color and set alpha within hex code of color like "#66000000" where 66 is alpha for black color.

you can refer to this for other values of alpha : Hex transparency in colors

This question is about making the image drawable transparent. I think you have emphasized about the background color. — Reaz Murshed, Mar 04 '18 at 09:38
He is trying to design like that screen. He misunderstood that image is transparent but actually Image is behind a transparent layout. My answer is to achieve that design. — Zaid Mirza, Mar 04 '18 at 09:41
Yeah something like this I wanted to achieve. I misunderstood it as transparent as you thought. Can you help with the buttons as well? — Ashuq, Mar 04 '18 at 09:52
But still even with highest alpha its not exactly similar to that. It got the effect a little though — Ashuq, Mar 04 '18 at 09:55
In the example image its more like a layer overlay kind of thing — Ashuq, Mar 04 '18 at 09:56
you can change value 66 to something to your need. check link in answer — Zaid Mirza, Mar 04 '18 at 11:05

Create semi transparent background image to layout

1 Answers1