テキスト、ボタン等を中央配置する【Androidアプリ開発】

各コンポーネントを中央配置する方法を説明しています。

レイアウト

以下の例では、LinearLayout内にテキストとボタンを配置しています。
※他のLayoutコンポーネントでも同じように出来ます。

レイアウト

Layoutコンポーネント

中央配置に必要な設定のみ紹介していきます。

 android:layout_gravity="center"

layout_gravityは、コンポーネントの配置を指定する設定です。
上記のように”center”を指定すると、縦・横のどちらも中央になります。
縦・横の片方のみ中央配置にすることも可能です。その場合は、以下の値を指定します。

  • 縦のみ中央配置:center_vertical
  • 横のみ中央配置:center_horizontal
android:layout_width="wrap_content"
android:layout_height="wrap_content"

layout_width、layout_heightは、コンポーネントの大きさ(幅)を指定する設定です。
“wrap_content”を指定すると、必要な分の領域を確保するように大きさが決まります。最初に示しているキャプチャでも、テキストとボタンが表示できる分だけの大きさとなっています。
“match_parent”を指定してしまうと、親コンポーネントに合わせた領域を確保してしまうため、中央配置することが出来なくなってしまいます。

ここまででLayoutコンポーネントを画面の中央に配置できるようになります。

テキスト・ボタン等のコンポーネント(Layout内部のコンポーネント)

Layout内部のコンポーネントが単一であれば、設定しなくても見た目は変わりません。Layoutコンポーネントで”wrap_content”を指定しているためです。

Layout内部に複数のコンポーネントを配置している場合は、各コンポーネントに中央配置する設定を追加していきます。

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"

Layoutコンポーネントと同じように設定します。

内部コンポーネントでは、縦の中央配置は出来ません。
親コンポーネントで設定しておきましょう。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="1つ目のアクティビティ" />

    <Button
        android:id="@+id/buttonNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="次のアクティビティへ" />
</LinearLayout>

まとめ

コンポーネントを中央配置する方法について説明しました。

  • コンポーネントの配置を設定するには「layout_gravity」を使用する。
    • center_vertical
      縦のみ中央配置
    • center_horizontal
      横のみ中央配置
    • center
      どちらも中央配置
  • “wrap_content”、”match_parent”の違いについて理解する。
    • wrap_content
      必要な領域を確保
    • match_parent
      親コンポーネントに合わせた領域を確保
Androidアプリ開発
この記事を書いた人

エンジニアとして仕事をしています。
仕事や趣味を通して、開発やプログラミングについて学んだことを綴っていきます。
 ・実務経験は、WEBシステムのサーバーサイドコーディングがメイン
 ・アプリ開発は趣味程度

akihiro-takedaをフォローする
akihiro-takedaをフォローする
プログラミング・開発の備忘録
タイトルとURLをコピーしました