Scrollview vertical and horizontal in android

Question

I m really tired looking for a solution for vertical and horizontal Scrollview   I read that there are not any views layouts in the framework which implement this feature  but I need something like this   I need to define a layout within other  the child layout must implement scrolling vertical horizontal for moving   Initially implemented a code that moved the layout pixel by pixel  but I think that is not the right way  I tried it with ScrollView and Horizontal ScrollView but nothing works like I want it to  because it only implements vertical or horizontal scrolling   Canvas is not my solution because I need to attach listeners in someones child elements   What can I do

User · Answer

My solution based on Mahdi Hijazi answer, but without any custom views:

Layout:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scrollHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ScrollView 
        android:id="@+id/scrollVertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <WateverViewYouWant/>

    </ScrollView>
</HorizontalScrollView>

Code (onCreate/onCreateView):

    final HorizontalScrollView hScroll = (HorizontalScrollView) value.findViewById(R.id.scrollHorizontal);
    final ScrollView vScroll = (ScrollView) value.findViewById(R.id.scrollVertical);
    vScroll.setOnTouchListener(new View.OnTouchListener() { //inner scroll listener         
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            return false;
        }
    });
    hScroll.setOnTouchListener(new View.OnTouchListener() { //outer scroll listener         
        private float mx, my, curX, curY;
        private boolean started = false;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            curX = event.getX();
            curY = event.getY();
            int dx = (int) (mx - curX);
            int dy = (int) (my - curY);
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
                    if (started) {
                        vScroll.scrollBy(0, dy);
                        hScroll.scrollBy(dx, 0);
                    } else {
                        started = true;
                    }
                    mx = curX;
                    my = curY;
                    break;
                case MotionEvent.ACTION_UP: 
                    vScroll.scrollBy(0, dy);
                    hScroll.scrollBy(dx, 0);
                    started = false;
                    break;
            }
            return true;
        }
    });

You can change the order of the scrollviews. Just change their order in layout and in the code. And obviously instead of WateverViewYouWant you put the layout/views you want to scroll both directions.

User · Answer

Since this seems to be the first search result in Google for  Android vertical horizontal ScrollView   I thought I should add this here   Matt Clark has built a custom view based on the Android source  and it seems to work perfectly  Two Dimensional ScrollView  Beware that the class in that page has a bug calculating the view s horizonal width  A fix by Manuel Hilty is in the comments      Solution  Replace the statement on line 808 by the following   final int childWidthMeasureSpec   MeasureSpec makeMeasureSpec lp leftMargin   lp rightMargin  MeasureSpec UNSPECIFIED       Edit  The Link doesn t work anymore but here is a link to an old version of the blogpost

User · Answer

Option  1  You can come up with a new UI design that does not require simultaneous horizontal and vertical scrolling   Option  2  You can obtain the source code to ScrollView and HorizontalScrollView  learn how the core Android team implemented those  and create your own BiDirectionalScrollView implementation   Option  3  You can get rid of the dependencies that are requiring you to use the widget system and draw straight to the Canvas   Option  4  If you stumble upon an open source application that seems to implement what you seek  look to see how they did it

User · Answer

Try this   lt  xml version  1 0  encoding  utf-8   gt   lt ScrollView android id    id Sview           android layout width  wrap content           android layout height  wrap content          xmlns android  http   schemas android com apk res android  gt   lt HorizontalScrollView     android id    id hview       android layout width  wrap content       android layout height  wrap content  gt   lt ImageView           here xml code for image   lt  ImageView gt   lt  HorizontalScrollView gt   lt  ScrollView gt

User · Answer

Mixing some of the suggestions above  and was able to get a good solution   Custom ScrollView   package com scrollable view   import android content Context  import android util AttributeSet  import android view MotionEvent  import android widget ScrollView   public class VScroll extends ScrollView        public VScroll Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle              public VScroll Context context  AttributeSet attrs            super context  attrs              public VScroll Context context            super context               Override     public boolean onTouchEvent MotionEvent ev            return false            Custom HorizontalScrollView   package com scrollable view   import android content Context  import android util AttributeSet  import android view MotionEvent  import android widget HorizontalScrollView   public class HScroll extends HorizontalScrollView        public HScroll Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle              public HScroll Context context  AttributeSet attrs            super context  attrs              public HScroll Context context            super context               Override     public boolean onTouchEvent MotionEvent ev            return false            the ScrollableImageActivity   package com scrollable view   import android app Activity  import android os Bundle  import android view MotionEvent  import android widget HorizontalScrollView  import android widget ScrollView   public class ScrollableImageActivity extends Activity        private float mx  my      private float curX  curY       private ScrollView vScroll      private HorizontalScrollView hScroll        Override     public void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout main            vScroll    ScrollView  findViewById R id vScroll           hScroll    HorizontalScrollView  findViewById R id hScroll                Override     public boolean onTouchEvent MotionEvent event            float curX  curY           switch  event getAction                   case MotionEvent ACTION DOWN                  mx   event getX                    my   event getY                    break              case MotionEvent ACTION MOVE                  curX   event getX                    curY   event getY                    vScroll scrollBy  int   mx - curX    int   my - curY                    hScroll scrollBy  int   mx - curX    int   my - curY                    mx   curX                  my   curY                  break              case MotionEvent ACTION UP                  curX   event getX                    curY   event getY                    vScroll scrollBy  int   mx - curX    int   my - curY                    hScroll scrollBy  int   mx - curX    int   my - curY                    break                     return true             the layout    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android orientation  vertical  android layout width  fill parent      android layout height  fill parent  gt       lt com scrollable view VScroll android layout height  fill parent          android layout width  fill parent  android id    id vScroll  gt           lt com scrollable view HScroll android id    id hScroll              android layout width  fill parent  android layout height  fill parent  gt               lt ImageView android layout width  fill parent  android layout height  fill parent  android src   drawable bg  gt  lt  ImageView gt           lt  com scrollable view HScroll gt       lt  com scrollable view VScroll gt    lt  LinearLayout gt

User · Answer

I use it and works fine    lt  xml version  1 0  encoding  utf-8   gt   lt ScrollView android id    id ScrollView02               android layout width  wrap content               android layout height  wrap content              xmlns android  http   schemas android com apk res android  gt   lt HorizontalScrollView android id    id HorizontalScrollView01                         android layout width  wrap content                         android layout height  wrap content  gt   lt ImageView android id    id ImageView01             android src   drawable pic              android isScrollContainer  true              android layout height  fill parent              android layout width  fill parent              android adjustViewBounds  true  gt   lt  ImageView gt   lt  HorizontalScrollView gt   lt  ScrollView gt    The source link is here  Android-spa

User · Answer

since the Two Dimensional Scrollview link is dead I could not get it so I created my own component  It handles flinging and works properly for me  The only restriction is that wrap content might not work properly for that component   https   gist github com androidseb 9902093

User · Answer

I found a better solution   XML   design xml    lt  xml version  1 0  encoding  utf-8   gt   lt FrameLayout xmlns android  http   schemas android com apk res android  android layout width  fill parent  android layout height  fill parent  gt     lt FrameLayout android layout width  90px  android layout height  90px  gt       lt RelativeLayout android id    id container  android layout width  fill parent  android layout height  fill parent  gt               lt  RelativeLayout gt   lt  FrameLayout gt   lt  FrameLayout gt    Java Code   public class Example extends Activity     private RelativeLayout container    private int currentX    private int currentY     protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout design        container    RelativeLayout findViewById R id container        int top   0      int left   0       ImageView image1           RelativeLayout LayoutParams layoutParams   new RelativeLayout LayoutParams RelativeLayout LayoutParams WRAP CONTENT  RelativeLayout LayoutParams WRAP CONTENT       layoutParams setMargins left  top  0  0                      container addView image1  layoutParams        ImageView image2           left   100      RelativeLayout LayoutParams layoutParams   new RelativeLayout LayoutParams RelativeLayout LayoutParams WRAP CONTENT  RelativeLayout LayoutParams WRAP CONTENT       layoutParams setMargins left  top  0  0                      container addView image2  layoutParams        ImageView image3           left  0      top   100      RelativeLayout LayoutParams layoutParams   new RelativeLayout LayoutParams RelativeLayout LayoutParams WRAP CONTENT  RelativeLayout LayoutParams WRAP CONTENT       layoutParams setMargins left  top  0  0                      container addView image3  layoutParams        ImageView image4           left   100           RelativeLayout LayoutParams layoutParams   new RelativeLayout LayoutParams RelativeLayout LayoutParams WRAP CONTENT  RelativeLayout LayoutParams WRAP CONTENT       layoutParams setMargins left  top  0  0                      container addView image4  layoutParams                Override    public boolean onTouchEvent MotionEvent event        switch  event getAction              case MotionEvent ACTION DOWN                currentX    int  event getRawX                currentY    int  event getRawY                break                     case MotionEvent ACTION MOVE                int x2    int  event getRawX                int y2    int  event getRawY                container scrollBy currentX - x2   currentY - y2               currentX   x2              currentY   y2              break                       case MotionEvent ACTION UP                break                        return true           That s works     If you want to load other layout or control  the structure is the same

User · Answer

use this way I tried this I fixed it  Put All your XML layout inside   lt android support v4 widget NestedScrollView    I explained this in this link vertical recyclerView and Horizontal recyclerview scrolling together

User · Answer

I have a solution for your problem  You can check the ScrollView code it handles only vertical scrolling and ignores the horizontal one and modify this  I wanted  a view like a webview  so modified ScrollView and it worked well for me  But this may not suit your needs   Let me know what kind of UI you are targeting for   Regards   Ravi Pandit

User · Answer

Playing with the code  you can put an HorizontalScrollView into an ScrollView  Thereby  you can have the two scroll method in the same view   Source   http   androiddevblog blogspot com 2009 12 creating-two-dimensions-scroll-view html  I hope this could help you

[android] Scrollview vertical and horizontal in android

Layout:

Code (onCreate/onCreateView):

Examples related to android

Examples related to scrollview