Android Image Slider Application Tutorial using View pager and fragments. Easy and Simple with Kotlin !!!
Kotlin is the official android development language which was introduced by google in 2017. It is lightweight and easy to program your next android application. Today I am going to describe about how we implement an image sliding application using Kotlin. Image slider is a common applied feature for most of the application and developers get confused to implement it when they are choosing the best way to do.
Here I will develop a calendar application using twelve images. It’s also a good concept for you to publish your own calendar application. Otherwise you can use the image sliding feature in your own application in your own way. Follow the steps below.
Create a new project
First you need to create a new application like following,
Here you need to create a new Tab project and click on next.
Enter the application name and select the Kotlin as the language. Then you can see the project is created successfully.
Implement the Fragment Layout
Fragment layout is your raw layout which you are loading when scrolling left and right. Therefore, Here you want to add all components which you want to load in your dynamic layout consisting with an image. I added a title, image and a description. You can customize this layout on your own way. Here is my example xml file of 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"
tools:context=".MainActivity$PlaceholderFragment">
<TextView
android:id="@+id/title_tv"
android:text="Title"
android:textAlignment="center"
android:textSize="25sp"
android:textColor="#000"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/image_view"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="300dp"/>
<TextView
android:id="@+id/description_tv"
android:text="Title"
android:textAlignment="center"
android:textSize="20sp"
android:textColor="#000"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>Implement the Main Layout
This is the place where you initially launch the application UI. Here you want to contain the ViewPager component to load the fragments.
<?xml version="1.0" encoding="utf-8"?>
<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/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"
app:title="@string/app_name"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</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>
Implement the Functionalities on Main Activity
- First you need to set the number of dynamic pages will load to view pager. As per in my case, It’s twelve for twelve months. The SectionPageAdapter inner class looks like follows :
inner class SectionsPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
override fun getItem(position: Int): Fragment {
return PlaceholderFragment.newInstance(position + 1)
}
override fun getCount(): Int {
return 12
}
}- After you need to place your drawebles/images inside the mipmapxxx folder. This case I have twelve calender views of twelve months.
- Then we need to set the view of the PlaceholderFragment. The view build on the ARG_SECTION_NUMBER value. Base on that, when control flow set the calender page view. The complete PlaceholderFragment code as below.
class PlaceholderFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val rootView = inflater.inflate(R.layout.fragment_main, container, false)
when(arguments?.getInt(ARG_SECTION_NUMBER)){
1->{
rootView.title_tv.text = "Title One"
rootView.image_view.setImageResource(R.mipmap.one)
rootView.description_tv.text = "Title One"
}
2->{
rootView.title_tv.text = "Title Two"
rootView.image_view.setImageResource(R.mipmap.two)
rootView.description_tv.text = "Title Two"
}
3->{
rootView.title_tv.text = "Title Three"
rootView.image_view.setImageResource(R.mipmap.three)
rootView.description_tv.text = "Title Three"
}
4->{
rootView.title_tv.text = "Title Four"
rootView.image_view.setImageResource(R.mipmap.four)
rootView.description_tv.text = "Title Four"
}
5->{
rootView.title_tv.text = "Title Five"
rootView.image_view.setImageResource(R.mipmap.five)
rootView.description_tv.text = "Title Five"
}
6->{
rootView.title_tv.text = "Title Six"
rootView.image_view.setImageResource(R.mipmap.six)
rootView.description_tv.text = "Title Six"
}
7->{
rootView.title_tv.text = "Title Seven"
rootView.image_view.setImageResource(R.mipmap.seven)
rootView.description_tv.text = "Title Seven"
}
8->{
rootView.title_tv.text = "Title Eight"
rootView.image_view.setImageResource(R.mipmap.eight)
rootView.description_tv.text = "Title Eight"
}
9->{
rootView.title_tv.text = "Title Nine"
rootView.image_view.setImageResource(R.mipmap.nine)
rootView.description_tv.text = "Title Nine"
}
10->{
rootView.title_tv.text = "Title Ten"
rootView.image_view.setImageResource(R.mipmap.ten)
rootView.description_tv.text = "Title Ten"
}
11->{
rootView.title_tv.text = "Title Eleven"
rootView.image_view.setImageResource(R.mipmap.eleven)
rootView.description_tv.text = "Title Eleven"
}
12->{
rootView.title_tv.text = "Title Twelve"
rootView.image_view.setImageResource(R.mipmap.twelve)
rootView.description_tv.text = "Title Twelve"
}
else->{
rootView.title_tv.text = "Title One"
rootView.image_view.setImageResource(R.mipmap.one)
rootView.description_tv.text = "Title One"
}
}
return rootView
}
companion object {
private val ARG_SECTION_NUMBER = "section_number"
fun newInstance(sectionNumber: Int): PlaceholderFragment {
val fragment = PlaceholderFragment()
val args = Bundle()
args.putInt(ARG_SECTION_NUMBER, sectionNumber)
fragment.arguments = args
return fragment
}
}
}That’s all you want to do. Run and see the output application. It will functioning as following.
Conclusion
This is the end of the android image slider with Kotlin. Please feel free to comment any question, you have faced with this story in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)
