【Android】UIを手前に描画する方法【XML】

今回はAndroidでUIの描画順序をしてする方法を紹介します。あるUIを手前に描画したい場合などに使用します。C#(WPF/XAML)ではZIndexでやっていましたが、ふとAndroid(XML)でやる方法が気になり、サンプルを作ってみましたので紹介します。

とりあえずFrameLayoutで描画してみる
描画の順番を制御する方法(手前に描画する方法)
まとめ

とりあえずFrameLayoutで描画してみる

UIが並ばずに重なって描画されるFrameLayoutを使用します。

FrameLayout内に3色(RGB)のTextViewを配置してみました。記載はRGBの順です。
適当にmarginを設定して完全に重ならないようにしています。

XMLの上から描画されるので、B(青)が一番手前に描画されています。

描画の順番を制御する方法(手前に描画する方法)

translationZを設定することで、どのUIを手前に描画するかを制御できます。

上のサンプルにおいて緑のTextViewを手前に持ってくる場合、以下のように設定します。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:padding="100dp"
    android:background="#ccc">
    <!-- Red -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#f00"
        android:text="RED" />
    <!-- Green -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="25dp"
        android:background="#0f0"
        android:translationZ="1dp"
        android:text="Green" />
    <!-- Blue -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="50dp"
        android:background="#55f"
        android:text="Blue" />
</FrameLayout>

緑が手前に来ました。