Android HorizontalScrollView snap - android

So I have a horizontalscrollview and I want to try add a snapping effect, that basically centers an element.
I have done it all in XML basically so far.
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbars="none" >
And then I have a LinearLayout inside of it.
So how do I go about making the elements inside of the LinearLayout snap? Also, is there a way to make the layout start on the middle element? So when you see the scroller, you can scroll left or right from the start.
Would appreciate any help with this! Thanks guys!

Why don't you use viewpager (http://developer.android.com/reference/android/support/v4/view/ViewPager.html)?
but if you insist to use horizontal scroll view there are some tutorial out there you can follow like this
-http://www.dev-smart.com/archives/34
-http://blog.velir.com/index.php/2010/11/17/android-snapping-horizontal-scroll/
-http://androidprogrammingmadeeasy.blogspot.com/2011/08/creating-custom-horizontal-scroll-view.html

Related

How to set an imageView to not be fixed at a position

the xml file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/singleProp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:visibility="gone">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/propertyImg"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/propertyData"
android:layout_below="#id/propertyImg">
</ListView>
</RelativeLayout>
With the above codes, the image will be fixed at top-center position. With CSS terms in html, the style of that image view is style="position:fixed" but what I want is style="position:relative".
For example,
I hope the picture can illustrate the idea.
May I know how I should modify my codes?
Let me elaborate a bit more on mark.zhai`s answer, since it's the only one that I find to be the proper approach.
First of all I wanna point out that you should think about implementing your list with a RecyclerView instead of ListView (right now it's generally favoured to use a RecyclerView; ListView is getting kinda deprecated)...
If you want to be sure that your ImageView works nicely (scroll-wise) with your list (without too much "side-work" on scroll integration), you should implement it as a first item of your list. If you stick with your ListView you can use the header function of it and add your ImageView with ListView's method addHeaderView. If you decide to move to a RecyclerView (which I think you should), you can accomplish that in a bit more difficult manner (more on that for example here).
why don't u make the imageview an item of the listview
For this you need to create a custom listview which having the first item as a image view and later having all your list items. Probably you can control this in your adapter getview method by the use of position(int)
For example if Position is equal to '0' show only image view and if position is not equal to '0' show your rest elements by using Visibility
Note: here their might be a chance of performance issues as it is loading the unnecessary views every time
To achieve this, you need to scrolling the complete layout. In general case, when you fling on a list view, only the item within the list view moves.
Check this link.
I'm not entirely sure what you're asking, as I don't know a lot about CSS, but you can check out this link which describes aligning elements within a Relative Layout.
You might want to try adding alignParentLeft or alignParentRight.
Remember margins are external to the object and padding is internal. For example to move the image 20dp from the left you would:
<ImageView
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/propertyImg"/>
Here are some useful links about mastering Relative Layouts:
Relative Layout Params
Moving Elements Around in a Relative Layout Tutorial
Another RelativeLayout Example
Margins and Padding
Why don't you use layout_below to take your layout below whatever you want, and use layout_gravity to set it's gravity. You can check these Link to get you better understand, it will help you in these problem.

How do I give a gridLayout the ability to scroll vertically and horizontally at the start of the application in android?

So imagine a view with 9 tiles that looks something like this:
(tile1) (tile2) (tile3)
(tile4) (tile5) (tile6)
(tile7) (tile8) (tile9)
One tile takes up most of the screen. I have this set up already with a horizontalscrollgroup nested inside a scrollgroup to enable both horizontal and vertical scrolling but the problem is that the view starts off with tile1 in the center of the screen. I want the view to start off with tile 5 in the center and give the user the ability to scroll up, down, left, right, and diagonally. How can I implement this?
I guess my main issue is centering the view on tile5. Also is this is a good way to implement both horizontal and vertical scrolling or is there a more proper way of doing this?
Sorry I'm a beginner with mobile ui programming.
Try this :
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
</HorizontalScrollView>
</ScrollView>

scrolling the background image in android java while adding a view to screen

I want to scroll the background in android. I have a scrollview which has many views. I need to implement a way wherein i need to scroll only the background while adding the views. I came across many forums but none of them are very clear. Please give an idea or references to implement it. To give more idea for what i am looking for is, Just consider a bike game wherein the background road image moves while riding the bike. I just need similar implementation while scrolling the screen.
Maybe you could do like this:
RelativeLayout as the parent
ScrollView with your image set as background
Then the other views, but outside of the ScrollView and inside of the RelativeLayout.
EDIT:
<RelativeLayout
android:id="#+id/relParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<OtherViews />
<ScrollView
android:id="#+id/scrlParent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/yourbackground">
</ScrollView>
</RelativeLayout>
I think that something like this might work. You see, the RelativeLayout is the parent. Then comes your other views, on the top of your ScrollView. Then, after your other views tag, comes the ScrollView, with only a background. I'm not sure if a background tag would work, so maybe you should remove the android:background="#drawable/yourbackground" and put an ImageView inside of the ScrollView.

Overscroll header/footer for ScrollView?

ListView has this nice feature where you can set an overscroll header or footer. ScrollView, unfortunately, has no such thing. Does anyone know of a way to put together something that works like a ScrollView with an overscroll header/footer?
My best guess is you might be able to accomplish this with a similar approach as pull-to-refresh for lists is implemented on Android devices: you basically stretch a view at the top of (probably actually above - same for a 'footer', but then below) the ScrollView to fake an overscroll effect.
For some ideas on this, have a look at this pull-to-refresh implementation. It dynamically adjusts the padding of a header view in the list to simulate it being overscrolled when 'pulling'.
Can't you put your ScrollView inside a RelativeLayout, which will also contain the header and footer? Something like this:
<RelativeLayout ...>
<TextView
android:id="#+id/header"
android:alignParentTop="true"/>
<ScrollView
android:id="#+id/scroller"
android:layout_below="#id/header"
android:layout_height="fill_parent"/>
<TextView
android:id="#+id/footer"
android:layout_below="#id/scroller"
android:alignParentBottom="true"/>
</RelativeLayout>
In this question ( Can we use a ScrollView inside a LinearLayout? ), someone showed how to put a ScrollView inside a LinearLayout. It should be the same.

Using layout_gravity="bottom" to place at bottom of LinearLayout

I would like to place a layout on the bottom of a LinearLayout, but I can't seem to get it to work. I know that I can use RelativeLayout to do this, but I should be able to use LinearLayout, shouldn't I?
EDIT: Actually this is more confusing than I thought. The layout below is simplified. In reality, I'm using fragments on a pre-3.0 device, with the compatibility layer.
I used Hierarchy Viewer to examine what's going on, and found that an android.support.v4.app.NoSaveStateFrameLayout was added to my layout, and that layout has layout_height set to wrap_content. That seems to be what's causing my problem, but I haven't yet figured out how to fix it.
Specifically, why doesn't this work? Shouldn't the layout_gravity place it at the bottom?
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
... stuff here ...
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
... more stuff here ...
</LinearLayout>
</LinearLayout>
BTW, changing layout_height to fill_parent or setting layout_weight don't seem to work either. I just want to better understand what is going on, because clearly I'm missing something important. Thanks.
First of all nice question.
Android behaves we can say weird in the situation like this.
if you have selected your parent linear layout's orientation horizontal then you can set its child component at bottom by setting its layoug_gravity=bottom. suppose you have added 2 text views in that horizontal linear layout and second textview's layout_gravity is bottom then it will set to bottom but it work like it is set at bottom in other column then the first text view. NOTE : you can set textview's layout_gravity = "left" or "right" when its parent linearlayout is horizontal but you cant see its result.
Oppositely, if you have selected parent linearlayout's orientation vertical then you can set its child component at left or right by using layout_gravity. but the second textview will shown in you can say next row with left or right gravity as you have set. NOTE you can set textview's layout_gravity = "top" or "bottom" when its linear layout is vertical but you can not see its result.
Try to make sample xml design as i have stated above so you get better idea.
Strange but True!!! Try to understand this behavior. :)
Just add space between what you want at the bottom and all the rest:
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
So I resolved the problem. It's a two-part solution:
First, the way to do this without using LinearLayout is to provide weight to the element above so that it takes up all of the empty space. BTW, you can see this example in the API demos: http://developer.android.com/resources/samples/ApiDemos/res/layout/linear_layout_3.html
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
... stuff here ...
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weight="1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
... more stuff here ...
</LinearLayout>
</LinearLayout>
This by itself didn't solve my problem, as I had a NoSaveStateFrameLayout with layout_width="wrap_content" as a parent view, and so I needed to get that fixed first. I'm using code based on the wonderful Google I/O App, and when I searched the code for NoSaveStateFrameLayout, I found this:
// For some reason, if we omit this, NoSaveStateFrameLayout thinks we are
// FILL_PARENT / WRAP_CONTENT, making the progress bar stick to the top of the activity.
mRootView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT));
Thanks for an awesome comment Google!!! I added this into my source and everything worked great!
The moral of the story: Hierarchy Viewer and comments are your friends.
LinearLayout will just stack things as they are placed in there. Since it is vertical, it will keep placing items one after the next in a vertical manner. Can you change the android:gravity of the linearLayout and not the layout_gravity of the nested one and see if that works.
RelativeLayout of course should be the first way but you stated you didnt want to do that. Is there reason for that?
It could be that, as per https://stackoverflow.com/a/13366783/513038, you need to set the parent LinearLayout to have android:baselineAligned="false". Worked in my case.

Categories

Resources