RecyclerView fill empty space inside LinearLayout - android

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.

Related

How do I make my recyclerview taking all wrap_content, when its available, but shrink down, if not?

I am sitting a long time to get my layout working. There should be an EditText on top. A RecyclerView after that. An ImageButton after that. At the bottom of the activity should be a Button. This looks fine. There is a Space between the ImageButton and Button which has height=0dp and weight=1. Rest has height=wrap_content.
When I open up the keyboard, the RecyclerView keeps being full-sized. This doesnt look fine. I want it to make space to let the Buttons fit on the screen. It should be like that
I tried to make the RecyclerView height=0dp too, but then the Space doesnt work as it should. Their height would depend on each other weight. When I remove the Space and try to get the Button to the bottom while Recyclerview has height=0dp, it would fill the entire free space, so the ImageButton would stick to the Button instead of to the end of the list.
If I would put the ImageButton as the last element of the RecyclerView, it wouldnt be always on the screen when the List is too long.
Layout-XML-only solution would be appreciated.
#edit: My layout breaks completely when I add more items. This should be fixed with the same approach.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.edit.EditActivity">
<EditText
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:hint="#string/enter_name"
android:inputType="text|textAutoComplete|textAutoCorrect|textShortMessage"
android:maxLength="25" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:scrollbars="vertical"
app:layoutManager="android.support.v7.widget.LinearLayoutManager">
</android.support.v7.widget.RecyclerView>
<ImageButton
android:id="#+id/bt_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="8dp"
android:background="#null"
app:srcCompat="#drawable/twotone_add_circle_24" />
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/bt_save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="save" />
</LinearLayout>
you can give weight to recyclerview
like this:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:hint="enter name"
android:inputType="text|textAutoComplete|textAutoCorrect|textShortMessage"
android:maxLength="25" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="8dp"
android:layout_weight="1"
android:scrollbars="vertical"
app:layoutManager="android.support.v7.widget.LinearLayoutManager">
</android.support.v7.widget.RecyclerView>
<ImageButton
android:id="#+id/bt_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="8dp"
android:background="#null"
app:srcCompat="#drawable/ic_delete" />
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/bt_save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="save" />
</LinearLayout>

android textview scrollview in layout scrollview

I set the ScrollView in my LinearLayout. I want a TextView to scroll. I tried to use ScrollView in xml like this. But, it's not working.
<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:orientation="vertical"
android:padding="8dp"
tools:context=".SubpagesLayout.ReportResult">
<!-- first scrollView -->
<ScrollView
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_corner_blue"
android:gravity="center"
android:text="#string/personalInformation"
android:textColor="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/birthDate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" TestData" />
</LinearLayout>
<!-- second scrollView -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textOphthalmoscopy"
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="standard instrth various settings that allow focusing and adjustment of the light source to accommodate the viewer and to evaluate various features of the fundus." />
</ScrollView>
</LinearLayout>
</ScrollView>
</LinearLayout>
I tried another way like this, but it's still not working too.
android:maxLines = "AN_INTEGER"
android:scrollbars = "vertical"
I used
myTextView.setMovementMethod(new ScrollingMovementMethod());
So how to let TextView to scroll? If it is the second ScrollView.
You might consider using a NestedScrollView along with a ListView for showing the scrollable TextView.
The ListView will have a fixed size so that it'll not take the total height of the items inside.
So the layout may look like this.
<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:orientation="vertical"
android:padding="8dp"
tools:context=".SubpagesLayout.ReportResult">
<!-- first scrollView -->
<NestedScrollView
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_corner_blue"
android:gravity="center"
android:text="#string/personalInformation"
android:textColor="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/birthDate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" TestData" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
<!--set a fixed height-->
android:layout_height="80dp"
.. Other attributes
</ListView>
</LinearLayout>
</NestedScrollView>
</LinearLayout>
And the list item of the ListView may contain the TextView you want to scroll. Set the height of the TextView to wrap_content.
<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:orientation="vertical"
android:padding="8dp"
tools:context=".SubpagesLayout.ReportResult">
<TextView
android:id="#+id/textOphthalmoscopy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="standard instrth various settings that allow focusing and adjustment of the light source to accommodate the viewer and to evaluate various features of the fundus." />
</LinearLayout>
Now your ListView will have a single item and this will scroll with the default behaviour of list.
The whole layout will be scrolled via NestedScrollView.
Hope that helps!
Having a scrollView inside another scrollView is not a good prictice but ant a you check below links it may fix you problem.
Solution 1
Solution 2

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

framelayout edittext not expanding as expected

I have a problem in edit text its not getting expanded as I type.
I wanted it to show a maximum of 4 lines but when I click the exittext to type something, its shrinking, not even completely showing a single line.
the code used is.
<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"
tools:context=".MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Comments"
android:id="#+id/textView2"
android:layout_gravity="center_horizontal"
android:layout_weight="0.28"
android:background="#000000"
android:maxLines="1"
android:paddingEnd="20dp"
android:textColor="#ffffff" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="10">
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="11">
<ListView
android:id="#+id/list2"
android:drawSelectorOnTop="false"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:footerDividersEnabled="true">
</ListView>
</FrameLayout>
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/linearLayout">
<EditText
android:id="#+id/enter_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:layout_weight="1"
android:inputType="textMultiLine"
android:maxLines="4"
android:minLines="1"
android:textColor="#android:color/black"
/>
<Button
android:id="#+id/send_button"
android:layout_width="45dp"
android:layout_height="30dp"
android:onClick="sendMessage"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
screen shot of whats happening..
thank you..
You have two framelayouts nested in a linearlayout and they are weighted. The first nested framelayout has a weight of 11
compared to 1. So the edittext will not be able to expand beyond it's the weighted width for the framelayout.
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="10">
The nested frames.
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="11">
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
The total parent layout has been broken in 12 parts. The top frame has 11, the bottom 1. 1 is not much. There is not enough room to display all the text, plus you have a vertical scrollbar. The text will be added and be scrolling as you type. It would be impossible to read as it scrolls in such a short space.
I would even suggest not setting the weight for the bottom frame (it defaults to 0) and then try setting the top one to say 3? and increase it to see what works for you. Please try this, before commenting again.

RelativeLayout doesn't obey parent size (with layout_weight)

I haven't been able to find a similar problem to the one I'm having on StackOverflow - basically, I have a simple XML layout with a vertical LinerLayout which uses layout_weight to make a 10/50/40 split, which is what I want (as seen below):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".1"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:orientation="vertical"
android:background="#color/green">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<ImageView
android:id="#+id/preview_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/level_preview_back"
android:focusable="false" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".4"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
</LinearLayout>
BUT - I want the HorizontalScrollView and the ImageView to be overlayed (i.e. take up the exact same space on on top of the other), so I insert a RelativeLayout as such:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".1"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:orientation="vertical"
android:background="#color/green">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<ImageView
android:id="#+id/preview_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/level_preview_back"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".4"
android:text="#string/title"
android:textColor="#color/black"
android:textStyle="bold" />
</LinearLayout>
But when I do this, the layout_weight (10/50/40 split) breaks and suddently the LinearLayout that now contains the RelativeLayout takes up virtually all the screen in the previews.
Anyone experienced this problem or know a good workaround? I've also tried replacing the LinearLayout with the RelativeLayout directly and I have the same problem.
EDIT: Looking further into this issue, there seems to be more to it. As I commented below, I was able to get around the problem by wrapping LinearLayouts around the TextViews, though I'm not sure why that worked. Updating my SDK and plugin didn't help (though I did need to do it....)
Moving further along with my task, I hit a second problem - I was implementing a second version of the overlapped ScrollView & ImageView (which were done with a FrameLayout as suggested by Karsten) but the layout_weight problems began anew.
Testing various arrangements, it seems that the issue is very much related to the image I'm using, which is quite large in resolution. Replacing them with a smaller image corrects the issues - it looks like using large images in either ImageViews or as backgrounds to LinearLayouts tends to ruin the layouts for the entire screen.
EDIT #2: I've actually loaded the XML on to two different devices and it renders exactly as it should.... This seems to be a bug with the Eclipse XML layout viewer?
(Please excuse the poor XML formatting - the Eclipse Android xml editor is frustrating in that regard...)
The XML you've posted works fine for me in the Eclipse preview. Are you running the latest version of the Android plugin?
Note that you can replace the middle LinearLayout and RelativeLayout with a single FrameLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".1"
android:text="string/title"
android:textStyle="bold" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:background="#00ff00" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</HorizontalScrollView>
<ImageView
android:id="#+id/preview_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:focusable="false" />
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=".4"
android:text="string/title2"
android:textStyle="bold" />
</LinearLayout>

Categories

Resources