Android elevation not showing shadows

Question

I want to create a login screen by putting a linear layout that holds logging elements in the middle of the screen with some shadows.Despite I set elevation and padding for this linear layout I still dont get any shadows, Could somebody have a look? Here is my layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center|center_vertical|center_horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Willkommen Sie!"
            android:id="@+id/textView2"
            android:textColor="@color/primary"
            android:textIsSelectable="false"
            android:textSize="90dp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:weightSum="1"
        android:clipChildren="false"
        android:focusable="true" android:focusableInTouchMode="true">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="385dp"
            android:layout_height="wrap_content"
            android:background="@layout/loginborder"
            android:layout_weight="0.30"
            android:gravity="center"
            android:padding="8dp"
            android:elevation="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name"
                android:id="@+id/textView3"
                android:textSize="32dp"
                android:textIsSelectable="false" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:ems="10"
                android:id="@+id/editText2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Kennwort"
                android:id="@+id/textView4"
                android:textSize="32dp" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:ems="10"
                android:id="@+id/editText" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Login"
                android:background="@drawable/button_orange"
                android:textColor="#ffffff"
                android:id="@+id/login"
                android:layout_marginTop="20dp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Answer 1

I don't believe you can get elevation on text such that it produces shadows of the letters. The closest you can come is creating a kind of floating label by setting an opaque background and elevation directly on a text view; for example,

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Name"
    android:id="@+id/textView3"
    android:textSize="32dp"
    android:background="#FFFFFFFF"
    android:elevation="8dp"
    android:textIsSelectable="false" />

or, to add some dimension, you could use the old CBT (computer-based training) trick of offsetting contrasting text behind the main text (which should be opaque):

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="1.5sp"
        android:layout_marginTop="1.5sp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Willkommen Sie!"
        android:id="@+id/textView2shadow"
        android:textColor="#33000000"
        android:textIsSelectable="false"
        android:textSize="90dp"
        android:textStyle="bold" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Willkommen Sie!"
        android:id="@+id/textView2"
        android:textColor="?colorPrimary"
        android:textIsSelectable="false"
        android:textSize="90dp"
        android:textStyle="bold" />
</FrameLayout>

Answer 2

I struggled with the same issue. By trying different things I found a method that works. You need to add a background color to your view even if it is the same color as your parent view.

Answer 3

android:background="@layout/loginborder"

make sure in your "loginborder" , background does not contain opacity (alpha)

android:color="#aaffffff"

should be

android:color="#ffffff"