ScrollView inside ViewPager, scrolls to middle automatically

Question

I have a ViewPager that contains several instances of the same fragment, this fragment contains an article. The Article view hierarchy is quite simple, a Title, a Banner image, a subtitle and a body; everything but the title is wrapped in a scrollview.

The problem is, when you swipe to a new page, the fragment is presented with the Views at the top, and then it immediately scrolls to the middle of the container. (As a matter of fact it scrolls to the beginning of the TextView with id: article_content)

I have posted the layout at the bottom of the question.

Now, the ViewPager is set with a simple implementation of a FragmentStatePagerAdapter, here's the code:

class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {

    Bundle args;
    int count;

    public ScreenSlidePagerAdapter(FragmentManager fm) {
        super(fm);
        this.count = 8;
    }

    @Override
    public Fragment getItem(int position) {
        ArticleFragment mPrimaryFragment = new ArticleFragment();
        args = new Bundle();
        args.putString(ArticleFragment.KEY_ARTICLE_URL, mCurArticleLink);
        mPrimaryFragment.setArguments(args);
        return mPrimaryFragment;            
    }

    @Override
    public int getCount() {
        return count;
    }   
}

The Fragment itself is pretty simple too. First, I check during onCreate to see if we have the article cached, the I call on onCreateView

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.apk_article_view, null);

    mTitle = (TextView) view.findViewById(R.id.article_title);
    mBanner = (ImageView) view.findViewById(R.id.article_banner);
    mSubTitle = (TextView) view.findViewById(R.id.article_subtitle);
    mContent = (TextView) view.findViewById(R.id.article_content);

    if (isArticleCached) {
        Constants.logMessage("Article is cached, loading from database");
        setApkArticleContent();
    }
    else {
        Constants.logMessage("Article isn't cached, downloading");
        HtmlHelper.setApkArticleContent(mContext, mUrl, mTitle, mSubTitle, mContent, mBanner);
        setRefreshing(true);
    }

    return view;
}

It is worth noting that setApkArticleContent is a simple set of Texts, nothing fancy:

private void setApkArticleContent() {
    mTitle.setText(Html.fromHtml(mCursor.getString(mCursor.getColumnIndex(DbOpenHelper.TITLE))));
    mSubTitle.setText(Html.fromHtml(mCursor.getString(mCursor.getColumnIndex(DbOpenHelper.SUBTITLE))));
    mContent.setText(Html.fromHtml(mCursor.getString(mCursor.getColumnIndex(DbOpenHelper.BODY))));
    UrlImageViewHelper.setUrlDrawable(mBanner, mCursor.getString(mCursor.getColumnIndex(DbOpenHelper.BANNER)));     
}

Also, please know that I did not have a pager before, the fragment was only loaded to an empty activity, and it worked without scrolling to the middle of the scrollview.

I am really not sure what is triggering the scroll, and yes, I know I can programatically set it to scroll back to the top after loading, but then again, that'd be two scroll movements when the fragment is loaded and it would be quite noticeable for the user.

Do you guys have any ideas why it would behave like this? Any ideas on how I can stop that unintentional scroll?

Thanks,

Below is the layout for the ArticleFragment:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
    android:id="@+id/article_title"
    style="@style/headerTextBoldNoUnderline"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left|center_vertical"
    android:text="" />

<ScrollView
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    >

    <LinearLayout
        android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        >

        <ImageView
            android:id="@+id/article_banner"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp" />

        <TextView
            android:id="@+id/article_subtitle"
            style="@style/HeaderTextItalicNoUnderline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left|center_vertical" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="?android:attr/dividerVertical" />

        <TextView
            android:id="@+id/article_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:gravity="left|center_vertical"
            android:padding="8dp"
            android:textColor="?android:attr/textColorSecondary"
            android:textIsSelectable="true"
            android:textSize="16sp" />
    </LinearLayout>
</ScrollView>

</LinearLayout>

Solution 1

This is likely caused by android:textIsSelectable. You may try adding the following to the ScrollView:

android:focusable="true"
android:focusableInTouchMode="true"
android:descendantFocusability="beforeDescendants"

Solution 2

Add this attribute value android:descendantFocusability="blocksDescendants" to the child of ScrollView, according to this question: How to prevent a scrollview from scrolling to a webview after data is loaded?

Solution 3

I also had this problem. I solved it with setting android:focusable="true" and android:focusableInTouchMode="true" to the first element in the ScrollView's LinearLayout.

Solution 4

i try to add

    android:focusable="true"
    android:focusableInTouchMode="true"
    android:descendantFocusability="beforeDescendants"

in the root viewGroup . it's work's well. like below.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:descendantFocusability="beforeDescendants"
    android:background="@color/normal_bg">

    <ScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/rl_enter"
        android:scrollbars="none">
        </ScrollView>
    </RelativeLayout>

View more solutions

Comments

[Paul Burke]

Perhaps even try these on the root LinearLayout, if this doesn't work.

[daniel_c05]

Adding the lines to the LinearLayout inside the ScrollView worked well, also did removing the android:textIsSelectable.

[jackcar]

Thankss! You saved my life

[Gintas_]

Added these lines to the root LinearLayout, worked, thanks bro.

[Kuva]

This actually works. But when i click on my textView it stills scrolls me to the top of the text.