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>

CardView goes on top of FrameLayout, but declared first

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>

I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"

Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.

This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>

Eclipse Android Layout: Without dp-values?

If I want to have a Picture in the Center of my layout, I easily use: "Center Vertically" and "Center Horizontally". But now I want a picture to have it in the Center of the left side. But I don't want to use marginLeft=..dp. I want to work without dp. Is there a possibility like "Center Vertically" etc? Here is the code with dp-values. What can I use instead of MarginLeft"38dp"?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:layout_marginLeft="41dp"
android:src="#drawable/rosezwei" />
</RelativeLayout>

If I understood correctly you want the image center at 25% of your screen width...
Alas Android has no percentage in XML, to do that you must use a LinearLayout to split your screen
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_gravity="center"
android:src="#drawable/rosezwei" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"/>
</LinearLayout>

use
android:layout_gravity="left|center_vertical"
Will work inside a LinearLayout view.
<?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:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="left|center_vertical"
android:src="#drawable/rosezwei" />
</LinearLayout >
Note that the LinearLayout is horizontal, so views can choose its VERTICAL position.

First view in RelativeLayout expand to fill remaining space

I am working on a layout with a cardview, a checkbox and a button with the initial structure as shown in the first image:
In this case the listview is not shown until the user clicks an image inside the cardview, so when this happens the dessired structure is like
the second image
However as the listview is actually inside a fragment I can't achieve the dessired layout because wrap_content and match_parent for the cardview gives me the next result
And as you can see the cardview overlaps the button and the checkbox goes beyond the screen
Right now this is my layout:
<?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"
android:background="#android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_below="#+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
style="#android:style/Widget.DeviceDefault.Button.Borderless"
/>
I hope you can help me to set the max height of the card view to stop growing when the space is filled.
I have also tried to set the checkbox always at top of the bottom and the cardview to fill the remaining space and although it gives me the correct structure when the listview is expanded, it doesn't work for the list hidden since the cardview fills the space with nothing.
Update
As suggested I have tried changing the root layout to LinearLayout using weight, however, I got the same result as before and if I change the weight of the cardview to 1 and the checkbox to 0 I am able to get the desired layout for the expanded list but not for the hidden case.
<?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="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:id="#+id/check"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:textStyle="bold"
android:textColor="#android:color/white"
/>

You'll need to use a LinearLayout and use Weight for the childs.
You can change all views weight on click.
But I think you'll need to put your CheckBox inside a layout and set this layout weight. Otherwise you'll mess with the height.
Didn't look to close to your layout, but you may need to do that for CardView too.
Just keep that in mind.
Hope this helps

To do what you are trying to do, you would have better luck using a LinearLayout with vertical orientation as your root element. Doing this, you could set the CardView to have a weight of 1 (and a 'height' of 0dp, because of how weight works) without giving a weight to the other elements, causing it to fill all available space not taken by the other two elements. The method for doing this can be found here:
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight

Place view on top and between two views

Trying to figure out to overcome this little problem.
Below, on the left side, is a sample of the view that I'm trying to implement for an app. On the right side is the view that I'm ending up with.
In my xml mock up I've decided to use a RelativeLayout but I can't get the TextView to be centered between the top and bottom views.
For reference here's a represenation of my xml code:
<RelativeLayout
android:layout_width:"match_parent"
android:layout_height:"wrap_content">
<ImageView
android:id="#+id/BlackImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_alightParentTop="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/RedImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_below="#+id/BlackImage"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/BlackImage"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Any idea what I'm missing, or how to change to get what I want?

try below link hope it will help you :-
TextView above Image view in a layout
Android listview item display text over image using array adapter
how to put text under image view
<?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:orientation="vertical" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_marginTop="-10dp"/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>