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.
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
}
});
Answer
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 :
- Find the scrolled center of the ScrollView.
- Scan all the elements (childrenViews) that you want to center (in that case only TextViews).
- Test each element if scrollview's center is inside element's bounds.
- Scroll (in any way you want - in that case using scrollBy) to the elements center and break the loop.