お問い合わせ : @ivanzamzam

RelativeLayout — 本質、Androidアプリケーションのレイアウトルール

知識
UI/UXとコンポーネント
RelativeLayout
著者： IT Sectr 公開日: 2026-02-24 読了時間: 9 分

RelativeLayoutの本質を説明します — Android SDKのViewGroupで、子要素を相互または親コンテナに対して相対的に配置します。要素を厳密に順次配置するLinearLayoutとは異なり、RelativeLayoutでは任意の要素をIDによって他の要素の左、右、上、下、または中央に配置できます。これにより、RelativeLayoutはネストなしで重なり合う複雑なレイアウトに便利です。基本的なルールはAndroid Developersドキュメントに記載されています。

重要なポイント

  • layout_below / layout_above — 指定した要素のIDによって要素を上または下に固定する；フローを構築するための主要な属性。
  • alignParentTop / alignParentBottom — 要素の端を親の対応する端に固定する；4辺すべてで機能。
  • 中央揃え — centerInParent（両軸の中央）、centerHorizontal（X軸の中央）、centerVertical（Y軸の中央）。
  • toLeftOf / toRightOf — 重なりなく指定した要素の左または右に配置。
  • 重なりルール — ルールが競合する場合（例：alignParentTopと別の要素のbelow）、XMLで最後に宣言されたルールが優先。

RelativeLayoutとは？

RelativeLayout — API Level 1からAndroid SDKに導入されたViewGroupで、宣言的なルール（layout rules）を通じて子要素を親または他の子要素に対して相対的に配置します。各ルールは、android:layout_above、android:layout_below、android:layout_toLeftOfなどのXML属性にターゲット要素のIDを値として設定することで定義されます。

RelativeLayoutが登場する前、開発者は非標準的な配置ごとにネストされたLinearLayoutを使用する必要がありました — これにより深いネストと遅いレンダリングが発生しました。RelativeLayoutは単一の階層レベルで相対配置を提供することでこの問題を解決しました。ただし、その柔軟性は最新のConstraintLayoutと比較すると制限されています：RelativeLayoutはチェーン、バリア、ガイドライン、パーセンテージベースの寸法をサポートしていません。

RelativeLayoutには2つの主要な特徴があります：単一のonMeasureパス（weightが必要なLinearLayoutは2パス必要）と宣言順序への依存 — 要素Aが要素Bを参照し、BがAより後に宣言されている場合、Aの測定時点でBのサイズが既知でなければなりません。Android Developers Guide（2024）によると、すべてのルールが既に測定された要素を参照している場合、RelativeLayoutは1パスで測定を実行します。そうでない場合、2番目のパスが必要となり、パフォーマンスが低下します。

RelativeLayoutが必要な場合

RelativeLayoutは、相対配置が必要な3〜7要素のシンプルなレイアウト（ボタンの上のラベル、テキストの右のアイコン、画面下部のパネル）に適しています。新しいプロジェクトではConstraintLayoutが推奨されますが、RelativeLayoutはレガシーコードやライブラリで今でも広く使用されています。

配置ルール：relativeとalign

RelativeLayoutは2種類のルールを使用します：relativeルール（別の要素に対する相対配置）とalignルール（親への固定）。各子要素は無制限のルールを持つことができますが、競合するルール（例：alignParentTopと別の要素のbelow）は最後に宣言された属性が優先されます。

Relativeルール： - android:layout_above="@id/target" — 要素の下端がtargetの上端に固定されます。 - android:layout_below="@id/target" — 要素の上端がtargetの下端に固定されます。 - android:layout_toLeftOf="@id/target" — 右端がtargetの左端に固定されます。 - android:layout_toRightOf="@id/target" — 左端がtargetの右端に固定されます。 - android:layout_toStartOf="@id/target" — RTLロケール向けのtoLeftOfと同様。 - android:layout_toEndOf="@id/target" — RTL向けのtoRightOfと同様。

Alignルール（親へ）： - android:layout_alignParentTop="true" — 要素の上端が親の上端と一致。 - android:layout_alignParentBottom="true" — 下端が親の下端と一致。 - android:layout_alignParentLeft="true" — 左端が親の左端と一致。 - android:layout_alignParentRight="true" — 右端が親の右端と一致。 - android:layout_alignParentStart と android:layout_alignParentEnd — RTL向け。

他の要素へのAlignルール： - android:layout_alignTop="@id/target" — 要素の上部がtargetの上部と一致。 - android:layout_alignBottom、android:layout_alignLeft、android:layout_alignRight、android:layout_alignStart、android:layout_alignEnd — 同様。 - android:layout_alignBaseline="@id/target" — テキストのベースラインで揃える（異なるフォントサイズの文字列に便利）。

中央揃えとZ順序

RelativeLayoutでの中央揃えは3つの属性で設定します：android:layout_centerInParent="true"（両軸で親の中央）、android:layout_centerHorizontal="true"（水平方向の中央）、android:layout_centerVertical="true"（垂直方向の中央）。中央揃えは他のルールと互換性があります：要素を水平方向に中央揃えしつつ、親の下端に固定することができます。

Z順序（重なり順序）はXMLでの要素宣言の順序によって決定されます。最初に宣言された要素が最初に描画され（下に）、最後の要素が最後に描画されます（上に）。XMLを変更せずに重なり順序を変更する必要がある場合は、android:elevation（API 21以降）を使用します — elevationが高い要素が上に描画されます。API 21より前のバージョンでは、重なり順序は宣言順序のみで制御されます。

重要：RelativeLayoutは親のandroid:elevation属性をサポートしていません — 各要素が自身のelevationを制御します。配置ルールとelevationが競合する場合（例：重なり合う要素）、レンダリングではelevationが優先されますが、配置では優先されません — elevationが高い要素は、レイアウトルールが「後ろ」に配置していても、視覚的に別の要素を重ねることができます。

例：RelativeLayoutを使ったXMLレイアウト

例1：ユーザープロフィール

アバターが上部中央、名前がアバターの下、ステータスが名前の下、アクションボタンが画面下部。すべての要素は連続的な固定のためにrelativeルールを使用します。

xml 
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:src="@drawable/avatar_placeholder" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/avatar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="イワン・イワノフ"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/user_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/user_name"
        android:layout_centerHorizontal="true"
        android:text="オンライン"
        android:textColor="@color/green" />

    <Button
        android:id="@+id/edit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:text="プロフィールを編集" />

</RelativeLayout>

アバターはmarginTop + centerHorizontalで上部に固定、名前はlayout_belowでアバターの下、ステータスは名前の下、ボタンはalignParentBottomで親の下端に固定されています。すべての要素は互いに独立しており、チェーンやネストはありません。

例2：アイコンとバッジ付きパネル

右上隅に赤いバッジ（数字入りの円）付きのアイコン。バッジはアイコンに対してその端に合わせて配置され、重なりのために負のマージンが使用されています。

xml 
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_notification" />

    <TextView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignTop="@+id/icon"
        android:layout_alignRight="@+id/icon"
        android:layout_marginTop="-6dp"
        android:layout_marginRight="-6dp"
        android:gravity="center"
        android:background="@drawable/badge_background"
        android:text="3"
        android:textColor="@android:color/white"
        android:textSize="10sp" />

</RelativeLayout>

バッジはアイコンの上端と右端に固定されています。負のマージン（-6dp）がバッジを外側に移動させ、アイコンの境界線を重ねる効果を生み出します。これは通知の一般的なパターンであり、RelativeLayoutなしではFrameLayoutまたはカスタム描画が必要になります。

例3：RelativeLayoutを使ったログイン画面

ログインフォーム：ロゴが上部中央、その下にメールフィールド、メールの下にパスワードフィールド、パスワードの下に「ログイン」ボタン、「登録」リンクが下部に固定。すべての要素はlayout_belowで順次固定されています。

xml 
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <TextView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:text="MyApp"
        android:textSize="32sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/email_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/logo"
        android:layout_marginTop="32dp"
        android:hint="Email" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email_input"
        android:layout_marginTop="16dp"
        android:hint="パスワード"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginTop="24dp"
        android:text="ログイン" />

    <TextView
        android:id="@+id/register_link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="アカウントをお持ちでない方は登録"
        android:textColor="@color/primary" />

</RelativeLayout>

画面は単一の階層レベルで5つの要素を使用します。上から下へのフロー（ロゴ → メール → パスワード → ボタン）はlayout_belowで実現され、リンクはalignParentBottomで下部に押し出されます。同じ機能をLinearLayoutで実現するには、2つのネストされたコンテナ（上部グループ用と、weightを使用したリンク用）が必要です。

RelativeLayout vs ConstraintLayout：比較

相対配置のための2つのViewGroupの比較：RelativeLayout（クラシック、API 1+）とConstraintLayout（モダン、Jetpack）。基準：柔軟性、パフォーマンス、RTLサポート、適応性。

特性RelativeLayoutConstraintLayout
パーセンテージ寸法なし（固定とmatch_parentのみ）あり（width_percent、height_percent、guideline_percent）
RTLサポートstart/end経由（API 17+）組み込み
Chain / チェーンなしあり（spread、spread_inside、packed）
Barrier / Group / Flowなしあり（仮想ヘルパー）
MotionLayoutアニメーションなしあり
onMeasureパス1（依存関係サイクルなし）2（常に、ただし最適化済み）
中央揃えcenterInParent、centerHorizontal、centerVertical反対の制約でのbias（0.0–1.0）経由
使用すべき場合レガシーコード、3〜7要素のシンプルなレイアウト新規プロジェクト、複雑な画面、適応型レイアウト

RelativeLayoutは1つの点を除いてほぼすべての面でConstraintLayoutに劣ります：API 1からAndroid SDKに組み込まれており、追加の依存関係が不要です。API 14（Android 4.0）未満のminSdkをまだ使用しているプロジェクトでは、RelativeLayoutが相対配置の唯一の標準オプションです。それ以外のすべての場合、GoogleはConstraintLayoutを推奨しています。

よくある質問

RelativeLayoutの要素が表示されないのはなぜですか？

最も可能性の高い理由は、十分な配置ルールの欠如です。RelativeLayoutの各要素には、少なくとも1つの水平ルール（alignParentLeft、toRightOf、centerHorizontal）と1つの垂直ルール（alignParentTop、below、centerVertical）が必要です。ルールがない場合、要素は位置（0,0）になり、他の要素の下や画面外に隠れる可能性があります。2番目の理由は循環依存（要素AがBに、BがAに結びついている）で、予測不可能な動作を引き起こします。

RelativeLayoutで要素を画面の中央に配置するには？

属性android:layout_centerInParent="true"を使用します。両軸で同時に要素を中央揃えにします。水平方向のみ必要な場合はandroid:layout_centerHorizontal="true"、垂直方向のみの場合はandroid:layout_centerVertical="true"を使用します。中央揃えはマージンと組み合わせて機能し、要素は指定されたオフセット分だけ中央から移動します。

RecyclerViewでRelativeLayoutを使用できますか？

可能ですが、推奨されません。RelativeLayoutは循環依存がある場合に2回のonMeasureパスを実行し、RecyclerViewリストではConstraintLayoutより15〜30%遅くなります。RecyclerViewのアイテムレイアウトにはConstraintLayoutを使用してください — 最小限の測定時間でフラットな階層を提供します。レガシープロジェクトで既にRelativeLayoutを使用している場合は、要素が循環依存を生み出さないことを確認し、Profile GPU RenderingでスクロールFPSを測定してください。

RelativeLayoutでlayout_marginとlayout_marginTopの違いは？

android:layout_marginはすべての辺に同時にマージンを設定します。android:layout_marginTopは上部のみに設定します。より具体的な属性が優先されます：layout_margin（16dp）とlayout_marginTop（8dp）の両方が設定されている場合、上部マージンは8dpになります。RelativeLayoutでは、マージンは隣接する要素ではなく制約に対して機能します：layout_below="@id/target"でのlayout_marginTopは、要素の上端からtargetの下端までのマージンです。

まとめ

  • RelativeLayout — 宣言的なルールを通じて要素を相互または親に対して相対的に配置するViewGroup。
  • 固定ルール — layout_below/above（垂直）、layout_toLeftOf/toRightOf（水平）、alignParentTop/Bottom（親へ）。
  • 中央揃え — centerInParent（中央）、centerHorizontal（X軸）、centerVertical（Y軸）で素早い位置揃え。
  • Z順序 — XMLの宣言順序で決定；elevation（API 21+）はレンダリング時にZ順序を変更。
  • 制限事項 — パーセンテージ寸法、チェーン、バリアなし；循環依存が2回目のonMeasureパスを引き起こす。
  • パフォーマンス — サイクルなしで1回のonMeasureパスだが、複雑なレイアウトではConstraintLayoutに劣る。
  • 推奨事項 — レガシープロジェクトで使用；新しい画面ではConstraintLayoutを選択。

ターンキー方式のモバイルアプリケーションを開発します

IT Sectrは2017年からスタートアップや企業向けにiOS・Androidアプリケーションを開発しています。私たちがご相談に乗り、最適なソリューションをご提案します。

プロジェクトについて相談

こちらもお読みください

ConstraintLayoutとは — 柔軟なAndroidレイアウト →
LinearLayout: 基礎、Androidの線形レイアウトとweight →
FrameLayout: キーコンセプト、Androidでのレイヤーオーバーレイ →
開発におけるフィーチャークリープとは何か、原因と対策 →
開発におけるゴミコード — その正体、兆候、そして整理方法 →