Androidのレイアウトにて、子Viewを親Viewからはみ出して表示させたい!
という時のメモです。
###初期状態のレイアウト
xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
android:background="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:padding="12dp"
android:background="@color/colorAccent"/>
</LinearLayout>
</RelativeLayout>
上のHello World!のTextViewを親画像からはみ出させたい時、
以下の2通りの表示方法を紹介します。
・はみ出した部分を隠す
・はみ出した部分を表示する
###はみ出した部分を隠す
xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
android:clipChildren="false"
android:clipToPadding="false"
android:background="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:text="Hello World!"
android:padding="12dp"
android:background="@color/colorAccent"/>
</LinearLayout>
</RelativeLayout>
子Viewのlayout_marginの要素をはみ出したい分だけマイナスにします。
###はみ出した部分を表示する
xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dp"
android:clipChildren="false"
android:clipToPadding="false"
android:background="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:text="Hello World!"
android:padding="12dp"
android:background="@color/colorAccent"/>
</LinearLayout>
</RelativeLayout>
親の親のViewに対して
android:clipChildren="false"
android:clipToPadding="false"
と、すると親のViewの領域を超えて子Viewを描画できます。