In this post we are implementing an Image Slider in Android below a transparent toolbar using Kotlin.
For this example we are using Viewpager widget.
Android ViewPager introduced in API version 21 is a layout manager that allows the user to flip left and right through pages of data
Let's get Started
Step 1: Create Android Project with kotlin enabled
Step 2: Add required recourses
For this example l have downloaded few images from internet and added in the drawable folder.
Update Style.xml file
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
|
Step 3: Create slider image layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" tools:srcCompat="@tools:sample/avatars"
android:id="@+id/imageView_slide" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" android:scaleType="fitXY"/>
</androidx.constraintlayout.widget.ConstraintLayout>
|
Step 4: Create Slider Adapter class
package com.rrtutors.androidsamples.slider
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPager
import com.rrtutors.androidsamples.R
import kotlinx.android.synthetic.main.slider_layout.view.*
class SliderAdapter(val context:Context) : PagerAdapter() {
val images=arrayOf(R.drawable.corona_4,R.drawable.coronavirus_2,R.drawable.coronavirus_3)
private var inflater: LayoutInflater? = null
override fun isViewFromObject(view: View, `object`: Any): Boolean {
return view === `object`
}
override fun instantiateItem(container: ViewGroup, position: Int): Any {
inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val view = inflater!!.inflate(R.layout.slider_layout, null)
view.imageView_slide.setImageResource(images[position])
val vp = container as ViewPager
vp.addView(view, 0)
return view
}
override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
val vp = container as ViewPager
val view = `object` as View
vp.removeView(view)
}
override fun getCount(): Int {
return images?.size!!;
}
}
|
Step 5: Update Activity and its xml file with below code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewpager">
</androidx.viewpager.widget.ViewPager>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="@android:color/transparent"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</FrameLayout>
</com.google.android.material.appbar.AppBarLayout>
</LinearLayout>
|
package com.rrtutors.androidsamples.slider
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.widget.Toolbar
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.android.material.navigation.NavigationView
import com.google.android.material.snackbar.Snackbar
import com.rrtutors.androidsamples.R
import kotlinx.android.synthetic.main.activity_image_slider.*
class ImageSlider : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_image_slider)
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
imageSliderImplementation()
}
private fun imageSliderImplementation() {
val adapter = SliderAdapter(this)
viewpager.adapter = adapter
}
}
|
Step 6: Let's run application
|
Article Contributed By :
|
|
|
|
|
1317 Views |
|