I have this layout, and it's scaled weirdly (probably due to inadviseable layout nesting) if I do not use fillviewport=true in my HorizontalScrollView.
Everything works peachy (except for the odd scaling) when fillviewport=false, but when fillviewport=true, the scaling is perfect but no scrolling happens.
This is the layout (Note: I know you're not supposed to put a webview in a scrollview. But webview doesn't have a smoothscrollto nor expose a setscroller method, so ... bleh.)
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webContainer"
android:layout_below="#+id/titlebar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webZ"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</HorizontalScrollView>
Setting android:fillViewport="true" doesn't usually disable scrolling in a view, does it?
It's just supposed to be sure the scrollview fills the viewport regardless of the size of its contents, eh? I think the viewport is the visible area of the screen, and there is definitely more content off the edge of the visible area in the webview, I just can't scroll to it anymore.
I can see from logcat that the scrolling methods are being called, they just don't change the screen. (Unless I set fillviewport to false.)
The problem is that you use "fill_parent," which means "be as big as my parent." Use wrap_content for the width instead.
I encounter a similar problem with a standard ScrollView containing a WebView: the scrolling was not working anymore. Changing of fill_parent to wrap_content did not worked for me.
The example of Romain Guy is working fine when the expanded view is a TextView but is not when it's replaced by WebView.
What is not working:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
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">
<WebView android:id="#+id/webview"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1.0">
</WebView>
<Button
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Click">
</Button>
</LinearLayout>
</ScrollView>
When I add a small amount of data in the webview it seems ok:
But when I fill the WebView with a lot of data, it does not work as you can see below:
The button is always displayed and the scroll does not work anymore. In fact, the touch scroll does not work and the DPAD scroll works...
I did not found any reason for that but I found a workaround: it consist in adding a LinearLayout containing the WebView
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
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">
<LinearLayout android:id="#+id/linearlayout"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<WebView android:id="#+id/webview"
android:layout_width="fill_parent" android:layout_height="wrap_content">
</WebView>
</LinearLayout>
<Button
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Click">
</Button>
</LinearLayout>
</ScrollView>
Now it works fine:
Related
I am interested in creating a screen composed of a transparent header and a listview that scrolls behind the header. I have this working with one flaw; the FAST scroll bar also draws underneath header.
For some reason, the fastscrollbar doesn't seem to respect the scrollbarStyle applied to the list view. You'll notice in the image below that the normal scroll bar works fine, but the powerscroll bar is behind the transparent header.
Unfortunately the listviews I am using will often have hundreds of items, so the fastscrollbar is a necessity. Is there some way to set the "fastscrollStyle" that is not documented? I am open to any suggestions! Thank you.
Here is the layout XML for reference:
<?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">
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:fastScrollEnabled="true"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
android:paddingTop="50dp"/>
<TextView android:text="My Header"
android:gravity="center"
android:background="#8fff0000"
android:layout_width="fill_parent"
android:layout_height="50dp"/>
</RelativeLayout>
This was fixed in KitKat for ListView, however GridView still appears to exhibit this problem. Google?
The best solution is to separate your listview from the other layouts, where the main relativelayout view is the parent and other layouts are the children.
EX.
<?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">
<RelativeLayout
android:id"#+id/layoutHeader"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true">
<TextView android:text="My Header"
android:gravity="center"
android:background="#8fff0000"
android:layout_width="fill_parent"
android:layout_height="50dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="+id/layoutHeader">
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:fastScrollEnabled="true"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
android:paddingTop="50dp"/>
</RelativeLayout>
</RelativeLayout>
This bug appears to be fixed in 4.4. In older versions however, there appears to be no known workaround other than leaving padding at 0.
My Android app's main activity looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical"
android:paddingLeft="60dp"
android:paddingTop="53dp" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/billAmountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/billAmount_string"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/billAmount"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/billAmountText"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
In order to make sure the background image (defined in the first RelativeLayout) does not get squeezed when the keyboard pops up, I have set android:windowSoftInputMode="stateVisible|adjustPan in the manifest file for my activity. All good with the background and layout now, nothing gets resized.
But the problem is that my ScrollView doesn't work now because I suppose the system thinks the window doesn't need resizing due to my above modification to the manifest - so the ScrollView is not activated. The opposite happens when I take android:windowSoftInputMode="stateVisible|adjustPan out, the scrolling works, but the background gets squeezed when the keyboard pops out.
Is there any way to code it so that my background doesn't get squeezed, and my ScrollView still works? Thanks!
Try to use in your activity the property windowSoftInputMode with the following values:
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"
I don't know if it's necessary but you can try to add to your layout's ScrollView tag the fillViewPort to true.
So it should look like something I show you below:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<!-- Other Views -->
</ScrollView>
Let me know about your progress.
In your scrollview put a relative layout, child 0 is an imageview, and child 1 is your content. Use the imageview for your background image (src) rather than the background of the scrollview. The imageview will respect scaleTypes, whereas the background of a layout will not.
Works great for portrait mode. If I go on landscape mode I have my activity drawn in the center of screen which leaves blank screen on both left and right side.
If I drag by keeping mouse on views (i.e. center)the scroll takes effect.
If I drag on empty right side no scrolling ? why ?
the image
posting my layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ScrollView
android:id="#+id/enter_pin_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:id="#+id/enter_pin_header_layout"
android:layout_width="#dimen/pin_inset_region_width"
android:layout_height="#dimen/pin_inset_region_height"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal" >
<LinearLayout
Presumably, your ScrollView's width is set to wrap_content and thus, touch events outside of the dial pad are not taking any effect.
You can fix this by changing,
<ScrollView
android:layout_width="wrap_content"
... />
to,
<ScrollView
android:layout_width="match_parent"
... />
If every view is stored in the ScrollView, why not remove the RelativeLayout ? Have directly :
<ScrollView
android:id="#+id/enter_pin_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:id="#+id/enter_pin_header_layout"
android:layout_width="#dimen/pin_inset_region_width"
android:layout_height="#dimen/pin_inset_region_height"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal" >
If you want to keep it :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
Set the layout_height to fill_parent.
set your scroll view's width to fillparent not wrap content
android:layout_width="fill_parent"
I separated the interface of my app in three areas: header, content and footer.
The header has a fixed size (it has only one image), while the footer and content have sizes that can vary.
In devices with higher resolutions I thought to insert the header and footer on the screen, and reserve any free space for the content area.
In devices with low resolutions thought of putting the content length as little as possible (something like wrap_content) and insert the footer below (requiring the user to perform scroll to view the footer).
The best I got was using RelativeView:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true" >
(...)
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true" >
(...)
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:layout_below="#+id/header"
android:lay >
(...)
</FrameLayout>
</RelativeLayout>
For resolutions larger works as expected, the problem is that for small resolutions: the content is less than it should, because it takes the space between the header and footer.
How can I solve the problem?
I could not find another way to get content assuming all the free space of the screen (in large resolutions), because I can not simply use fill_parent, since the content is between the header and footer.
I also tried using min-height, but without success.
Top level RelativeLayout layout_height make that fill_parent.
Then FrameLayout remove the layout_above property, just saying it's below the header should be enough.
Finally, FrameLayout may be causing the problem as it's normally used when only 1 element is on the screen and it fills the screen. Try replacing this with a LinearLayout. I've done something exactly like what you want in one of my apps, the layout is (keep in mind in my case I swap out the FrameLayouts for Fragments which are LinearLayout or RelativeLayout based.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainBack"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent" >
<FrameLayout
android:id="#+id/headerFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/homeAdMsgFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<ListView
android:id="#+id/contactList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/homeAdMsgFrag"
android:layout_alignParentLeft="true"
android:layout_below="#id/headerFrag"
android:background="#color/transparent"
android:cacheColorHint="#color/transparent" >
</ListView>
</RelativeLayout>
Some days before I also faced this issue, to solved what I did that I created Header.xml and footer.xml and included this two xml in my all others activities xmls because this two are common in all others activities.
To meet global resolution issue, I used weightsum and weight, applying weight will fixed your header and footer area and content area too.
This way I done in my one of project to resolve this issue, just try it, hope it will works for you.
EXAMPLE
<LinearLayout
android:weightSum="10"
android:orientation="vertical"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_weight="6"
android:layout_height="0dp">
(...)
</FrameLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
</LinearLayout>
Thanks.
I am having an issue that make me crazy
I have a listview with WebView inside. So I created a custom listview.
The WebView forbid me to click so I created a webviewclicklistener.
My problem was that when I display some images, my webviews are "shaking" as if it wants to load the image a thousand times.
In fact I discovered that the height size of some elements change like every seconds, that give a feeling of shake.
The only way I found to fix it is to give a layout:height value for my listview.
My new problem is that when I put for exemple 600dip, I have a scrollbar, but I can't look at the end of my listviews.
If I put like 1000dip, I don't have scroll bar and I can't see the end of my list neither.
Here is my layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical" android:background="#drawable/woodbackground"
android:layout_weight="1">
<TextView android:background="#android:color/transparent"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:hint="Question" android:textSize="30px"></TextView>
<ScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<WebView android:id="#+id/wvplquestion" android:layout_height="wrap_content"
android:layout_width="fill_parent"></WebView>
</ScrollView>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#android:color/transparent" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_weight="1">
<TextView android:background="#android:color/transparent"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:hint="Select Answer" android:textSize="30px"></TextView>
<ListView android:id="#+id/lvquestion" android:layout_width="fill_parent"
android:layout_height="600dip" android:prompt="#string/selectp" />
</LinearLayout>
And my custom listview layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="3dip">
<WebView android:id="#+id/weblistview" android:layout_width="fill_parent"
android:layout_height="wrap_content"></WebView>
Thanks for your help
maybe you can try to change your listview layout height. Instead of wrap content, put a fixed height. I don't know if it will be working, but you can try it. I'd a problem similar to yours and I solved it like this.
I hope it will work. Good luck ;)
Seems it mostly happens when several webviews contained into one scrollview. Seems at least first webviews should have fixed height.