Android - ScrollView Issue - android

I'm having some trouble with how scrollviews handle content being added to them. Here are two screenshots of my app, once where I add an expandlistview to a scrollview which is nested inside a LinearLayout, and then another where I remove the scrollview. YOu'll notice that when there is no scrollview the content height is maintained. How can I achieve this with a scrollview?
This has the scrollview
This doesn't have the scrollview
Here is my layout for the activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/edit_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F3F3F3"
android:orientation="vertical"
android:paddingTop="25dip">
<ScrollView
android:id="#+id/scrollView"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/gridViewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:background="#61BF1A"
android:gravity="center_vertical"
android:padding="10dip">
<TextView
android:id="#+id/store"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:layout_alignParentTop="false"
android:layout_centerVertical="true"
android:layout_marginRight="2dp"
android:gravity="center_vertical"
android:text="#string/store"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/store_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="false"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/store"
android:layout_toRightOf="#+id/store"
android:ems="8"
android:gravity="center_vertical"
android:text="Freshii Woodbridge"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/change_store_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:ems="4"
android:gravity="center_vertical"
android:lines="2"
android:minLines="2"
android:text="#string/change_store"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
I dynamically appended ExpandedListViews to the "gridViewLayout" Linear Layout. Any ideas why the scenario with the scrollview happens and how I can fix it?
---- ExpandlistView Layout ----
<ExpandableListView
android:background="#FFFFFF"
android:id="#+id/gridView2"
android:groupIndicator="#null"
android:listSelector="#android:color/transparent"
android:cacheColorHint="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="fill_parent" />

If I get it correctly, you should change the ScrollView height to `match_parent'
<ScrollView
android:id="#+id/scrollView"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent">

Not enough information re ExpandableListView in general, but lease consider this:
Note: You cannot use the value wrap_content for the
android:layout_height attribute of a ExpandableListView in XML if the
parent's size is also not strictly specified (for example, if the
parent were ScrollView you could not specify wrap_content since it
also can be any length. However, you can use wrap_content if the
ExpandableListView parent has a specific size, such as 100 pixels.
Source: http://developer.android.com/reference/android/widget/ExpandableListView.html

Add the margin to top and bottom of your expandable listview.
<ExpandableListView
android:background="#FFFFFF"
android:id="#+id/gridView2"
android:groupIndicator="#null"
android:listSelector="#android:color/transparent"
android:cacheColorHint="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp" />
Edit :
Try android:dividerHeight="10dp" it should work.

Related

Layout not showing under listview within ScrollView

I have a layout with 1 layout inside of it which is all inside a ScrollView. I am trying to get the whole screen to scroll with the content inside of the listview then the textviews underneath that listview. I get the whole listview to populate and show correctly but the bottom layout with all the textviews do not show up.
<?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">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_below="#id/app_bar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/bannerReceiptLogo"
android:layout_width="170dp"
android:layout_height="75dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:background="#drawable/img_logo_receipt_cub" />
<TextView
android:id="#+id/bannerAddressHeader"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_below="#id/bannerReceiptLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/storeHeader"
android:textAlignment="center"
android:textSize="18sp" />
<ListView
android:id="#+id/fullEReceiptListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bannerAddressHeader"
android:layout_marginTop="10dp"
android:scrollbars="none"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/fullEReceiptListView"
android:layout_weight="1">
<View
android:id="#+id/totalDivider"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#color/colorGrey"
/>
<TextView
android:id="#+id/txtSubTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SUBTOTAL"
android:textSize="20sp"
android:layout_below="#+id/totalDivider"/>
<TextView
android:id="#+id/txtSubTotalFinal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$13.58"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/totalDivider"/>
<TextView
android:id="#+id/txtTaxText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TAX"
android:textSize="20sp"
android:layout_below="#+id/txtSubTotal"/>
<TextView
android:id="#+id/txtTaxTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.80"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/txtSubTotalFinal"/>
<TextView
android:id="#+id/txtCompleteTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TOTAL"
android:textSize="20sp"
android:layout_below="#+id/txtTaxText"/>
<TextView
android:id="#+id/txtCompleteTotalNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$14.38"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/txtTaxText"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Do not put ListView inside ScrollView. ListView is a widget that is already scrollable. See NestedScrollView from Support library.
If you set the ListView height to wrap_content the height will have the height to comport all items. That way, the below content will be pushed away.
However Android don't have a great support for nested scrolls, it's considered a bad practice. This way, your ListView will not have the native scroll feature, and will need some hack to work as expected.
A better workaround is use the NestedScrollView, so you scroll may work (maybe you will need put your ListView inside another parent to control the height)
change ListView's layout_height to wrap_content

Fit Scroll View to Available Space in Android

I have a problem with my ScrollView. I want to fit it inside the space available but i donĀ“t know how.
Now i have my ScrollView and my TextView before one LinearLayout:
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fillViewport="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/previousimage"
android:layout_marginTop="#dimen/margin">
<TextView
android:id="#+id/question_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margintop"
android:gravity="center_horizontal"
android:paddingBottom="#dimen/margin_five"
android:scrollbars="vertical"
android:textColor="#color/white"
android:textSize="#dimen/common_textsize" />
</ScrollView>
<LinearLayout
android:id="#+id/bottom_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/scrollView"
android:layout_marginTop="#dimen/margin_small"
android:gravity="center|bottom"
android:orientation="vertical">
The problem is that if i have so much text inside my TextView the LinearLayout go down and it hides.I want to scroll the text inside. Without push down the LinearLayout.
I want to take this space for ScrollView automatically to adapt to all screen size.
See the image Layaout
Thank you!
Define LinearLayout before your ScrollView and set ScrollView to above LinearLayout, match_parent. Like this:
<LinearLayout
android:id="#+id/bottom_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="#dimen/margin_small"
android:gravity="center|bottom"
android:orientation="vertical">
...
</LinearLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/previousimage"
android:layout_above="#+id/bottom_options"
android:layout_marginTop="#dimen/margin">
<TextView
android:id="#+id/question_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margintop"
android:gravity="center_horizontal"
android:paddingBottom="#dimen/margin_five"
android:scrollbars="vertical"
android:textColor="#color/white"
android:textSize="#dimen/common_textsize" />
</ScrollView>
The ScrollView should always match_parent (or at least be smaller than the available space) otherwise it just take the same space as its children and so from its perspective, no children is out, so no need to scroll.

Show 3 scrollable ListViews of equal height in Android Layout

I am trying to show three different vertical sections in my Android layout on one screen, each taking up one third of the screen, one on the top, one in the middle, and one on the bottom. Each section has a TextView and a ListView, and the ListViews can scroll so that you can see all items, but the overall page does not move. I have tried putting each TextView and ListView in a LinearLayout and setting the height of each LinearLayout to one third the total height of the screen, but the first ListView just shows all the items in it, taking up most of the screen, and the other sections are pushed down. I also tried using layout_weights, but for some reason it did not work. (EDIT: Setting layout_weight="1" ended up working, I'm not sure what I did wrong the first time) How can I make this work, or is there a better way to go about this?
<LinearLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#FF0000"/>
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#00FF00">
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#0000FF">
</LinearLayout>
This will give you three equally wide columns: to make it rows, change the orientation to vertical and swap the values of layout_height and layout_width for each listview. If you need to add the TextViews, you'll have to make each listview in this code either a RelativeLayout LinearLayout or FrameLayout, using same width/height/weight and arranging the ListView and TextView inside to taste. To do this most efficiently, use a Framelayout and use a margin on the listview to offset it from the TextView. You can place the TextView relative to the ListView inside the FrameLayout by using the layout_gravity in the TextView.
Ie (swapping the first "column"):
<FrameLayout android:orientation="vertical" android:layout_width="0dp"
android:layout_weight="1" android:layout_height="match_parent"
android:background="#FF0000">
<TextView android:text="Column!" android:background="#3Eff0000"
android:layout_height="40dp" android:layout_width="match_parent">
<ListView android:layout_marginTop="48dp" android:layout_height="match_parent"
android:layout_width="match_parent" android:background="#8Aff0000"/>
</FrameLayout>
Use this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff89ff91">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#1"
android:id="#+id/textView"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_below="#+id/textView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffff8177">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#2"
android:id="#+id/textView2"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_below="#+id/textView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffe85d">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#3"
android:id="#+id/textView3"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView3"
android:layout_below="#+id/textView3" />
</RelativeLayout>
</LinearLayout>

positioning elements within a listview row

this is the layout used in my SimpleAdapter. the correct title is populated, the height is correctly set, but the textview appears on the top left of the row instead of the bottom left. how can i fix that?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="110dip"
android:layout_gravity="start"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:id="#+id/row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Change LinearLayout to RealativeLayout. It should workk as expected.
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
are RelativeLayout attributes.
android:layout_alignParentBottom and android:layout_alignParentLeft are used with a RelativeLayout.
With a LinearLayout you should use android:gravity on a parent view, or android:layout_gravity on a child view.
Your layout should look like the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="110dip"
android:gravity="start|bottom"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:id="#+id/row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>

ListView and ScrollView together does not work

I have ListView and ScrollView in one activity. Now, the problem is that ListView and ScollView does not work together. I have many controls in activity so I need to use ListView.
If ScrollView is there then ListView's height decreased as you can see in image.
Please help me to prevent this problem.
My Code :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp" >
<TextView
android:id="#+id/tvRQPoint"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textColor="#color/green"
android:textSize="32sp" />
<TextView
android:id="#+id/tvRQQText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/questiontext"
android:textColor="#color/blue"
android:textSize="16sp" />
<TextView
android:id="#+id/tvRQQuestion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ImageView
android:id="#+id/imgRQImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:contentDescription="#string/imgdesc" />
<ListView
android:id="#+id/lvRQOptions"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp" />
<TextView
android:id="#+id/tvRQAnswer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" />
<Button
android:id="#+id/btnRQNext"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="#string/next" >
</Button>
<Button
android:id="#+id/btnRQEndTest"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/blue_bg"
android:text="#string/endtest"
android:textColor="#color/white" >
</Button>
</LinearLayout>
</ScrollView>
Never use a ListView inside a ScrollView. ListView itself already has a built-in scroll so you should use it, as the approach you've used goes against the Android's design.
If you can't remove the ScrollView, you probably should consider simplifying your design or redesign it in another way.
One thing you can do is use only the listView and add the above elements as a header view, and the below elements as a footer view.
List view has properties:
addHeaderView(View view);
addFooterView(View view)
Which you can set before setting the list's adapter
Hi as #nKn said its not good to use ListView inside ScrollView and it also gives bad performance if worked, ListView has its own scrolling property you do not need to use scrollview in it, create seperate layout for listview and other stuff and align layouts the way u want.It worked very well for me.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical" >
<RelativeLayout
android:id="#+id/listContainingLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttonsLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
</ListView>
</RelativeLayout>
<LinearLayout
android:id="#+id/buttonsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button1" />
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:src="#drawable/button2" />
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button3" />
</LinearLayout>
I suggest to align your buttons according to priority if you want your buttons fixed on screen then above format can be used but if u want buttons to come after list then align buttonsLayout belowlistContainingLayout
Hope it helps,Cheers!...
ListView already has scrolling feature. That's why is make problem inside ScrollView. But try give hardcoded width to your ListView. May this solve problem
<ListView
android:id="#+id/lvRQOptions"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginTop="8dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp" />

Categories

Resources