LoginSignup
52
39

More than 5 years have passed since last update.

Androidで子Viewを親Viewからはみ出して表示

Last updated at Posted at 2016-02-01

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>

Screenshot_2016-02-01-18-43-58.png

上の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>

Screenshot_2016-02-01-18-46-30.png

子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>

Screenshot_2016-02-01-18-50-55.png

親の親のViewに対して
android:clipChildren="false"
android:clipToPadding="false"
と、すると親のViewの領域を超えて子Viewを描画できます。

52
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
39