How to use ScrollView with one RelativeLayout and two LinearLayout? - android

I have implemented a ScrollView in which i have added a RelativeLayout. In this RelativeLayout a have added two LinearLayout. Each of this contains a TextView and a ListView. Each ListView contains over 25 items. I want to display all the items of both list views and have a single scroll for both. Now, if i add in the first ListView only 3 items and in the second 25, the first one gets no scroll and only the second gets a scroll. If i add in the first ListView 25 items and in the second 3, the first one gets a scroll and the second is not even displayed. How can i do that? Here is my code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TextView
android:text="title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/productsToBuyTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout2"
android:layout_below="#id/linearLayout1">
<TextView
android:text="title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/allProductsTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList2" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
Thanks in advance!

Try this layout
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TextView
android:text="title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/productsToBuyTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:text="title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/allProductsTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList2" />
</LinearLayout>
</LinearLayout>
</ScrollView>

I think that what would be better, not only in terms of scroll, but also considering performance, would be to have a SINGLE listview that inflates all those layouts. You would only have a single scroll to deal with and your performance would also be improved; nested listview with scrollview is not a good idea and the scroll can get tricky and, this way, your listview would only load visible cells (yay, even better performance).
So, you would define a ListView in that layout and use the adapter to inflate each of those views (the TextView and the list content, that is, the cells).
I believe that solves your problem. If you need the code, let me know, I'll update the answer

i HAVE DIVIDEN the screen into two part equally.. hope it will be scrolled now
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<TextView
android:text="title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/productsToBuyTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout2"
android:layout_below="#id/linearLayout1">
<TextView
android:text="title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/allProductsTitle" />
<com.example.alexm.shoppinglist.dlv.DragSortListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dragSortList2" />
</LinearLayout>
</LinearLayout>
</ScrollView>

Related

How to display two list view inside a scroll view

I have looked at multiple examples and I'm also aware this is not good practice, but is there anyone that could help me with this issue. My first list is displayed correctly, but my second is collapsed and has it's own scroll view. I would like to have a scroll view for the entire page rather than for the individual list views.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EtsiActivity">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="?android:attr/actionBarSize">>
<TextView
android:layout_height="20dp"
style="?android:attr/listSeparatorTextViewStyle"
android:text="ETSI ERROR COUNT"
android:id="#+id/StatusHeader"
android:textColor="#color/primary"
android:layout_marginTop="5dip"
android:layout_marginLeft="5dp" />
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/etsiStatus"
android:layout_below="#+id/StatusHeader"
android:gravity="center_horizontal">
</ListView>
<TextView
android:layout_height="20dp"
style="?android:attr/listSeparatorTextViewStyle"
android:text="TS MAP"
android:id="#+id/TSHeader"
android:textColor="#color/primary"
android:layout_marginTop="5dip"
android:layout_marginLeft="5dp"
android:layout_below="#id/etsiStatus"/>
<ListView android:id="#+id/TSList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/TSHeader"
android:gravity="center_horizontal"
/>
</LinearLayout>
</ScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation_menu"
android:background="?android:attr/windowBackground" />
</RelativeLayout>
I believe a NestedScrollView is what you want. Take a look at Android: ScrollView vs NestedScrollView

ScrollView with LinearLayout child does not wrap_content correctly

So, I have the following .xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.scopesystems.cityalert.ui.Despre"
tools:showIn="#layout/app_bar_despre"
android:background="#drawable/toolbar_incercare">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear_parent">
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2.8" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--General-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sectionHeader"
android:text="#string/general"
/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/despre_general"/>
<!--Evaluti-ne-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sectionHeader"
android:text="#string/evaluatine"
/>
<!--Confidentialitate si licente-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sectionHeader"
android:text="#string/confidentialitate"
/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/despre_politici"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
</LinearLayout>
</ScrollView>
The issue is that the last ListView is on only 1 row, and it has to be scrolled to display all the items in the list. I tried to add to the linear_parent a height of match_parent but it wont let me, it says that I should use instead wrapcontent. How can i change the layout to display the items on all the screen, not just half?
In this case, On the ScrollView use android:fillViewport="true" and for child of ScrollView android:height="wrap_content".

RecyclerView pushes checkboxes out of the screen

In an Android app using FastAdapter I am trying to display 3 checkboxes underneath a RecyclerView.
This should give the user a possibility to filter the list of games by wins, losses, draws.
However the full screen height is filled by the RecyclerView (pardon the non-english texts below):
The 3 checkboxes are only shown at the beginning, while the data is loaded via HTTP. And then they disappear as if the RecyclerView has pushed them away or overlayed them.
Below is my layout file, how could I fix my problem? I would also prefer the 3 checkboxes to be in 1 row if there is enough width (i.e. some flexible layout, which would break the line automatically):
<?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.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
<CheckBox
android:id="#+id/wonBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Wins" />
<CheckBox
android:id="#+id/lostBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Losses" />
<CheckBox
android:id="#+id/drawBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Draws" />
</LinearLayout>
UPDATE:
No luck with RelativeLayout sofar (the checkbox overlay the list):
Use a relative layout:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/llbottom"
android:scrollbars="vertical" />
<LinearLayout
android:id="#+id/llbottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<CheckBox
android:id="#+id/wonBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Wins" />
<CheckBox
android:id="#+id/lostBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Losses" />
<CheckBox
android:id="#+id/drawBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Draws" />
</LinearLayout>
EDITED:
It's not the best solution but it works.
Use android:layout_height like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:scrollbars="vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<CheckBox
android:id="#+id/wonBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Wins" />
<CheckBox
android:id="#+id/lostBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Losses" />
<CheckBox
android:id="#+id/drawBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Draws" />
</LinearLayout>
</LinearLayout>

Android: Multiple ListViews in a RelativeLaout

I am working on an app that has screen having multiple ListViews and that ListViews will contain Images by categories as (1st-Day, 2nd-Day and 3rd-Day). I have manged 3 different custom Adapters for this purpose and getting all Images from same service in a single ArrayList, just setting the adapter according date.
My problem is I need this screen to work like I want. This screen should be scrollable but in my case the listview just have some specific place on the screen instead it should expand to the bottom as of many list Items and by scrolling the second listview should be shown. I tried many solutions but didn't get what I actually want. I have also tried headers but that too not working for me the same problem of place. Below is the image how my screen looks like. As you can see the first ListView is just on a little place even it has many items and it should be expanded as of many Items but it don't.
And here is my XML Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background" >
<LinearLayout
android:id="#+id/linearlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/re3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:gravity="center"
android:text="1st-Day"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
<ListView
android:id="#+id/list1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</ListView>
<RelativeLayout
android:id="#+id/re4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent" >
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:gravity="center"
android:text="2nd-Day"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:textStyle="bold" />
</RelativeLayout>
<ListView
android:id="#+id/list2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</ListView>
</LinearLayout>
</RelativeLayout>
I have same required and for this You should use liner layout instead of ListView inside scroll view.
See This
and this
was solved my problem.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/list1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/list2"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/list3"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>

How do I rearrange my linear layout with weights?

I am currently using a linear layout structure that looks as follows:
The associated xml code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/altercolor2"
android:layout_gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<LinearLayout
android:id="#+id/columnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".53"
android:orientation="vertical">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".47"
android:orientation="vertical">
<include
android:id="#+id/second_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="top" />
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView>
However, I would like to rearrange that so that it looks like:
Is there a way I can rearrange the same with linearlayout? or do I have to use some other form of layout like relativelayout. I am pretty confused about the same. Also, would like to include the headers with the containers(the include code), is there a way I can easily achieve this?
Thanks!
After altering a code a bit, i had a little success moving the second header and second layout on top, but the first header is next to first layout instead on top, and same for third.Is there a way to fix it? I have attached the image here:
and the code is as follows:
<com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/altercolor2"
android:layout_gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:baselineAligned="true">
<LinearLayout
android:id="#+id/columnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/second_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView>
Something like this should get you close to what you want. Use the same amount of weight for the two Views to take up equal amounts of space. This is obviously pseudocode for the layout because it seems you know the properties.
<LinearLayout
android:orientation="vertical"
...>
<SecondView
width="match_parent"
height="wrap_content"
.../>
<LinearLayout
width="match_parent"
height="wrap_content"
...>
<LinearLayout
width="0dp"
height="wrap_content"
layout_weight="1"
orientation="vertical">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
</LinearLayout>
<LinearLayout
width="0dp"
height="wrap_content"
layout_weight="1"
orientation="vertical">
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
When you use weight in a horizontal LinearLayout your width should be "0dp" and in a vertical LinearLayout your height should be "0dp".
Now wrap these
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
in a vertical LinearLayout as I have above with ThirdView and FirstView. In whatever order you need them.
Use a RelativeLayout and it's really easy -
Just use Android:Layout_AlignToRightOf="#id/LeftView"
and Android:Layout_AlignBelow="#id/TopView" for the various views.
Ie: Your xmxl for your second pic should be:
<RelativeLayout
android:id="#+id/Organize"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout //or Whatever type of view you want
android:id="#+id/Second"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include.../>
</LinearLayout>
<LinearLayout //or Whatever type of view you want
android:id="#+id/First"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Second">
<include.../>
</LinearLayout>
<LinearLayout //or Whatever type of view you want
android:id="#+id/Third"
androidlayout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Second"
android:layout_ToRightOf="#id/First>
<include.../>
</LinearLayout>
</RelativeLayout>
In your first pic, and your original MXML, you have created a LinearLayout and set it to horizontal (left to right) and then put a second LinearLayout after (to the right of) it. Inside that second one, you have populated it with two items, that get distributed top to bottom. Using RelativeLayout is personal preference, but it makes controlling where you want things to appear on the screen a little more straightforward.

Categories

Resources