How to scroll to center of child of HorizontalScrollView?

Question

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.

What i get right now is..

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

}
            });

Steric

@ Naser can you please me for the same issue ? – Gillie

@AnjaliTripathi Accepted answer worked for me. if you need anything else you can ask. – Steric

yes, The custom scrollView concept – Gillie

Answer 1

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.

Thread

Answer 2

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);

Vharat

Answer 3

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;
        }
    });

Seen