androidxmlgrid-layoutandroid-gridlayout
Layout with Fixed Height (
Gridlayout - sizing of element over extending past elements
Intro/Issue
I'm using a mobile app called AIDE (and it's program App UI Designer) to create a layout for an mobile app I'm making before I start programming it. The layout is almost perfect. I'd want the playerTwo portion to be on the top of the screen, upside-down for the purpose of both players being able to use it. Then I'd add a divider in the middle, and the playerOne portion would be on the bottom, with the blank space/divider in the middle. The problem is, the divider, when set to Wrap Content for the height, it overextends off the screen going down, pushing the playerOne section off screen.
What I Need
I need the divider to keep expanding in height until the playerOne portion is on the bottom of the screen and playerTwo section is on the top.
What I've tried
- Changing the row and column span of every element
- Changing the layout gravity to Center, Fill, Fill Vertical, etc. on various elements
- Modifying the row and column of the divider
- Modifying the gravity, margins, and padding of the divider
- Changing the height to Match Parent
Screenshots
Layout with Fixed Height (10 dp)
Layout with Wrap Content
XML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
columnCount="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
rowCount="1"
android:columnCount="3"
android:layout_gravity="right"
android:orientation="horizontal"
android:rowCount="8">
<!-- Start of Player Two Section -->
<!-- Current LP -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="8000 LP"
android:minWidth="100dp"
android:gravity="center"
android:rotation="180"
android:id="@+id/playerTwo_LP"
android:layout_column="1"
android:layout_row="0"
android:layout_rowSpan="2"
android:layout_gravity="fill"/>
<!-- Toolkit -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="TOOLS"
android:rotation="180"
android:id="@+id/playerTwo_toolKit"
android:layout_row="1"
android:layout_column="0"/>
<!-- Cards Tool -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CARDS"
android:layout_row="1"
android:layout_column="2"
android:rotation="180"
android:id="@+id/playerTwo_CardLibrary"/>
<!-- Add LP -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="ADD LP"
android:layout_gravity="fill"
android:rotation="180"
android:id="@+id/playerTwo_addLP"
android:layout_row="0"
android:layout_column="0"/>
<!-- Lose LP -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="LOSE LP"
android:layout_column="2"
android:rotation="180"
android:id="@+id/playerTwo_loseLP"
android:layout_row="0"/>
<!-- Player Two Name -->
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ems="10"
android:layout_row="2"
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:text="Seto Kaiba"
android:gravity="center"
android:id="@+id/playerTwo_name"
android:textStyle="italic"
android:rotation="180"/>
<!-- End of Player Two Section -->
<View
android:background="?android:attr/dividerVertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_row="3"
android:layout_rowSpan="1"
android:layout_gravity="center|fill"/>
<!-- Start of Player One Section -->
<!-- Player One Name -->
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ems="10"
android:layout_row="5"
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:text="Yugi Muto"
android:gravity="center"
android:id="@+id/playerOne_name"
android:textStyle="italic"
android:rotation="0"/>
<!-- Current LP -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="8000 LP"
android:minWidth="100dp"
android:gravity="center"
android:rotation="0"
android:id="@+id/playerOne_LP"
android:layout_column="1"
android:layout_row="6"
android:layout_rowSpan="2"
android:layout_gravity="fill"/>
<!-- Toolkit -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="TOOLS"
android:rotation="0"
android:id="@+id/playerOne_toolKit"
android:layout_row="6"
android:layout_column="0"
android:layout_gravity="center"/>
<!-- Cards Tool -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CARDS"
android:layout_row="6"
android:layout_column="2"
android:rotation="0"
android:id="@+id/playerOne_CardLibrary"/>
<!-- Add LP -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="ADD LP"
android:layout_gravity="fill"
android:id="@+id/playerOne_addLP"
android:layout_row="7"
android:layout_column="0"/>
<!-- Lose LP -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="LOSE LP"
android:layout_column="2"
android:id="@+id/playerOne_loseLP"
android:layout_row="7"/>
<!-- End of Player One Section -->
</GridLayout>
Solution
Fundamentally, I think GridLayout is the wrong choice for your parent layout. You can tell just by looking at your layout that it's not really a grid. Sure, you can use spans to make it work for you, but you'd be better off choosing a parent layout that you didn't have to fight.
I recommend ConstraintLayout. It is almost tailor-made for layouts like this one. You can tell it nice things like "put this view in the top-right corner" and "put this other view in the bottom left corner". Or "stretch this view to fill all the space between these two other views".
Here's what your layout would be if you re-wrote it to use ConstraintLayout:
<?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"
android:padding="16dp">
<!-- player two section -->
<Button
android:id="@+id/playerTwo_addLP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ADD LP"
android:rotation="180"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<Button
android:id="@+id/playerTwo_toolKit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TOOLS"
android:rotation="180"
app:layout_constraintTop_toBottomOf="@+id/playerTwo_addLP"
app:layout_constraintLeft_toLeftOf="parent"/>
<Button
android:id="@+id/playerTwo_loseLP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LOSE LP"
android:rotation="180"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/playerTwo_CardLibrary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CARDS"
android:rotation="180"
app:layout_constraintTop_toBottomOf="@+id/playerTwo_loseLP"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="@+id/playerTwo_LP"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="8000 LP"
android:textAppearance="?android:attr/textAppearanceLarge"
android:rotation="180"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/playerTwo_addLP"
app:layout_constraintRight_toLeftOf="@+id/playerTwo_loseLP"
app:layout_constraintBottom_toBottomOf="@+id/playerTwo_toolKit"/>
<EditText
android:id="@+id/playerTwo_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="italic"
android:text="Seto Kaiba"
android:rotation="180"
app:layout_constraintTop_toBottomOf="@+id/playerTwo_toolKit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<!-- player one section -->
<Button
android:id="@+id/playerOne_addLP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ADD LP"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<Button
android:id="@+id/playerOne_toolKit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TOOLS"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="@+id/playerOne_addLP"/>
<Button
android:id="@+id/playerOne_loseLP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LOSE LP"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<Button
android:id="@+id/playerOne_CardLibrary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CARDS"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/playerOne_loseLP"/>
<TextView
android:id="@+id/playerOne_LP"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="8000 LP"
android:textAppearance="?android:attr/textAppearanceLarge"
app:layout_constraintTop_toTopOf="@+id/playerOne_toolKit"
app:layout_constraintLeft_toRightOf="@+id/playerOne_toolKit"
app:layout_constraintRight_toLeftOf="@+id/playerOne_CardLibrary"
app:layout_constraintBottom_toBottomOf="parent"/>
<EditText
android:id="@+id/playerOne_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="italic"
android:text="Yugi Muto"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/playerOne_toolKit"/>
<!-- divider -->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="?android:attr/dividerVertical"
app:layout_constraintTop_toBottomOf="@+id/playerTwo_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/playerOne_name"/>
</android.support.constraint.ConstraintLayout>