Develop Reference

RecyclerView fill empty space inside LinearLayout

Background
I have a header and footer (LinearLayout) with a RecyclerView between them.
The problem
I need that the footer stay fixed at the bottom of the screen and the RecyclerView fills the empty space
What I've tried
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="br.com.sigane.coletordifal.activity.EnderecamentoActivity">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Header" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/produtos_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Footer" />
</LinearLayout>
</LinearLayout>
Also tried to use ConstraintLayout, but without success

Try this
Add android:layout_height="0dp" and android:layout_weight="1" to the RecyclerView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Header" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/produtos_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Footer" />
</LinearLayout>
</LinearLayout>

I don't think you need to have separate linear layouts. I think just one is enough. Just set your weights like this for your recyclerview and footer.
<android.support.v7.widget.RecyclerView
android:id="#+id/produtos_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:scrollbars="vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Footer" />

I recommend using the constraint layout, it is a FrameLayout on steroids. If you are using android studio 3.2, right-clicking on the root element in the design view shows a menu with the option "convert to constraintlayout"
The reason you do not want to nest layouts like this, Each nested element results in additional measure passes, nested layouts are messy and harder to inflate than flat layouts.
Highly recommend spending an hour or so reading about the constraint layout and how to use it. You will not regret it, helped my improve productivity by 2x.
Hope this is helpful.

Buttons gone after added swiperefreshlayout

I have a layout with listview and two buttons side by side at the bottom of the listview. Everything work fine until I have added the swiperefreshlayout for my listview.
My codes are as below.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFF"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/search_bar"
android:background="#color/colorPrimaryDark"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<EditText
android:id="#+id/keyword_editText"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:background="#drawable/search_edit_text"
android:hint="Keyword"
android:textColorHint="#color/list_item_title"
android:textColor="#000"
android:layout_centerVertical="true"
android:maxLines="1"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView_layout"
android:orientation="vertical"
android:layout_below="#+id/search_bar"
>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ListView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/RsListView"
android:dividerHeight="1dp"
android:divider="#D3D3D3"/>
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/req_history_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Request History"
android:layout_weight="1"
android:background="#drawable/request_history_button"
android:textColor="#drawable/button_text_color"
/>
<Button
android:id="#+id/apprv_history_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Approval History"
android:layout_weight="1"
android:background="#drawable/approval_history_button"
android:textColor="#drawable/button_text_color"
/>
</LinearLayout>
</LinearLayout>
Sorry for dumping my codes here as I can't figure out any other way for you guys to understand my code.
Please help

Inside LinearLayout usually all children have even dimension according to orientation. However, when you would like one child to take a little amount of place and another to fill the rest, you might be interested in layout_weight parameter. If the child that should fill the space gets android:layout_weight="1" it will fill the space making a place for other views.
In order to see the buttons add android:layout_weight="1" to SwipeRefreshLayout and set android:layout_height="0dp". That will make your buttons visible.

Populating Listview causes the other element to partially hide

I am new to android layout and having the following problem in my app:
here's the layout for fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:layout_margin="0dp">
<ListView
android:id="#+id/listview_books_to_issue"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.87"
/>
<ImageView
android:id="#+id/imageView_empylist"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.87"
android:src="#drawable/ic_empty_flask"
android:visibility="gone"/>
<View
style="#style/Divider"/>
<Button
android:id="#+id/add_newbook_upcoming_issues"
android:layout_width="match_parent"
android:text="New"
android:paddingTop="5dp"
android:layout_height="0dp"
android:layout_weight="0.13"
android:drawableTop="#drawable/ic_add"
android:background="?android:attr/selectableItemBackground"/>
I turn the ImageView's(imageView_empylist) visibility on when the ListView(listview_books_to_issue) is empty, so far the button add_newbook_upcoming_issues looks good, but when the listview is populated even with a single item the button gets hidden partially in the bottom.
Here's the layout code for the item used to populate list.
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview_upcoming_issues_book_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:textAlignment="center"
android:gravity="center_vertical"
android:text="Title"/>
<TextView
android:id="#+id/textview_upcoming_issues_book_author"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:textAlignment="center"
android:gravity="center_vertical"
android:text="By:-Author"/>
<TextView
android:id="#+id/textview_to_issue_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:textAlignment="center"
android:gravity="center_vertical"
android:text="to be issued on"/>
<TextView
android:id="#+id/textview_upcoming_issues_book_no"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:visibility="gone"/>
</LinearLayout>
Don't know what's causing it, any help?
Thanks in advance :)
PS: I am using weights instead of height so that I can have a fixed ratio of screen for items. If in case this is causing the problem please mention the correct way of doing this.
EDIT found the solution here Limit height of ListView on Android

In your main layout fragment, please use RealativeLayout replace for LinearLayout. Your ListView will be layout_above for these views

Android layout_weight confusion (three elements, one should grow to fill the screen)

I would like to achieve the following layout:
ListView LV1 should wrap its content and stay at the top. LinearLayout LL3 should wrap its content and stay at the bottom. ListView LV2 should fill the remaining screen.
It is working fine as long as LV2 has enough entries to fill the screen. But when LV2 only contains for example two or zero elements, LL3 shifts up.
What do I need to change in order to have LV2 always fill the screen regardless of the number of elements in the ListView and have LL3 stay at the bottom?
Here's my layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ListView
android:id="#+id/LV1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_weight="0"
android:drawSelectorOnTop="true"></ListView>
<ListView
android:id="#+id/LV2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_weight="1"></ListView>
<LinearLayout
android:id="#+id/LL3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<Button
android:id="#+id/button_cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/Button_Cancel"
/>
<Button
android:id="#+id/button_save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/Button_Save"
/>
</LinearLayout>
</LinearLayout>

Since you can't tell your LL3 to fix itself at the bottom, you should change the wrapping LinearLayout to a RelativeLayout:
//pseudo code:
<RelativeLayout>
<LV1
android:alignParentTop="true"/>
<LV2
android:layout_below="#+id/lv1"
android:layout_above="#+id/ll3"/>
<LL3
android:alignParentBottom="true"/>
</RelativeLayout>

Better approach is to use RelativeLayout instead of LinearLayout. But you can also achieve this with LinearLayout. Please see the sample code below:
<?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:weightSum="1">
<LinearLayout
android:id="#+id/LL1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#android:color/highlighted_text_dark"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#android:color/suggestion_highlight_text"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/LL3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#android:color/perms_costs_money"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
The output of this code will be:
You can modify the weightSum and the number of childs of Parent LinearLayout as per your requirements.

Use weightSum properly, you will get it
Check this
<LinearLayout 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:orientation="vertical"
android:weightSum="11"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ListView
android:id="#+id/LV1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_weight="2"
android:drawSelectorOnTop="true" />
<View //this view is added just to separate listiview
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />
<ListView
android:id="#+id/LV2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_weight="8" />
<View //this view is added just to separate listiview
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />
<LinearLayout
android:id="#+id/LL3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button_cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/Button_Cancel" />
<Button
android:id="#+id/button_save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/Button_Save" />
</LinearLayout>
</LinearLayout>

if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.

Make View fill the gap in the middle but leaves space to its bottom siblings

Hi I am kinda stump right now. I thought this is possible in Android XML.
I wanted to make a layout like this:
The problem is the small two elements that are side by side. When I make the view#2 to match the height, I am expecting that it will also respect the space of its other sibling. I was wrong but I now understand. When I set the layout_height of view#2 into match_parent, it occupies the remaining space and the view#3 and view#4 are put into bottom-most part and are no longer visible in screen.
I want it that view#2 will expand in the middle but still make some space for view#3 and view#4 and some elements below it and not to be pushed way down below.
Here is what I am doing right now:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:fitsSystemWindows="true"
tools:context=".TaskActivity">
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp">
<EditText
android:id="#+id/edittext_task"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:textSize="32sp"
android:padding="8dp"
android:hint="#string/edittext_task_title_hint"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textinput_layout_note_title">
<EditText
android:id="#+id/edittext_todo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="1"
android:gravity="top"
android:hint="#string/edittext_task_content_hint"/>
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textinput_layout_note_description"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imagebutton_insert_note"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_content_add_black"
android:contentDescription="#string/content_description_choose_note"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/imagebutton_expand_note"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_open_in_new_black_24dp"
android:contentDescription="#string/content_description_expand_note"
style="?android:attr/borderlessButtonStyle" />
</LinearLayout>
</RelativeLayout>
I've used LinearLayout combined with layout_weight but this gets more and more slow as I have some nested views that also requires weight. I wanted this to be done relatively.
Any ideas how I can achieve this layout?
Thank you!

I wanted this to be done relatively.
RelativeLayout is not a magic bullet for performance.
Any ideas how I can achieve this layout?
Try:
<RelativeLayout
...>
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="16dp">
...
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/textinput_layout_note_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textinput_layout_note_title"
android:layout_above="#+id/whatever_this_thing_is"/>
...
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:id="#id/whatever_this_thing_is"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
...
</LinearLayout>
</RelativeLayout>
(where the ... bits are for the stuff you already have, removed to keep the listing shorter)
IOW:
Anchor the top view to the top
Anchor the bottom view to the bottom
Anchor the middle view to be below the top and above the bottom, causing it to stretch to fill the intervening space

Try this approach !, i haven't tried it in android studio, but it should do the trick.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/viewTop"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentTop="true"/>
<View
android:id="#+id/viewMiddle"
android:layout_above="#id/viewBottom"
android:layout_below="#id/viewTop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/viewBottom"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
</LinearLayout>
</RelativeLayout>