Saturday, July 4, 2015

Android elevation and translationZ example

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#ffff0001"
    >
    <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_bg"
        android:height="100dp"
        android:width="100dp"
        android:layout_alignParentStart="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No Elevation\nNo TranslationZ"
        android:layout_below="@id/tv_left"
        />
    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_bg"
        android:elevation="5dp"
        android:height="100dp"
        android:width="100dp"
        android:layout_centerHorizontal="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Elevation = 5\nNo TranslationZ"
        android:layout_below="@id/tv_center"
        android:layout_alignStart="@id/tv_center"
        />
    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_bg"
        android:translationZ="5dp"
        android:height="100dp"
        android:width="100dp"
        android:layout_alignParentEnd="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No Elevation\nTranslationZ = 5"
        android:layout_below="@id/tv_right"
        android:layout_alignStart="@id/tv_right"
        />
    <TextView
        android:id="@+id/tv_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_bg"
        android:elevation="5dp"
        android:translationZ="5dp"
        android:height="100dp"
        android:width="100dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Elevation = 5\nTranslationZ = 5"
        android:layout_toEndOf="@id/tv_bottom"
        android:layout_alignParentBottom="true"
        />
</RelativeLayout>
res/drawable/rounded_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffff662a"/>
            <size android:height="100dp" android:width="100dp"/>
        </shape>
    </item>
</selector>
More android examples