Jannik
Jannik

Reputation: 2439

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

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

Here are my goals:

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>

Upvotes: 0

Views: 44

Answers (2)

Elvis Xia - MSFT
Elvis Xia - MSFT

Reputation: 10841

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: enter image description here

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:

enter image description here

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

enter image description here

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

enter image description here

  1. 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.

Upvotes: 1

FreakyAli
FreakyAli

Reputation: 16587

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).

Upvotes: 0

Related Questions