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>

android relativelayout: the last viewgroup won't get over the header?

I want the last viewgroup with ID chats to overlap the previous viewgroups and occupy the whole screen of my phone. With the XML code below I presume it will get what I want. But the codes does not. Please help.
Below is the xml codes.
<?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:id="#+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.testapp.MainActivity">
<LinearLayout
android:id="#+id/bar"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="#999999"
android:elevation="10dp"
android:layout_width="match_parent"
android:layout_height="40dp">
<ImageView
android:id="#+id/bar_img"
android:src="#drawable/ic_autorenew_black_24dp"
android:gravity="clip_vertical"
android:paddingStart="8dp"
android:layout_width="36dp"
android:layout_height="36dp" />
<TextView
android:id="#+id/bar_title"
android:text="title"
android:ellipsize="end"
android:layout_weight="1"
android:gravity="center"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="18sp"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<FrameLayout
android:id="#+id/root_frag"
android:layout_below="#id/bar"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<LinearLayout
android:id="#+id/chats"
android:background="#ea2312"
android:orientation="vertical"
android:layout_alignParentStart="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/chat_list"
android:orientation="vertical"
android:layout_width`enter code here`="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="hello world"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
this is the preview screenshot.
enter image description here

The "chats" LinearLayout does fill the whole screen, but the "bar" LinearLayout appears on top of it (even though it's defined earlier inside the RelativeLayout) because of its android:elevation attribute.
To make this stop, either remove the elevation attr from the "bar" view, or add a (larger) elevation attr to the "chats" view.

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

Swiperefreshlayout with fragment not scrolling up

I have a layout with some preferences. It works correctly in portrait, but not in landscape. I want this layout to refresh with a swiperefreshlayout, and does work. But as i i say in the title, it doesnt scroll up.
Ive been playing with a normal LinearLayout, with a RelativeLayout, using the swiperefreshlayout as the root view, playing with weights, ... but nothing. It either doesnt scroll up, or doesnt show the preferences correctly (only the 1st title). Dont know what else to try.
I should also say, i want this screen to keep a linearlayout at the bottom, fixed there. So, only the preferences would scroll.
Heres what i have right now:
<?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" >
<LinearLayout
android:id="#+id/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:elevation="8dp"
android:background="#color/primary"
android:visibility="gone"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/setwallpaperbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onActivarClick"
android:text="#string/setwallpaperbuton"
android:visibility="gone"
android:clickable="true"
android:enabled="true"/>
<EditText
android:id="#+id/edittextlocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:textColor="#android:color/white"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center"
android:layout_gravity="center"
android:inputType="textMultiLine"
android:maxLines="2"
android:background="#android:color/transparent"
android:textAppearance="?android:attr/textAppearanceSmall" />
<EditText
android:id="#+id/edittextupdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:textColor="#android:color/white"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center"
android:layout_gravity="center"
android:inputType="text"
android:background="#android:color/transparent"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/swipelayout"
android:isScrollContainer="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/edittexts">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<fragment
android:name="es.jnsoft.nowweather.PreferencesFragment"
android:id="#+id/preferencesfragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#xml/settings"/>
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
Thanks in advance.

According to the documentation,
[SwipeRefreshLayout] should be made the parent of the view that will be
refreshed as a result of the gesture and can only support one direct
child.
This clause is violated in your layout.

What am i missing in this layout

I want to implement a layout like this for each row of a listview
So i created a container like this
<?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"
android:clickable="false"
android:focusable="false"
>
<!--List items goes here -->
</LinearLayout>
In the getView() method of my custom adapter, I inflate this xml for each box in the image above
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="500dp"
android:clickable="true"
android:focusable="true"
android:padding="10dp"
android:background="#drawable/list_item_background"
android:focusableInTouchMode="true">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/cnbc_default_image"/>
<ImageView
android:id="#+id/supportImageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"
android:src="#drawable/video_play_icon"
android:paddingLeft="10dp"
android:layout_above="#+id/title"/>
<TextView
android:id="#id/title"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#+id/description"
style="#style/large_news_title_text_style"/>
<TextView android:id="#id/description"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:maxLines="2"
android:ellipsize="end"
android:textSize="13sp"
style="#style/large_news_title_text_style"
android:textColor="#android:color/white" />
</RelativeLayout>
and then finally add the inflated view to the linearlayout instance using
row.addView(inflatedView);
However, the end result is first box stretching across X axis. If i inspect my layout using HierachyViewer, i do see 3 RelativeLayouts inside a LinearLayout, but the first one is occupying all the space.
The thumbnail image android:id="#+id/thumbnail", seems to be taking up match_parent attribute of the LinearLayout and not its immediate container RelativeLayout.
Clarification
The list view is from ListFragment.
When adding the box layout to the list view row container i use this method call
ViewGroup container = (ViewGroup)inflater.inflate(R.layout.list_view_row_land, parent, false);
View rowItem = inflater.inflate(R.layout.list_view_row_item,null);
container.addView(rowItem);
Solved:
The problem is solved if i modify the layout of the box to
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="500dp"
android:layout_height="300dp"
android:clickable="true"
android:focusable="true"
android:padding="10dp"
android:background="#drawable/list_item_background"
android:focusableInTouchMode="true">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/cnbc_default_image"/>
<ImageView
android:id="#+id/supportImageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"
android:src="#drawable/video_play_icon"
android:paddingLeft="10dp"
android:layout_above="#+id/title"/>
<TextView
android:id="#id/title"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#+id/description"
style="#style/large_news_title_text_style"/>
<TextView android:id="#id/description"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:maxLines="2"
android:ellipsize="end"
android:textSize="13sp"
style="#style/large_news_title_text_style"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
I still don't understand why. So any explanation of why putting a LinearLayout around solves the issue will be helpful.