Android translucent card/layout like timely app

Question

I'm trying to copy this layout out of the beautiful Android Timely app

Specifically, the translucent box that has all the alarm info inside it. Not sure if it's a layout with a slightly different fill color than the background with the alpha value set really high.

Answer 1

I do something like this:

Manifest.xml

<activity
    android:theme="@style/PopupTheme"
    android:configChanges="orientation|screenSize"
    android:name="your.package.Activity">
</activity>

Styles.xml

<style name="PopupTheme" parent="Theme.AppCompat.Base.CompactMenu.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColor">@android:color/black</item>
    <item name="android:windowIsFloating">true</item>
</style>

Color.xml //You can play with the alpha value

<color name="transparent_black">#A0000000</color>

myLayout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/root"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp"
        android:gravity="center"
        android:background="@color/transparent_black">


        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@android:color/transparent"
            android:layout_marginTop="30dp">

            <Button
                android:id="@+id/guardar"
                style="@style/boton_aceptar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/action_save"
                android:gravity="center"/>

        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

And the result: the white part it's gonna be the current screen in the phone.