Reputation: 2439
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
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:
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:
Xamrin.Android.Support.Constraint.Layout
to your project through nuget package: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
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