Setting up two LinearLayouts aligning one at the buttom and the other centered on the rest of the screen

Question

I am very new to android designing and have some basic problems setting up a simple layout:

Here are my goals:

• I would like to have two buttons at the end of the Screen, each having the same size, filling the width of the screen.
• A second LinearLayout should fill the rest of the screen, but all its content should be vertically centred.

I tried my best, but sometimes my bottom LinearLayout completely disappears, sometimes the bottom one looks fine, but the other layouts content isn't centred. I just don't know what to try out anymore. Here is what I got so far:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:id="@+id/editTableName"
      android:hint="@string/TableNameHint" />
    <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:id="@+id/editTableDescripion"
      android:hint="@string/TableDescriptionHint" />
    <EditText
      android:inputType="textPassword"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:hint="@string/TablePasswordHint"
      android:id="@+id/TablePassword"
      android:fontFamily="sans-serif" />
  </LinearLayout>
  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom">
    <Button
      android:id="@+id/BtnAddTable"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="@string/BtnAddTable" />
    <Button
      android:id="@+id/BtnCancelAddTable"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="@string/BtnCancelAddTable"
      />
  </LinearLayout>
</LinearLayout>

Answer 1

I tried my best, but sometimes my bottom LinearLayout completely disappears, sometimes the bottom one looks fine, but the other layouts content isn't centred.

Your button is sometimes disappearing because your top sub Linearlayout's height is match_parent, which makes it fill the parent's height and cover the below views.

What you need is a layout structure like below:

Description:

So like the description in the picture, you can set weightsum to your parent layout and set the weight percentage to your sub layout. And wrap your button's Linearlayout using Relativelayout, so that you can get the buttons centered.

Codes:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="4">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
           android:layout_gravity="center"
            android:id="@+id/editTableName"
            android:hint="@string/TableNameHint" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:id="@+id/editTableDescripion"
            android:hint="@string/TableDescriptionHint" />
        <EditText
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:hint="@string/TablePasswordHint"
            android:id="@+id/TablePassword"
            android:fontFamily="sans-serif" />
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="bottom">
            <Button
                android:id="@+id/BtnAddTable"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/BtnAddTable" />
            <Button
                android:id="@+id/BtnCancelAddTable"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/BtnCancelAddTable" />
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

Update:

RelativeLayout has restrictions, it can only contain one child. So if you want to add more widgets in the bottom region then the best option for you is to use ConstraintLayout.

For Xamarin, you can follow the below steps:

1. Open Android SDK Manager in your VS:

2. Tools->Other->Check below versions of Constraintlayout and solver for Android like below and apply changes:

3. Install Xamrin.Android.Support.Constraint.Layout to your project through nuget package:

4. Then use the following xml codes:

   <?xml version="1.0" encoding="utf-8"?>
   <android.support.constraint.ConstraintLayout 
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
     <EditText
         android:id="@+id/editText"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Name" />
   
     <EditText
         android:id="@+id/editText2"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Name"
         app:layout_constraintTop_toBottomOf="@+id/editText" />
   
     <EditText
         android:id="@+id/editText3"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:layout_constraintTop_toBottomOf="@+id/editText2" />
   
     <android.support.constraint.Guideline
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/guideline"
         app:layout_constraintGuide_percent="0.6"
         android:orientation="horizontal"/>
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:layout_constraintBottom_toBottomOf="@id/guideline"
         android:orientation="horizontal">
     <Button
         android:id="@+id/button"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="Button"/>
     <Button
         android:id="@+id/button2"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="Button"/>
     </LinearLayout>
   </android.support.constraint.ConstraintLayout>
   

Short Explaination: use android.support.constraint.Guideline with app:layout_constraintGuide_percent="0.6" to draw an invisible line to help position the buttons.(guideline will be 60% from the top screen). Then let buttons' stacklayout to be bottom of the guideline.

For detail usage of ConstraintLayout, please refer to Build responsive UI with ConstraintLayout.

Answer 2

Well, what you are trying to do is more achievable by just adding a Relative layout to the mix:

What you have to do is this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="6"
 android:layout_gravity="center">
<EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:id="@+id/editTableName"
  android:hint="@string/TableNameHint" />
<EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:id="@+id/editTableDescripion"
  android:hint="@string/TableDescriptionHint" />
<EditText
  android:inputType="textPassword"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:hint="@string/TablePasswordHint"
  android:id="@+id/TablePassword"
  android:fontFamily="sans-serif" />
</LinearLayout>
<RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true">
<LinearLayout
 android:orientation="horizontal"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
>
<Button
  android:id="@+id/BtnAddTable"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="@string/BtnAddTable" />
<Button
  android:id="@+id/BtnCancelAddTable"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="@string/BtnCancelAddTable"
  />
 </LinearLayout>
 </RelativeLayout>
 </LinearLayout>

RelativeLayout:

The Official Android developer website says :

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or centre).