Android: Multiple ListViews in a RelativeLaout - android

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>

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

How to Place a Button below a ListView in a Scrollable Activity?

<?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=".list1">
<ImageView
android:id="#+id/sinb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/left"
android:padding="10dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
/>
<ListView
android:layout_below="#id/sinb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView1"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"
android:choiceMode="multipleChoice" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/listView1"
android:text="submit"/>
</RelativeLayout>
i have put these in Relative Layout..I have tried using ScrollView but it doesnt work . What i want is that a Submit button should be shown below Listview and when the list grows and goes offscreen the activity becomes scrollable and button should be shown below the end of listview.
For the behaviour you want, it will be better if you used a RecyclerView instead of a ListView and let it be inside a NestedScrollView, then enable nestedScrolling attribute on the RecyclerView. This way, you RecyclerView will behave like a long list and all views below it will only be visible after the list has been exhausted.
Check the answers in this link to see how others implemented it.
So for this you have to put your List and button inside NestedScrollView, but the Nestedscrollview has supported only a single child so firstly you have to put your List and button inside a Layout and then put the layout inside the NestedScrollView, You may refer the below code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<ImageView
android:id="#+id/sinb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:padding="10dp"
android:src="#drawable/left" />
<android.support.v4.widget.NestedScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/sinb">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
tools:listitem="#layout/item_view_note"
android:choiceMode="multipleChoice" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/listView1"
android:text="submit" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
Add ScrollView/NestedScrollView as a parent layout and add views inside scroll view (ListView and Button )
Try This Code:
<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=".list1">
<ImageView
android:id="#+id/sinb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/left"
android:padding="10dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
/>
<android.support.v4.widget.NestedScrollView
android:id="#+id/navigation_nested"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_below="#+id/sinb"
android:overScrollMode="never">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/margin_15">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView1"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"
android:choiceMode="multipleChoice" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="submit"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout >
Make the hight of listView as fixed and then put the button below it.

Issue creating a ListView menu in Xamarin/Android

I'm having trouble creating a simple menu of links in Xamarin. The desired layout is an image header, the list of links, and a button at the bottom to close the menu. I'm using a ListView to display the links.
My layout displays as desired in the Visual Studio Designer, but when run on the emulator or an actual Android device, the ListView takes up the entire screen and the header and footer aren't visible. I've tried everything I can think of, including several different layouts, and always get the same result.
My XAML is below. Help?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout1">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/topLayout">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:background="?android:attr/colorPrimary"
android:minWidth="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar1">
<ImageView
android:src="#drawable/logo1"
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="1.0dp"
android:layout_gravity="center" />
</Toolbar>
</LinearLayout>
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/android.r."
android:background="#ffffffff" />
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:background="#ffff8902"
android:minWidth="25px"
android:layout_width="match_parent"
android:layout_height="35dp"
android:id="#+id/toolbar3"
android:layout_alignParentBottom="true"
android:layout_marginTop="0.0dp">
<Button
android:text="^"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/menuCloser"
android:layout_gravity="center"
android:layout_marginLeft="0.0dp"
android:layout_marginRight="0.0dp"
android:textSize="40dp"
android:background="?android:attr/selectableItemBackground"
android:ems="1"
android:onClick="OnCloseMenu"
android:shadowColor="#android:color/transparent"
android:textColor="#ffffffff" />
</Toolbar>
</LinearLayout>
</LinearLayout>
In your list if you have more items then you have to scroll to get to the bottom to see the footer. Visual studio designer will show you the sample list with less items so that you can see header and footer. If you want footer to be placed in a fixed i.e you don't want to scroll then use relative layout.
Just replace your listview tag by
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/android.r."
android:background="#ffffffff" />
1> Issue was in your android:layout_height="0dp" it should be 0dp if you are using weight.
2> My suggestion is to use RecyclerView of android as you will face many inconsistency in ListView
3> Your code need to be cleanup as i think you are new to android
So as suggestion i just removed some unused properties,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout1">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/topLayout">
<Toolbar
android:background="?android:attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/toolbar1">
<ImageView
android:src="#drawable/ic_back"
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</Toolbar>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/android.r."
android:background="#ffffffff" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:background="#ffff8902"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar3"
>
<Button
android:text="^"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/menuCloser"
android:layout_gravity="center"
android:layout_marginLeft="0.0dp"
android:layout_marginRight="0.0dp"
android:textSize="40dp"
android:background="?android:attr/selectableItemBackground"
android:ems="1"
android:onClick="OnCloseMenu"
android:shadowColor="#android:color/transparent"
android:textColor="#ffffffff" />
</Toolbar>
</LinearLayout>
</LinearLayout>

How to use ScrollView with one RelativeLayout and two LinearLayout?

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>

TabHost inside ScrollView sets focus to content and scrolls

I have a Fragment that has contains lots of info (article) with a tabhost at a bottom with other articles as a couple of listViews. The problem is when i select tabs my scrollView scrolls to encompass the listview (actually just scroll everything so the first item of the list view is the first thing on the screen), which i do not want.
I need listViews inside ScrollView because there are a lot of information to show + additional related articles and such, and the layout is much longer than the screen. I solved the problem of listviews inside scrollview, just can't figure out how to disable
setting focus on tab click.
here is my layout:
<ScrollView
android:id="#+id/category_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="130dp"
android:src="#drawable/currency_flag_eur" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.24"
android:src="#drawable/currency_flag_eur" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:layout_weight="0.29"
android:src="#drawable/currency_flag_eur" />
</LinearLayout>
<include layout="#layout/ticker" />
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" >
<ListView
android:id="#+id/category_top_news"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ListView>
<ListView
android:id="#+id/category_most_read"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ListView>
<ListView
android:id="#+id/category_facebook"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
</ScrollView>
If anyone was wandering i solved my problem so i set my listviews inside my to
setFocusable(false)
and they stopped jerking around.

Categories

Resources