Slider using ViewPager - Android Studio - Java
Create slider containing TextView & ImageView using ViewPager and Single Fragment.
Video:
Step 1: Create a new project OR Open your project
Step 2: Code
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" app:title="@string/app_name"> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
fragment_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" tools:context=".MainActivity$PlaceholderFragment"> <!-- title will set to this TextView, and change on slide right/left--> <TextView android:id="@+id/titleTv" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Title" android:textSize="20sp" android:textColor="#000" android:textStyle="bold" android:textAlignment="center"/> <!-- image will set to this ImageView, and change on slide right/left--> <ImageView android:background="@color/colorPrimary" android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="200dp" /> <!-- description will set to this TextView, and change on slide right/left--> <TextView android:id="@+id/descriptionTv" android:textColor="#000" android:text="Here can be the long/multiple lined description of the title" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
MainActivity.java
package com.blogspot.atifsoftwares.slider_viewpager_fragment; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends AppCompatActivity { /*In this video we will make slider(containing Title, Image, Description) * using single fragment layout and view pager*/ /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); //toolbar title toolbar.setTitle("Slider"); //subtitle toolbar.setSubtitle("Swipe left/right to change..."); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); mViewPager.setAdapter(mSectionsPagerAdapter); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_SECTION_NUMBER = "section_number"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given section * number. */ public static PlaceholderFragment newInstance(int sectionNumber) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_SECTION_NUMBER, sectionNumber); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); //TextViews & ImageView from fragment_main.xml TextView mTitleTv = rootView.findViewById(R.id.titleTv); TextView mDescriptionTv = rootView.findViewById(R.id.descriptionTv); ImageView mImageView = rootView.findViewById(R.id.imageView); //handle swiping if (getArguments().getInt(ARG_SECTION_NUMBER) == 1){ //set title mTitleTv.setText("Title One"); //set image mImageView.setImageResource(R.drawable.battery); //set description mDescriptionTv.setText("Description of the Title One"); } if (getArguments().getInt(ARG_SECTION_NUMBER) == 2){ //set title mTitleTv.setText("Title Two"); //set image mImageView.setImageResource(R.drawable.cpu); //set description mDescriptionTv.setText("Description of the Title Two"); } if (getArguments().getInt(ARG_SECTION_NUMBER) == 3){ //set title mTitleTv.setText("Title Three"); //set image mImageView.setImageResource(R.drawable.devid); //set description mDescriptionTv.setText("Description of the Title Three"); } if (getArguments().getInt(ARG_SECTION_NUMBER) == 4){ //set title mTitleTv.setText("Title Four"); //set image mImageView.setImageResource(R.drawable.display); //set description mDescriptionTv.setText("Description of the Title Four"); } if (getArguments().getInt(ARG_SECTION_NUMBER) == 5){ //set title mTitleTv.setText("Title Five"); //set image mImageView.setImageResource(R.drawable.memory); //set description mDescriptionTv.setText("Description of the Title Five"); } return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // getItem is called to instantiate the fragment for the given page. // Return a PlaceholderFragment (defined as a static inner class below). return PlaceholderFragment.newInstance(position + 1); } @Override public int getCount() { // Show 5 total pages.(we will show 5 pages) return 5; } } }
Step 3: Run Project
Output:
Comments
Post a Comment