My Current Implementation
I have a HorizontalScrollView which I create in XML that houses a few LinearLayout children. I have added this code below.
There are two LinearLayout containers with the id's group_one and group_two and these are populated programmatically at run time.
I also fix the width of the HorizontalScrollView at run time depending on the amount of View objects I will be inserting.
This solution works great for when the children fit in the HorizontalScrollView without the need to scroll.
The Issue
As soon as I need to scroll (there are more children than can be displayed within the fixed width HorizontalScrollView) then the scrollbar will not go all the way to the right, even though I can see that the child layout is of the correct width, and I can see the scrollbar just will not go any further.
My Question
Why would there be a limit on the scrollbar moving any further right?
My Code
HorizontalScrollView XML
<!-- THIS IS WHERE THE PLUGIN BUTTONS ARE HOUSED -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"/>
</LinearLayout>
</HorizontalScrollView>
What Is Happening
This is an image of the correct scroll to the left. The edge of the scroll view starts on the right of the red bar. Notice the distance between the two.
This is an image of the incorrect scroll right. Compare the distances between the edges of the scroll view and where the scroll bar is stopping.
This is how I want it to look when I scroll at either end.
I have been playing with this for a while now and finally found the solution.
I was trying to add the left and right margins to the LinearLayout with the ID group_container. However for some reason the HorizontalScrollView was not respecting this and this is why I was seeing this issue.
Instead I added the left and right margins to the group_one and group_two LinearLayouts. Now the HorizontalScrollView respected these and it functions as I expected. Here is my modified code.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
</HorizontalScrollView>
set padding right to your scrollview like this :
android:paddingRight="20dp"
Related
Going crazy with this one here,(just to be clear: I looked at all the questions here on stackoverflow regarding "scrollview not working" and none of them helped). The following is a short version of what I'm trying to do
<ScrollView
android:id="#+id/week_View"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />.....
.............
</LinearLayout>
</ScrollView>
Textview is repeated multiple more times inside the linearLayout if that is not cleared and I want it to scroll horizontally. What I'm getting is:
You see the textView at the end getting "squeezed" and the rest of the textviews are not even displayed and scrollview doesn't go left or right. What am I doing incorrectly? (The scrollview is wrapped in a RelativeLayout).
ScrollViews are always vertical, meaning they go up and down. Use a HorizontalScrollView instead.
As you have got n number of textViews its better to use
a recyclerview with horizontal layout manager as it wont create memories of all textviews at one go
or,
you can use a horizontalScrollView to scroll them horizontally..
ScrollView scrolls vertically
Please refer to example below. I want to have the top layout (below encased in red) to be unmoving in a scrollview in my activity. I have a scrollview as the parent layout and then I thought having a relative layout for the top one would work, and align it to the top, but that didn't really work out as it still remained within the scrollview. I would like to have the users have the red-layout box remain static when they scroll down.
I figure I would also have to put in a topMargin at the top of the scrollview or something in order to fit the redbox layout in.
XML Code posted here: http://pastebin.com/bxdREbeG
Do something like this (hand code, for reference only):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/YourTopStaticView"
android:layout_width="match_parent"
android:layout_height="48dp"> //Or any other height you want
//Contents of the top view
</RelativeLyout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/YourTopStaticView">
//Contents of the ScrollView
</ScrollView>
</RelativeLayout>
As a side note, do not hardcode children into the ScrollView like that. Use the RecyclerView (which is an updated, modern replacement for ListView), which you will be expected to know how to use if you want to move into serious Android programming. It is actually super easy to use, once you get the hang of it :-)
You should use the ScrollView with only one child (official documentation - http://developer.android.com/reference/android/widget/ScrollView.html). According to your xml, your ScrollView is very complicated with a lot of child widgets.
The best option for you is to use a LinearLayout as the root for the whole container, a LinearLayout( or Relative) for the top layout containing the Reset and Save buttons, and a ListView for the long list that you have. ListView takes care of it's own scrolling. So you don't have to worry about that.
This will improve your code performance as well.
This should suit your needs:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout android:id="#+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Multi TTS Implementation"/>
<Button android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="SAVE"/>
<Button android:id="#+id/resetAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/save"
android:layout_centerVertical="true"
android:text="RESET ALL"/>
</RelativeLayout>
<ScrollView android:id="#id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/topPanel"
android:layout_alignParentBottom="true"
android:padding="5dp">
<!-- Your scrollable content here -->
</ScrollView>
</RelativeLayout>
I tried to align my linearlayout at the bottom of my entire layout which is relative, and found the solution here that does it: How to align views at the bottom of the screen?
But why wouldn't this work also?
<RelativeLayout 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"
tools:context="com.sandbox.activities.ListActivity">
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/search_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/my_listview"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/my_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Enter Search Term" />
<Button
android:id="#+id/find_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Find"
android:onClick="findThings"/>
</LinearLayout>
If the listview turns out to be short, like 1 row, "search_footer" is just underneath it, and there is a huge gap below it.
1) "search_footer" is told to align at the bottom of the parent, which is the relativelayout. Since the relativelayout's height is match_parent, and it's the root layout, this means the whole height of the screen, so why wouldn't "search_footer" be at the bottom of the screen no matter the size of the listview?
2) Also, if I change the search_footer's height to match_parent, I expected a really tall button, but it remained unchanged-why?
Add to ListView this attribute
android:layout_above="#id/search_footer"
and remove
android:layout_below="#id/my_listview"
attribute from LinearLayout.
You specified that search_footer align to bottom of parent but also to be below the listview, so in the case that the list is short the search footer just stretches in the space between the listview and the bottom of the screen. you want to specify the footer to be aligned to the bottom of the parent and the listview to be above it:
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/search_footer"
/>
<LinearLayout
android:id="#+id/search_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
When you change the height of the search_footer the buttons doe't change because they are set to android:layout_height="wrap_content". Your layout would normally change when you do this however in this case it didn't change either, due to the same reason as above
I've been struggling with this problem for awhile now. Basically, I've created a class that returns me a properly stylized GraphicalView chart; I have one class for bar charts and another for pie charts (I used renderer.setInScroll(true) BTW). I populate my Activity with a few charts and a few TextViews, but the more I add Views (any View) they are pushed off the top of the screen and there is a big empty space at the bottom of the scroll view.
My XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollingProfilePaid"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="00dp"
android:orientation="vertical">
<TextView
android:id="#+id/totalScore"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastScoresChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/totalTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<TextView
android:id="#+id/totalAverageResponseTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastTimesChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<!--...........-->
</LinearLayout>
</ScrollView>
What I've tried:
1.ScrollView->android:fillViewport="true"
2.Instead of specifying a height for the charts I set it in the java class using pastScoresChart.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, (int)(dens*350)));
3.Wrapping the ScrollView in a , using a child Relative Layout with android:alignParentTop="true" as the header, another child Relative Layout with android:alignParentBottom="true" as the footer, and changing the ScrollView to android:alignBelow="#id/header". This just made the Scrollview about 40px tall, seemingly making the problem worse.
4.Oodles of other things that I can't recall this second.
I've found a workaround of setting android:marginTop="500dp" (or a similarly large value) in the ScrollView will push the Views back down into their approximate respective positions. Unfortunately it is difficult to get it to fit exactly, and it worries me for device compatibliity. Any suggestions?
The empty space at the bottom of the ScrollView must be because of it's child (LinearLayout) attribute android:layout_gravity="center". Try to use like this:
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
OBS 1: The android:layout_marginTop="00dp" attribute is unnecessary.
OBS 2: fill_parent is deprecated starting from API Level 8 and is replaced by match_parent. So, use match_parent. More on: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
OBS 3: Here is a tip about debugging layouts: change the background color of the views to see what are the bounds of each view.
Basically I have a horizontal scroll view which, by monitoring the onTouch event I'm paging (ie:each visible part of the scroll view (page) "clicks" into the next when scrolling, rather than just having a standard ScrollView. see paged scrollviews in iOS).
Now I want to find a way to have inner children inherit the same width as the scrollview (which is set at "fill_parent").
Here is my XML to help:
<HorizontalScrollView
android:id="#+id/scrollview"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/scrollviewbg">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/content1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:src="#drawable/content2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:src="#drawable/content3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
As you can see the scrollview is set to width fill_parent and there is a LinearLayout inside it. Now at the moment there are three images which have a set width and height similar to the width of the screen, but what I want to do is change that for 3 LinearLayouts.
Each LinearLayout needs to inherit the same width as the scroll view, so that each one takes up a whole "page" when my code is applied, as it were.
How would I do this? Is it something I will have to do using code? What code will I need?
Thank you.
I know its not direct answer, but its much easier to user ViewPager from Compatibility Package for paging functionality. You can find an example in samples folder (see src/com/example/android/supportv4/app/FragmentPagerSupport.java for source code).
Try this:
android:fillViewport="true"
<HorizontalScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_gravity="right"
android:background="#drawable/black_border"
android:id="#+id/displayText"
android:layout_width="match_parent"
android:scrollHorizontally="true"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="20dp"
android:text=""
android:textSize="20sp" />
</HorizontalScrollView>
inside horizontal scroll view, i have a text view, you can try for image view
Set all the layout_height parameters as fill_parent. You should see the image in full screen then.