Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scroll to center of child of HorizontalScrollView?

I need to scroll to the center of childView(TextView) of the HorizontalScrollView. i have get the center child by using below code,now i want to adjust arrow to the exact center of that child view.

here, what i've done is i took a HorizontalScrollView and inside it a LineaerLayout and inside the LinearLayout i have TextViews.

here's my XML:

 <com.sample.test.ScrollViewCustom
                android:id="@+id/mHorizontalScrollViewMain"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@id/relativeOne"
                android:background="@drawable/mergethree2"
                android:scrollbars="none" >

                <LinearLayout
                    android:id="@+id/llayoutfirst"
                    android:layout_width="wrap_content"
                    android:layout_height="55dip"
                    android:orientation="horizontal" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtHome"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="home"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtSchools"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="schools"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtCalendar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="calendar"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtActivitiesAndClubs"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="activitiesandclubs"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtBoosters"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="boosters"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtSchoolMenu"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="schoolmenu"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtStaff"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="staff"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtMyFavorites"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="myfavorites"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />

                    <TextView
                        android:id="@+id/mtxtAboutContact"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dip"
                        android:layout_marginLeft="5dip"
                        android:layout_marginRight="5dip"
                        android:layout_marginTop="8dip"
                        android:text="aboutcontact"
                        android:textColor="@android:color/white"
                        android:textSize="15sp"
                        android:typeface="serif" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dip"
                        android:background="@drawable/blackline" />
                </LinearLayout>
        </com.sample.test.ScrollViewCustom>

What i want is, i want the arrow exact at center of TextView which comes at Center of screen. Like Below.

enter image description here

What i get right now is..

enter image description here

i have get center of child using following code but now my requirement is to scroll to that child's center of screen.

Here's my Code:

    scroll.setOnScrollStopListner(new onScrollStopListner() {
                    @Override
                    public void onScrollStoped() {
int scrollX = scroll.getScrollX();
                    int width = lLayOne.getChildAt(1).getWidth();
                    int home = width;
                    int school = width * 2;
                    int calender = width * 3;
                    int activityNclubs = width * 4;
                    int booster = width * 5;
                    int schoolMenu = width * 6;
                    int staff = width * 7;
                    int myFav = width * 8;
                    int about = width * 9;

                    if ( scrollX > 0 && scrollX < home ) {
                        Log.d(TAG, "Home "+" scrollx "+scrollX+" home "+home);
                    }else if ( scrollX > home && scrollX < school ) {
                        Log.d(TAG, "school"+" scrollx "+scrollX+" school "+school);
                    }else if ( scrollX > school && scrollX < calender ) {
                        Log.d(TAG, "calender"+" scrollx "+scrollX+" calender "+calender);
                    }else if ( scrollX > calender && scrollX < activityNclubs ) {
                        Log.d(TAG, "activity n clubs"+" scrollx "+scrollX+" activity "+activityNclubs);
                    }else if ( scrollX > activityNclubs && scrollX < booster ) {
                        Log.d(TAG, "booster"+" scrollx "+scrollX+" booster "+booster);
                    }else if ( scrollX > booster && scrollX < schoolMenu ) {
                        Log.d(TAG, "school menu"+" scrollx "+scrollX+" school menu "+schoolMenu);
                    }else if ( scrollX > schoolMenu && scrollX < staff ) {
                        Log.d(TAG, "staff"+" scrollx "+scrollX+" staff "+staff);
                    }else if ( scrollX > staff && scrollX < myFav ) {
                        Log.d(TAG, "myFav"+" scrollx "+scrollX+" fav "+myFav);
                    }else if ( scrollX > myFav && scrollX < about ) {
                        Log.d(TAG, "about"+" scrollx "+scrollX+" about "+about);
                    }                       // TODO Auto-generated method stub

}
            });
like image 680
NaserShaikh Avatar asked Sep 14 '12 12:09

NaserShaikh


3 Answers

This worked for me :

HorizontalScrollView calendarScroller = (HorizontalScrollView)findViewById(R.id.calendarScroller);
    Handler handler=new Handler();
    Runnable mTabSelector = new Runnable() {
        public void run() {
            View tabView = dateScroller.getChildAt(selectedDateIndex);// selected child view
            final int scrollPos = tabView.getLeft() - (calendarScroller.getWidth() - tabView.getWidth()) / 2;
            calendarScroller.smoothScrollTo(scrollPos, 0);
           // mTabSelector = null;
        }
    };
    handler.postDelayed(mTabSelector, 10);
like image 146
HardCoder Avatar answered Nov 20 '22 09:11

HardCoder


First of all I can see that you use a TextView to draw a black line, you can use just a View.

So if we suppose that you created an OnScrollStopListener interface, you can use the following code to get elements center.

      scroll.setOnScrollStopListener(new OnScrollStopListener() {
        @Override
        public void onScrollStoped() {
            //get the center
            int center = scroll.getScrollX() + scroll.getWidth() / 2;
            LinearLayout linearLayout = ((LinearLayout)scroll.findViewById(R.id.llayoutfirst));
            int chilrenNum = linearLayout.getChildCount();
            for (int i = 0; i < chilrenNum; i++) {
                View v = linearLayout.getChildAt(i);
                if(v.getClass()!=TextView.class){
                    // you do no care about that view
                    continue;
                }
                int viewLeft = v.getLeft();
                int viewWidth = v.getWidth();
                if (center >= viewLeft && center <= viewLeft + viewWidth) {
                    Log.d(TAG, "CENTER THIS : " + ((viewLeft + viewWidth / 2) - center));
                    scroll.scrollBy((viewLeft + viewWidth / 2) - center, 0);
                    break;
                }
            }
        }
    });

As you can see the steps are :

  1. Find the scrolled center of the ScrollView.
  2. Scan all the elements (childrenViews) that you want to center (in that case only TextViews).
  3. Test each element if scrollview's center is inside element's bounds.
  4. Scroll (in any way you want - in that case using scrollBy) to the elements center and break the loop.
like image 13
sotcha Avatar answered Nov 20 '22 08:11

sotcha


This worked for me:

    SHVradioChannels.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            if (event.getAction() == MotionEvent.ACTION_UP) {       
                int center = SHVradioChannels.getScrollX() + SHVradioChannels.getWidth() / 2;
                LinearLayout linearLayout = ((LinearLayout)SHVradioChannels.findViewById(R.id.LLradioChannels));
                int chilrenNum = linearLayout.getChildCount();
                for (int i = 0; i < chilrenNum; i++) {
                    View v2 = linearLayout.getChildAt(i);
                    int viewLeft = v2.getLeft();
                    int viewWidth = v2.getWidth();
                    if (center >= viewLeft && center <= viewLeft + viewWidth) {
                        SHVradioChannels.scrollBy((viewLeft + viewWidth / 2) - center, 0);
                        break;
                    }
                }
            }
            return false;
        }
    });
like image 1
Golan Shay Avatar answered Nov 20 '22 08:11

Golan Shay