How do I make a layout in Android where most of the layout is translucent except for a small transparent square?

Question

The idea is to have a screen that's mostly translucent (the image behind is darkened) with a small square in the middle that allows you to see the image in full brightness. I can't just make two layouts with the transparent one on top, that would just make it invisible with the whole screen being translucent.

score 0 · Answer 1 · edited May 23 '17 at 12:32

You can use a view that has as a background a bitmap that is mostly translucent except for a transparent hole. To see how to create such a bitmap in code, take a look at this thread or this one.

Alternatively, you can create a 9-patch that does the same thing. You can decide what part of the 9-patch should be stretchable (i.e., whether the transparent center is a fixed size or whether the translucent surrounding is a fixed width).

score 0 · Answer 2 · answered Jul 30 '15 at 01:21

You could use an XML drawable or a nine patch. I'm curious if something like this would work:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="#dd999999"
        android:layout_toLeftOf="@+id/center_point"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:background="#dd999999"
        android:layout_above="@+id/center_point"/>

    <View
        android:id="@+id/center_point"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerInParent="true"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:background="#dd999999"
        android:layout_below="@+id/center_point"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="#dd999999"
        android:layout_toRightOf="@+id/center_point"/>

</RelativeLayout>

It's super caveman with overdraw and expensive layouts and the backgrounds will probably blend and darken, but I think it fits what you describe.

How do I make a layout in Android where most of the layout is translucent except for a small transparent square?

2 Answers2