画面の一番下にボタンを配置したい！
アプリを作成していると割とそうした思いは出てくるけど、一筋縄でいかないことが多い。
ネットで調べてもレイアウトの構成が違っててあまり参考にならない・・・
同じような開発者の方多いのではないでしょうか。
今回、LinearLayoutを用いた場合とRelativeLayoutを用いた場合それぞれの実装例を紹介したいと思います。
開発のご参考になれば幸いです。
実装後のイメージ（１）
画面の一番下にボタンを表示したサンプル画面です。
（調べている内容がこのような画面構成の実装例でない場合は、以降の内容は読み飛ばして下さい）
LinearLayoutで実装する場合
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/cat">
</ImageView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|bottom">
<Button
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@drawable/btn">
</Button>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
LinerLayoutのwidth, heightはmatch_parentを指定、gravityにbottomを指定します。
ボタンを画面下に表示するだけであれば、gravity = centerの指定は無くてもよいです。
作成したLinerLayout内にButtonを定義すると画面下部に表示されます。
※ボタンのwidth, heightはサンプル用に指定しています。
RelativeLayoutで実装する場合
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/cat">
</ImageView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:id="@+id/bottom_view"
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@drawable/btn">
</Button>
</RelativeLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
こちらはRelativeLayoutを用いた場合の例です。
RelativeLayout 内で layout_alignParentBottom=”true” を指定し、下部定義します。
このRelativeLayout内に ボタンを定義することで画面下部に表示されます。
実装後のイメージ（２）
イメージ（１）ではボタンを画面下部に配置出来ましたが、背景画像と被っていました。
次は、画面下部に配置したボタンの上に会計画像を表示させる場合の実装例を記載してみます。
RelativeLayoutで実装する場合
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/cat"
android:layout_above="@id/bottom_view">
</ImageView>
<LinearLayout
android:id="@+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:background="@color/colorAccent">
<Button
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@drawable/btn">
</Button>
</LinearLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
イメージ（１）との差分は、ImageViewに「android:layout_above=”@id/bottom_view”」を追加した部分です。
これは ImageViewは、android:idがbottom_viewで定義されたLinearLayoutの上に配置することを意味します。
このようにすることでイメージ（２）の様なレイアウトが実装出来ます。
今回の実装例は非常にシンプルな内容で記載してみました。
そのままコードを引用するとイメージと同じレイアウトとなりますので、適宜変更してイメージした画面設計に役立てて頂ければと思います。
