How to implement sliding navigation in Android

  • 2020-06-03 08:13:05
  • OfStack

To create a smooth user navigation experience, we have to rely on one of the most common smartphone features: touch.

Touch changing the view of an application is one of the most popular navigation designs today. In this article, we will go through the necessary steps to implement horizontal sliding navigation within an application.

This article USES the code-first approach without hesitation. Let's look at the main snippets of code that need to be completed for slide navigation.


public class MainActivity extends Activity {
 
  SectionsPagerAdapter mSectionsPagerAdapter;
  ViewPager mViewPager;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());
    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);
  }
 
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
 
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
      return true;
    }
    return super.onOptionsItemSelected(item);
  }
 
  public class SectionsPagerAdapter extends FragmentPagerAdapter {
 
    public SectionsPagerAdapter(FragmentManager fm) {
      super(fm);
    }
 
    @Override
    public Fragment getItem(int position) {
      switch (position) {
        case 0:
          return new MoviesFragment();
        case 1:
          return new TVShowsFragment();
        case 2:
          return new SongsFragment();
      }
      return null;
    }
 
    @Override
    public int getCount() {
      // Show 3 total pages.
      return 3;
    }
  }
}

Our Main Activity includes the ViewPager component, which encapsulates several different menu screens with a different fragment for each screen. The first thing we need to do is declare an FragmentPagerAdapter and use it to switch between unused menus fragment. As you can see in the code above, we declare an SectionsPagerAdapter, which inherits from the FragmentPagerAdaper class. It is then instantiated in the onCreate method.

For the SectionsPagerAdapter class, you need to override two methods. The first method is the getCount() method, which returns the number of fragment navigated. The second and most popular method, getItem(), is used to instantiate and return the associated fragment, which is displayed based on its location in the menu.

These different menus, fragment, must inherit from the fragment class, and then populate its own layout. Let's take a look at one of these:


public class MoviesFragment extends Fragment {
 
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.movies_fragment, container, false);
    return rootView;
  }
}

Putting these in 1 creates a very intuitive sliding navigation for our Android application. The Native Ads we've worked so hard to do is a great way to monetize your app without compromising the user experience. Quick integration of native, ES33en-ES34en and customizable AD units where SDK of Native Ads can be detected.


Related articles: