Develop Reference

Android Layouts: Stick one Layout to the top of the screen and place another Layout centred below

I am working on my first android-project, a memory-game in Android Studio. The gameActivity-Frame should contain some textViews, displayed in one line (for stats) on the top of the screen and the memory-cards below. There are mutliple memory-versions, so the number of memory-cards vary - and by that the dimension of thier GridLayout.
My main Layout is a LinearLayout (vertical). I placed another LinearLayout (horizontal) on it, where the Textviews take place. To display the cards, I used a GridLayout which will be filled with cards once the game started.
The LinearLayout (with textViews) should always stick on the top of the screen. The GridLayout should be centered in the remaining space below.
What I get is that both Layouts either stick in the middle, or that the LinearLayout is correct, but the GridLayout is either on the bottom or on the top of the remaining space.
I tried to find a solution here on SO, and I think I tried every possible combination of the gravity- and layout_gravity - settings of the components. I can imagine the problem is that I can use either wrap_content or match_parent in the main Layout, but not both. Guess I'd need wrap_content to stick the first Layout to the top and match_parent to use the whole space below this Layout.
How can I stick the first Layout to the top and center the GridLayout in the remaining space?
The picture shows my current layout (see code below) and how I want it to look.
center_GridLayout
Edit to clarify:
The LinearLayout should stick to the top of the screen, the GridLayout should be
centered in the remaining space below the LinearLayout.
RelativeLayout won't do the job properly, because the layouts might overlap, depending on the amount of memory-cards and the user's device's dimensions.
I uploaded another screenshot where it's better visible what I want to achieve:
This is my .xml (deleted some unimportant textViews):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/MemoryLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textStatsPairs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/textStatsPairs" />
</LinearLayout>
<GridLayout
android:id="#+id/gridLayoutMainActivityTEST"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:foregroundGravity="center"
android:orientation="horizontal"
android:rowCount="4"
android:textAlignment="center"
android:useDefaultMargins="true"
tools:context=".GameActivity" />
</LinearLayout>

use relative layout or constraint layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/MemoryLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textStatsPairs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/textStatsPairs" />
</LinearLayout>
<GridLayout
android:layout_centerInParent="true"
android:id="#+id/gridLayoutMainActivityTEST"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:foregroundGravity="center"
android:orientation="horizontal"
android:rowCount="4"
android:textAlignment="center"
android:useDefaultMargins="true"
tools:context=".GameActivity" />
</RelativeLayout >

You can use relative layout along with linearlayout.From your question i got that you want your linearlayout always stick to top and GridLayout always stick to center.If this is the case then i think following code snippet will help you.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</GridLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Texts Here"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
</RelativeLayout>

The ConstraintLayout was what fixed my problem... Here's the solution that finally works perfectly:
<?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:id="#+id/memory_activity_4x4"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout_4x4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textStatsPairs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/textStatsPairs" />
</LinearLayout>
<GridLayout
android:id="#+id/gridLayout4x4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:columnCount="4"
android:foregroundGravity="center"
android:orientation="horizontal"
android:rowCount="4"
android:textAlignment="center"
android:useDefaultMargins="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout_4x4"
tools:context=".GameActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>

Placing ImageView to the left of centered buttons

I am trying to place a ImageView object to the left of a linear layout object (that is a parent of two buttons). I basically want two buttons centered horizontally with the screen with an image place to the left of the centered buttons. I still want the buttons to remain centered horizontally, the placed image view should not be centered, just merely to the side.
Any suggestions would be really great. I may have been approaching my problem with the wrong layouts but here is what I have tried:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/gameSettingsContainer"
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"
android:fitsSystemWindows="true"
tools:context="com.example.vb1115.multchoicequestion.LaunchScreen"
android:orientation="vertical"
android:gravity="center_horizontal">
<LinearLayout
android:id="#+id/buttonContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ToggleButton android:id="#+id/mathButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Math"
android:textOn="Math"
android:text="Math"/>
<ToggleButton android:id="#+id/bioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Biology"
android:textOn="Biology"
android:text="Biology"/>
</LinearLayout>
<ImageView
android:id="#+id/animatedArrow"
android:src="#mipmap/green_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/buttonContainer"/>
</RelativeLayout>

Although I don't have my Android Studio to test, I can already make a few assumptions...
1st, no need to use android:orientation="vertical" nor android:gravity="center_horizontal" for your root RelativeLayout...
2nd, to position the 2 children elements use android:layout_centerHorizontal for the LinearLayout, and keep android:layout_alignParentLeft for your ImageView...
This should begin to be a bit better... The main idea is that in a RelativeLayout it's usually more efficient to let the children decide their position... Hope this will help.

Here solution
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/gameSettingsContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/buttonContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ToggleButton
android:id="#+id/mathButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Math"
android:textOff="Math"
android:textOn="Math"/>
<ToggleButton
android:id="#+id/bioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Biology"
android:textOff="Biology"
android:textOn="Biology"/>
</LinearLayout>
<ImageView
android:id="#+id/animatedArrow"
android:layout_toStartOf="#+id/buttonContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/green_arrow"/>
</RelativeLayout>

Without having android studios to test:
To center the LinearLayout within the RelativeLayout use the Layout_centerHorizontal="true"
<LinearLayout
android:id="#+id/buttonContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
For each of the buttons to be distributed evenly and centered use layout_weight="1" (so each have the same weight) and gravity="center_horizontal"
<ToggleButton android:id="#+id/mathButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Math"
android:textOn="Math"
android:text="Math"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
<ToggleButton android:id="#+id/bioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Biology"
android:textOn="Biology"
android:text="Biology"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
Then place the ImageView to layout_toStartOf your buttonContainer
<ImageView
android:id="#+id/animatedArrow"
android:src="#mipmap/green_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/buttonContainer">

Make ImageView take up all available vertical space and grow width to scale up/down proportionally in RelativeLayout

I'm targeting API level 21 and min is also 21 (I support Lollipop only for now, it's a pet project to learn).
I'm having problems with a custom ListView item layout. Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#FF0000"
android:src="#drawable/ic_test"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/test_list_item_icon"
android:textSize="50sp"/>
</RelativeLayout>
And here is what it looks like (the icon's red background color is only to see how big the actual view is):
I would like the image view to behave like the following: take up the available vertical space at the 'start'/left of the layout, have the image scale proportionally, and have the width be grown so that the image can be fully shown, like this (pardon my gimp skills):
Is it possible?

Try this for your ImageView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#FF0000"
android:src="#drawable/ic_test"
android:adjustViewBounds="true"
android:scaleType="fitXY"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/test_list_item_icon"
android:textSize="50sp"/>
</RelativeLayout>

In the end I decided to create one more icon size, xxxhdpi, and it all looks nice now.
Many thanks to #corsair992 for information about the bug in one of the comments.

HI wujek the reason for your problem is you set height as wrap content for your relative layout . so it will take the textview's height as its height .then image view will use this as its height .so change relative layout height to match parent. Please try and let me know thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:adjustViewBounds="true"
android:background="#ff0000"
android:src="#drawable/ic_launcher"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/layout_1"
android:gravity="center"
android:text="bhsbd"
android:textSize="50sp" />

try this
if u want to image should capture imageview size use background insted src.
if red background is mandatory use another relative layout as parent for imageview.
hope it works fo u..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#FF0000" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:background="#drawable/ic_launcher"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
</RelativeLayout>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/layout_1"
android:textSize="50sp" />
</RelativeLayout>
edit 2
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/test_list_item_name"
android:layout_alignTop="#+id/test_list_item_name"
android:background="#FF0000" >
<ImageView
android:id="#+id/test_list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:adjustViewBounds="true"
tools:ignore="ContentDescription" />
</RelativeLayout>
<TextView
android:id="#+id/test_list_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/layout_1"
android:textSize="50sp"
android:text=" text 5>" />
</RelativeLayout>

Define a LineatLayout with weightsum.
<LinearLauyout
----
android:orientation="horizontal"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
</LinearLayout>
you can adjust the weightsum as per your requirement.

Android : 3 elements side by side

I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>

You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.

For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />

You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.

You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.

You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you

Problems Horizontal / Vertical Layout Android App

I´m trying to code my first android-app. I read a lot, but I have problems with the layout.
What is wrong in both xml?
For a better understanding, I have made a picture:
My XML for main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot_again" />
</LinearLayout>
</LinearLayout>
for main.xml in the folder layout-land, If i switch to the landscape-Mode the app crashes:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
</LinearLayout>

Okay, just looking at your XML, there are a few issues:
Portrait XML:
< ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
Here, you've set both a weight and a height - in a LinearLayout you can't have both. Either you set the height yourself, or you give it a height of 0dp and a weight, then let the LinearLayout assign the height. As for why it's rotated, the image itself might be rotated in your resources.
Horizontal XML:
Your root LinearLayout still needs to have a vertical orientation
Your ImageView needs to be declared above your Button
What's happening is that a) it's horizontal, b) your button is getting put on first, and c) your button has a android:layout_width="match_parent", which means the ImageView has nowhere to be put, as your Button is already taking up all of the space on screen (can you see why this is case?)
Make these changes, then update your question as appropriate, as I think that your problems will have changed