HorizontallScrollView with auto-fitting pages - android

I am trying to create a HorizontalScrollView which will be exactly 3 times the screen width. I have tried the following code, but the scrollview will not scroll. How can I set it so that the 3 LinearLayouts inside the main LinearLayout are each the width of the screen?
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<!-- the container for all the pages -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FF0000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FF0000"/>
</LinearLayout>
Note that if I give the LinearLayouts a specific width, the scrollview does scroll, but I need each LinearLayout to have the width of the screen.

You will need to use wrap_content on your top LinearLayout, and set the width of the child LinearLayouts programmatically.

Related

Right way to have a scrollable bottom view

What is the right way to have a scrollable bottom view?
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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:background="#color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/wrnTextP1"
android:text="Ok , batatas "/>
<android.support.v4.widget.Space
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
<Button
style="#style/FullWidthButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Chega por hoje!" />
</LinearLayout>
at the preview its looke fine, but when I run it on the emulator the view(in this case: the button) its not at bottom at all.
I think you are misunderstanding how ScrollView is meant to be used. The LinearLayout child of your ScrollView has a match_parent height... if your ScrollView is the same height as the screen, and the LinearLayout is the same height as the ScrollView, then there's nothing to scroll (all the content is the size of the screen).
The direct child of a ScrollView should either have a fixed height (like 2000dp) or use wrap_content.
If you use a fixed height, then the rest of your code "works"; you can have a Space element that uses layout_weight to push the last view down to the bottom of your LinearLayout. However, if you're using wrap_content, this is impossible (since there's no "extra" space for the layout_weight to consume).
Instead, you could consider putting the "bottom" view outside of the ScrollView. Something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
...
</ScrollView>
<Button
style="#style/FullWidthButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chega por hoje!" />
</LinearLayout>

My scrollview doesn't work at all

I can't make a ScrollView properly scrolling. It always cut off the content on the bottom, as if it were a normal LinearLayout.
My code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context="com.android.dadiperpus.MainActivity">
I put LinearLayout inside ScrollView
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/logo_stan"
android:orientation="vertical"
android:weightSum="10">
Then I put RelativeLayout inside LinearLayout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="CONTOH BRO"
android:textSize="32sp" />
</RelativeLayout>
Here I use Gridlayout
<GridLayout
android:id="#+id/mainGrid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="14dp"
android:rowCount="3">
Then I put couple of this code inside GridLayout
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
app:cardCornerRadius="8dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/logo_stan" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pengantar Kepabeanan"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
I already tried to wrap ScrollView inside LinearLayout and it didn't change anything at all.
I put LinearLayout inside ScrollView
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/logo_stan"
android:orientation="vertical"
android:weightSum="10">
This linearlayout needs to use wrap_content for its height. By using match_parent, you're saying you want the linearlayout to only be as tall as the scrollview that's hosting it... which means it will cut off all the "scrollable" content. By using wrap_content (or some fixed height that's larger than the scrollview) you will have more content in the linearlayout than is visible on one screen, and then scrolling will work as expected.
On removing weightsum from Linear Layout, layout_weight from Relative Layout and Grid Layout , your scrollview will scroll (only in case if content is more than screen size). Give height to all these layouts ( Relative Layout and Grid Layout) wrap_content instead of 0dp.
Actually what happen in your code is : You have given Linear Layout's height match_parent (equal to screen size) and weightsum 10. And Then you give Relative Layout layout_weight = 2 and grid layout's layout_weight = 8 which means relative layout is taking 2 parts of screen and grid layout is taking 8 parts of screen. In this case, your content will never grow more than scree size and grid layout try to fit in screen due to which, your content get cut off at bottom.
Hope, It will help you.
Thanks

Android: nested linearlayouts error

I am trying to create, as a test, a row of three images (evenly spaced with a vertical orientation) in the top half of my screen. For some reason, android:layout_height="0dp" is giving me an error, saying it will make the view invisible. It is right of course, I can't see a thing. Why is that the case? I changed the weight to 1, so why isn't it expanding to take up the space available? Thanks!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/arches_utah"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/blue_sea_mountains"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/china_jungle"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
The layout_weight on an element applies to the parent of said element. Since you parent element has a horizontal orientation, you can only use layout_weight paired with layout_width. If your root LinearLayout was a vertical then you could set the layout_height to be 0dp and use layout_weight instead.
Judging by your question, it sounds like you should be setting weights and height on the three elements within the first child LinearLayout.
The weight attribute needs to be specified on the same axis as the orientation of the parent. Since your parent LinearLayout has a horizontal orientation, the weight attribute works on the width, so you need layout_height="wrap_content" and layout_width="0dp" on the child LinearLayout.
So the problem is between your 2 LinearLayouts.
You have not closed your parent Linear Layout and layout width relate weight not height...You can also use weightSum like this...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/arches_utah" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/blue_sea_mountains" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/china_jungle" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>

FrameLayout inside of ScrollView

I'm new to android development and I have the following problem.
I need to use FrameLayout inside of ScrollView for making it scrollable. I wrote this
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#00ff00">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#ff0000">
</FrameLayout>
</ScrollView>
But this doesn't work. I tried in RelativeLayout and it worked, but I need to use for FrameLayout.
Any ideas?
android:fillViewport="true" solves this issue.
android:fillViewport, Defines whether the scrollview should stretch its content to fill the viewport.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
</ScrollView>
I tried many variants for solving this problem, including answers here, but no one was helpful. ScrollView always wraps FrameLayout, but everything is normal with RelativeLayout, LinearLayout...
I have found one solution for this - to set minimum height of FrameLayout. You can set dynamically minimum height by setMinimumHeight() method.
To get FrameLayout inside ScrollView, do this:
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/linearLayoutHeader1"
android:layout_centerHorizontal="true" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="1440dp"
>
</FrameLayout>
</LinearLayout>
</ScrollView>
Your xml sample is quite good, the only thing I can see is : if the ScrollLayout parent is bigger than 500dp it won't scroll.
Indeed, the scroll is used only if the content is bigger than the scrollview.
here, you set your content height to 500dip and you scrollview to 'match_parent'
if the parent of this scrollView take the whole screen, on a 800dip height screen (for example)
=> the scroll is simply not needed.
Try setting layout_height to "wrap_content" in your FrameLayout
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000">
It will scroll when the FrameLayout will be higher than the screen border. Or if you want the fixed height of scrollable area, set height to 500dp on ScrollView. It depends what you want, but don't ever set the fixed height on a ScrollView child. The ScrollView child's height should always be wrap_content.
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#00ff00">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000">
</FrameLayout>
</ScrollView>

Undesired FrameLayout Stretch to Wrap All Children's Heights (Instead of Respecting Just One Child's Height)

Basically, I am using a popular tactic to center a background image for a LinearLayout by wrapping it in a FrameLayout and adding an ImageView that uses fill_parent before the LinearLayout. However, when I add a ScrollView in the game, everything changes.
The issues is that the image is quite large vertically and the ScrollView respects the height of both the ImageView and the LinearLayout due to the wrap_content height attribute. This causes an undesired blank space below the LinearLayout when the image is vertically larger than it.
How do I make the FrameLayout's height stretch only to the child LinearLayout's height? If possible, without mangling with its sizes programmatically on run-time/draw-time.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/cash_bg" />
<LinearLayout
android:id="#+id/main_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<!-- My main views are here -->
</LinearLayout>
</FrameLayout>
</ScrollView>
I had the same problem and gone nuts searching for an answer. I think this is an Android bug. What I have done is to include the FrameLayout into a LinearLayout to be able to force "fill_parent" on FrameLayout's height, which increases the complexity, but solves the problem. Did not find any other (better) solution.
Try this:
<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">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/cash_bg" />
<LinearLayout
android:id="#+id/main_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<!-- My main views are here -->
</LinearLayout>
</FrameLayout>
</LinearLayout>
</ScrollView>

Categories

Resources