Constraint Layout with transparency and elevation

Question

I have 10 TextViews inside 1 Constraint Layout. What i would like to achieve is to have the Constraint Layout have some elevation to make it seem like all 10 textviews are basically above my background. But i would like to keep the background of my layout to take the background of the phone so have the Constraint layout have a transparent background. Any way i can achieve this?

I saw various posts here about this but they actually want the layout colored in and not transparent and that is where this one differs from theirs.

I have tried way to do it with shapes using a rectangle but the shadow of the elevation will only appear if i make the rectangle visible.... and not transparent.

<android.support.constraint.ConstraintLayout
    android:id="@+id/topBorder"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    app:layout_constraintTop_toBottomOf="@id/tvTitle">
<TextView
    android:id="@+id/tvIon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="5dp"
    android:text="@string/Ion"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/tvIonResult"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="5dp"
    android:text="@string/ResultPlaceHolder"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tvSn1_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="10dp"
    android:text="@string/sn1_1"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvIon" />

<TextView
    android:id="@+id/tvSn1_Result"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="@string/ResultPlaceHolder"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvIonResult" />

<TextView
    android:id="@+id/tvSn1_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="10dp"
    android:text="@string/sn1_3"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvSn1_1" />

<TextView
    android:id="@+id/tvSn1_3_Result"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="10dp"
    android:text="@string/ResultPlaceHolder"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvSn1_Result" />

<TextView
    android:id="@+id/tvSn2_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="10dp"
    android:text="@string/sn2_1"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvSn1_3" />

<TextView
    android:id="@+id/tvSn2_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="@string/sn2_3"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvSn2_1" />

<TextView
    android:id="@+id/tvSn2_3_Result"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="@string/ResultPlaceHolder"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvSn2_1_Result" />
<TextView
    android:id="@+id/tvSn2_1_Result"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="10dp"
    android:text="@string/ResultPlaceHolder"
    android:textSize="18sp"
    android:textColor="@android:color/black"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvSn1_3_Result" />
    </android.support.constraint.ConstraintLayout>

This is my xml for what i tried

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#00ffffff"/>
        <stroke android:color="#00000000"/>
    </shape>
</item>
</layer-list>

can you post a design of what you want – Damia Fuentes Nov 05 '17 at 00:57 — Damia Fuentes, Nov 05 '17 at 00:57

Foroogh Varmazyar · Answer 1 · 2020-12-13T19:58:01.730

if you want to create a transparent activity on android Add the following style in your res/values/styles.xml

file Here’s a complete file:

<style name="AppTheme.Transparent" paren="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

then In the AndroidManifest.xml:

    <activity
    android:name=".WhateverNameOfTheActivityIs"
    android:theme="@style/AppTheme.Transparent">
    </activity>

If you do not want your layout to be completely transparent then in your layout add this to ConstraintLayout

android:background="#80000000"

score -2 · Answer 2 · answered Jul 25 '18 at 19:43

-2

If you add this line to the Constraint Layout xml it will become transparent: android:background="@android:color/transparent". This will make the background see through and show what ever is bellow or overlapping.

answered Jul 25 '18 at 19:43

Ben Magill

38
3
8

Constraint Layout with transparency and elevation

2 Answers2