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.
Related
The contents of my list view get hidden behind the button as follows:
The xml file is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
/>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:text="Send"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="addItems"
>
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content"
>
</EditText>
</RelativeLayout>
</RelativeLayout>
The TextView for each row is as follows:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:layout_gravity="right"
android:gravity="right"
android:textSize="20sp"
/>
What should i do to align it properly (as in above the button)?
Also when the listView is with just one or two entries, and when the keyboard is opened to type, the whole view shifts? How do I fix that as well? Thanks in advance
Cleaned up and corected the code a bit. Perhaps this is what you were looking for. Let me know if it works. Cheers !
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" />
<EditText
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_toLeftOf="#id/Button" />
</RelativeLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/InnerRelativeLayout" />
</RelativeLayout>
adding android:layout_above="#+id/InnerRelativeLayout" to your ListView.
RelativeLayout has child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
For put your InnerRelativeLayout layout at Top add android:layout_alignParentTop="true" to your InnerRelativeLayout and remove android:layout_alignParentBottom="true"
Update: set up your Layout like below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/Beige "
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" >
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:hint="Enter text" >
</EditText>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InnerRelativeLayout"
android:drawSelectorOnTop="false" />
</RelativeLayout>
Output:
use android:layout_above="#+id/InnerRelativeLayout" in your listview
Make the outer RelativeLayout into a LinearLayout with orientation vertical. Then, for the ListView set layout_height as 0dp and layout_weight as 1. The ListView will fill up all the remaining space in the LinearLayout without overlapping other views.
Also, stop using fill_parent, it's been deprecated and you should use match_parent instead.
I have the below layout which contain mainly:
Relative layout, which act as header with Textview and button.
and Listview.
I would like to make the "header" which is the above relative layout to be transparent and show the listview as user scroll down the list view.
I know how to make the layout transparent, but I dont know how to show the listview as background for the "header".
<?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:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp"
>
<TextView
android:id="#+id/txtTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:paddingLeft="0dp"
android:text="#string/list_header"
android:textColor="#000000"
android:textSize="25sp"
android:textStyle="bold">
</TextView>
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="6px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
android:layout_alignParentRight="true"
>
</Button>
</RelativeLayout>
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/form"
android:layout_alignParentTop="true" >
</ListView>
</LinearLayout>
You are using a LinearLayout as the root container and in linear layout the views are placed one over the other so you cannot overlap one view over the other. If you want an overlapping effect you can use either the FrameLayout or the RelativeLayout as the root container.
Using RelativeLayout is a better option.
Here is sample code for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<Button
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#00cc0000"
android:layout_alignParentTop="true" />
</RelativeLayout>
Here the button is overlapping the list view.
I hope this will help :)
Try moving the ListView inside of your RelativeLayout, as the first element (this ensures that it's in the back). This way, the other views are just on top of the ListView, and if you make them transparent you should get the desired effect!
Oh, and you should make the ListView then fill the RelativeLayout:
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
</ListView>
, and make the RelativeLayout fill the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
...
I'm developing an Android application.
On one activity I have a List with list items. Those list items will have a TextView (I'm using my own layout because probably I will need to add more widgets to it).
This is ListActivity xml:
<?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" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="469dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="40dp">
</ListView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/orderErrorMsg"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16dp" >
</TextView>
</RelativeLayout>
</LinearLayout>
And this is ListItem xml:
<?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="100dp"
android:orientation="vertical">
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
</LinearLayout>
And, finally, this is the result:
Why TextView is not centered vertically?
You have "wrap_content" on the layout_height of the TextView = there is no space to center vertically on since the TextView is wrapped tightly.
Try changing the layout_height to "match_parent" or place gravity="center_vertical" attribute in the LinearLayout instead.
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
the answer is really simple: you have to add this to your TextView's XML:
android:gravity="center"
Currently you're not setting the text's position in the TextView but just the View's position.
Best wishes,
Tim
Try this way:
<TextView
android:id="#+id/orderToFillName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity= "center_vertical|center_horizontal"
android:textSize="20dp" />
or
android:gravity="center"
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'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...