I'm trying to get an image and a list in the same 'scroll' (I don't know how else to put it). My basic (vertical) layout is:
TextView
ImageView
ListView
I'm trying to get the scrolling as if the image is a list item itself. So the textview has to stay in place at the top and everything else has to scroll under it.
At the moment I have the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/app_purple"
android:orientation="vertical" >
<TextView
android:id="#+id/about_app_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="15dp"
android:text="#string/about_app_label"
android:textColor="#color/background"
android:textSize="20dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/app_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/logo" />
</LinearLayout>
<ListView
android:id="#+id/information_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:divider="#drawable/listdivider"
android:dividerHeight="1dp"
android:fadingEdge="none" >
<!-- Preview: listitem=#layout/row -->
</ListView>
Any help would be greatly appreciated!
EDIT
The custom row layout for the listView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/listview"
android:orientation="horizontal"
android:padding="4dip" >
<ImageView
android:id="#+id/list_icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:layout_marginRight="5dp"
android:contentDescription="#string/icon_content_description" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_label"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColor="#color/result_label"
android:textStyle="bold" />
<TextView
android:id="#+id/list_count"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/list_label"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:textColor="#color/text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textColor="#color/text"
android:textColorLink="#color/app_purple" />
<ProgressBar
android:id="#+id/list_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
You would have a vertical LinearLayout holding the fixed TextView and the ListView. Your ImageView would be a header on the ListView, added via addHeaderView(). Headers, despite their name, scroll with the contents of the ListView.
to make custom list views you need to create a single_list_item.xml file to arrange everything you want to scroll for example the image with a description text next to it. Also you need to add a ListView on your Xml file so the program can process the view. And them, you can process everything on your java file using an adapter. and the the list will appear at the bottom of the text.
There is a great example of how to do it here
it's not clear what exactly are you trying to do. ScrolView can have only ONE child. so I guess you should put the ImageView and the Listview in a LinearLayout.
but any way - it's a bad idea to put a Listview inside a ScrollView - how would the OS now what are you trying to scroll? the ListItem or the whole list. if you can be more specific - I can try help more...
Related
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" />
I have a scrollView with two inside LinearLayout but it does not work, the listView does not show all items but only a few. How can I do?
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/welcomeView"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100" >
<ImageView
android:id="#+id/image_User_welcome"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="70"
android:src="#drawable/user" />
<TextView
android:id="#+id/private_area_welcome"
style="#style/CoopLabel"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="30"
android:text="#string/private_area_welcome" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/welcomeView">
<TextView
android:id="#+id/private_area_lists"
style="#style/CoopLabel"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/linearLayout1"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:text="#string/private_area_lists" />
<ListView
android:id="#+id/privareaList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:textColor="#000000" >
</ListView>
<ImageButton
android:id="#+id/logoutBtn"
android:layout_width="160dp"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:padding="0dp"
android:scaleType="centerCrop"
android:src="#drawable/tasto_logout"
/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
It is not recommended to use scrollables containing other scrollables - your layout contains ListView inside Scrollview.
You can design your layout as a ListView - you can add header and footer views(welcomeView, logoutBtn, etc..) to the top and bottom of listview - see methods ListView.addHeaderView and addFooterView) - scrolling will be managed by ListView,
or you can replace listview in your original layout with simple LinearLayout and populate it manually row by row(do not forget to assign click listeners to rows etc..) - scrolling will be managed by ScrollView.
To find more information about this problem, try to google "android listview inside scrollview", i am sure it will help you. :-)
I am using a scroll layout with a layout inflator to fill data from a database. Everything works fine then the screen opens, but when I scroll up, the items scroll past the beginning of where the margin is set at the beginning. I am doing this because I am using a static backgound image that I want to always stay in the same position. Is there a way for me to fix the scroll view?
Here is the XML for the main page.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/ScrollView01"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:background="#drawable/backimage"
>
<LinearLayout
android:id="#+id/mylayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="70dp"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
and this is the XML for each item I inflate to add to the scrollview
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android"><ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:src="#drawable/nocarpic" />
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingTop="10dp"
android:text="#+id/TextView01" >
</TextView>
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:paddingBottom="10dp"
/>
<LinearLayout
android:id="#+id/horizontalLine"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#8B0000"
android:paddingRight="2dp"
/>
</RelativeLayout>
If you mean that you want the scrolling content to clip 70dp below the top of the ScrollView, try removing the margin on the LinearLayout and instead setting android:paddingTop="70dp" on the ScrollView. ViewGroups clip child views to padding by default.
I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>
See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>
I have a ListView with a custom view rendered by an adapter. It contains an image, some text and another ListView. In the getView method of adapter I creator another adapter to set up the embedded ListView.
It all works fine, but for some reason the height of the embedded ListView is only enough to view one list item. If I manually set the height to pixels I can see more items in the list. All heights are set to wrap_content so I'm not sure why it's not working.
My first ListView looks like this:
<ListView
android:id="#+id/newswire"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:cacheColorHint="#ffffff"
/>
The item that gets rendered for this ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageView
android:id="#+id/aggSparkAvatar"
android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:paddingLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/aggSparkName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#1B5F7C"
android:textStyle="bold"
/>
<TextView
android:id="#+id/aggSparkDateStamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
/>
<View
android:layout_height="1dp"
android:layout_width="fill_parent"
android:background="#F2F2F2"
/>
<ListView
android:id="#+id/aggSparkList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cacheColorHint="#ffffff"
/>
</LinearLayout>
</LinearLayout>
Then for the embedded ListView each item looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageView
android:id="#+id/sparkAvatar"
android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:paddingLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/sparkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
/>
<TextView
android:id="#+id/sparkText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
<TextView
android:id="#+id/sparkDateStamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#A2A2A2"
/>
</LinearLayout>
</LinearLayout>
it's never a good practice to include scrollable views inside another scrollable view. you should consider redesigning your application.
in your case, the ListView you're embedding is set to wrap_content, wrap_content - also not a recommended practice. a ListView is designed to show a list of items that collectively will be too big for the screen to show at once. using wrap_content, wrap_content doesn't make much sense.