Hiding/Showing the toolbar when fragment in the tabs is scrolled

android android-fragments webview toolbar android-tablayout
Faiyaz picture Faiyaz · Aug 18, 2015 · Viewed 36.1k times · Source

I added the new Toolbar, Tablayout and Viewpager in my android app. I provided Fragments for my 3 Tabs and its working fine. But the problem is that when i scroll up my Toolbar does not hide. I want that when i scroll my fragment it should hide. And one more thing, i am using Webview in the fragment. My codes are given below.

MainActivity.Java

public class MainActivity extends AppCompatActivity {
    TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

        setupToolbar();
        setupTablayout();
    }

private void setupToolbar() {
    // TODO Auto-generated method stub
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarsdfs);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);}
}

private void setupTablayout() {
    // TODO Auto-generated method stub
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    final PagerAdapter adapter = new PagerAdapter
            (getSupportFragmentManager(), tabLayout.getTabCount());
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}
}

main.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbarsdfs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimaryDark"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_scrollFlags="scroll|enterAlways"/>

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:scrollbars="horizontal"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary" />

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/tablayout"/>

</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

PagerAdapter.Java

public class PagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;

    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                Fragment_Feeds tab1 = new Fragment_Feeds();
                return tab1;
            case 1:
                Fragment_Facts tab2 = new Fragment_Facts();
                return tab2;
            default:
                return null;
        }
    }

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

Fragment_Feeds.java

public class Fragment_Feeds extends Fragment {
    SwipeRefreshLayout swipeView;
    WebView myWebView;
    ProgressBar progressBar;
    final static String myBlogAddr = "http://myblog.com";
    String myUrl;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragmentfeeds, container, false);
        swipeView = (SwipeRefreshLayout) view.findViewById(R.id.swipe);

        myWebView = (WebView) view.findViewById(R.id.webview);
        progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
        myWebView.setWebViewClient(new MyWebViewClient()); 
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        myWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
        myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        myWebView.setHorizontalScrollBarEnabled(false);
        myWebView.loadUrl("http://myblog.com");
        swipeView.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener()    
        {
            @Override
            public void onRefresh() 
            {
                  myWebView.loadUrl("http://myblog.com");

            }});
        return view;
    }
    private class MyWebViewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            swipeView.setRefreshing(false);
        }
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
         myUrl = url;
            view.loadUrl(url);
            return true;
        }
        @Override
        public void onReceivedError(WebView view, int errorCod,String description, String failingUrl) {
            myWebView.loadUrl("file:///android_asset/error_page.html");
        }
    }
    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.main, menu);
        super.onCreateOptionsMenu(menu, inflater);
    }
}

fragmentfeeds.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF" >
    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v4.widget.SwipeRefreshLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/swipe"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#FFFFFF">s

    <WebView
      android:id="@+id/webview"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:numColumns="1"
      android:scrollbars="none"
      android:focusableInTouchMode="false"
      android:focusable="false"
      android:background="#FFFFFF" />
   </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

What i want?

What i want is that when i scroll the webview upwards, the toolbar should also scroll upwards and hides and when i scroll back down the toolbar should come back as soon as possible.

Answer

user5218856 picture user5218856 · Aug 27, 2015

Try this.

main.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"   
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbarsdfs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:scrollbars="horizontal"
            android:layout_below="@+id/toolbarsdfs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabTextColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/white"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="3dp" />

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@+id/tablayout"/>
    </android.support.design.widget.CoordinatorLayout>

fragmentfeeds.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.NestedScrollView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:isScrollContainer="false"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="fill_vertical"
            android:clipToPadding="false"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

    <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <android.support.v4.widget.SwipeRefreshLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/swipe"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#FFFFFF">     

    <WebView
             android:id="@+id/webviewtool"
             android:layout_width="match_parent"
             android:layout_height="fill_parent"
             android:numColumns="1"
             android:focusableInTouchMode="false"
             android:focusable="false"
             android:background="#FFFFFF" />
</android.support.v4.widget.SwipeRefreshLayout>
             </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

Related questions

findViewById in Fragment

I am trying to create an ImageView in a Fragment which will refer to the ImageView element which I have created in the XML for the Fragment. However, the findViewById method only works if I extend an Activity class. Is …

Read More
Android Fragment handle back button press

I have some fragments in my activity [1], [2], [3], [4], [5], [6] And on Back Button Press I must to return from [2] to [1] if current active fragment is [2], or do nothing otherwise. What is the best practise to do that? EDIT: Application must not return …

Read More
Using context in a fragment

How can I get the context in a fragment? I need to use my database whose constructor takes in the context, but getApplicationContext() and FragmentClass.this don't work so what can I do? Database constructor public Database(Context ctx) { this.…

Read More