- First of all paste this layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SecondActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:paddingEnd="140dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout> - you can take item layout file for adapter
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
app:cardCornerRadius="20dp"
app:layout_constraintDimensionRatio="2:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<TextView
android:id="@+id/ekortext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:layout_margin="20dp"
/>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="30dp"
/>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout> - Take this constant file for slider achieve stack wala.
package com.example.shaadibyaah.util
import android.view.View
import androidx.core.view.ViewCompat
import androidx.viewpager2.widget.ViewPager2
import kotlin.math.abs
class SliderTransformer(private val offscreenPageLimit: Int) : ViewPager2.PageTransformer {
companion object {
private const val TAG = "SliderTransformer"
private const val DEFAULT_TRANSLATION_X = .0f
private const val DEFAULT_TRANSLATION_FACTOR = 1.2f
private const val SCALE_FACTOR = .14f
private const val DEFAULT_SCALE = 1f
private const val ALPHA_FACTOR = .3f
private const val DEFAULT_ALPHA = 1f
}
override fun transformPage(page: View, position: Float) {
page.apply {
ViewCompat.setElevation(page, -abs(position))
val scaleFactor = -SCALE_FACTOR * position + DEFAULT_SCALE
val alphaFactor = -ALPHA_FACTOR * position + DEFAULT_ALPHA
when {
position <= 0f -> {
translationX = DEFAULT_TRANSLATION_X
scaleX = DEFAULT_SCALE
scaleY = DEFAULT_SCALE
alpha = DEFAULT_ALPHA + position
}
position <= offscreenPageLimit - 1 -> {
scaleX = scaleFactor
scaleY = scaleFactor
translationX = -(width / DEFAULT_TRANSLATION_FACTOR) * position
alpha = alphaFactor
}
else -> {
translationX = DEFAULT_TRANSLATION_X
scaleX = DEFAULT_SCALE
scaleY = DEFAULT_SCALE
alpha = DEFAULT_ALPHA
}
}
}
}
} - i have used this data model class for provide list in adapter
data class Photo(
val url: String,
val location : String
) - Here is my adapter class
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.example.shaadibyaah.databinding.ItemPhotoBinding
import com.example.shaadibyaah.model.Photo
import com.squareup.picasso.Picasso
class PhotosAdapter(private val photoList: List<Photo>) :
RecyclerView.Adapter<PhotosAdapter.ViewHolder>() {
inner class ViewHolder(private val binding: ItemPhotoBinding) :
RecyclerView.ViewHolder(binding.root) {
// val context=binding.root.context
fun bind(photo: Photo) {
binding.text.text = photo.location
binding.ekortext.text = photo.location
Picasso.get()
.load(photo.url)
.fit().centerCrop()
.into(binding.image)
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PhotosAdapter.ViewHolder {
return ViewHolder(
ItemPhotoBinding.inflate(
LayoutInflater.from(parent.context),
parent,
false
)
)
}
override fun onBindViewHolder(holder: PhotosAdapter.ViewHolder, position: Int) {
holder.bind(photoList[position])
}
override fun getItemCount(): Int {
return photoList.size
}
} - here is my activity class
package com.example.shaadibyaah
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.shaadibyaah.adapter.PhotosAdapter
import com.example.shaadibyaah.databinding.ActivitySecondBinding
import com.example.shaadibyaah.model.Photo
import com.example.shaadibyaah.util.SliderTransformer
class SecondActivity : AppCompatActivity() {
private var _binding: ActivitySecondBinding? = null
private val binding get() = _binding!!
private val listOfImages by lazy {
listOf(Photo(
"https://images.unsplash.com/photo-1589491106922-a8e488665b2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80",
"Marina, Sidi bousaid, Tunisia"
),
Photo(
"https://images.unsplash.com/photo-1556011572-d786c300819f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80",
"Downtown, Tunis, Tunisia"
),
Photo(
"https://images.unsplash.com/photo-1540552999122-a0ac7a9a0008?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80",
"Mahdia, Tunisia"
),
Photo(
"https://images.unsplash.com/photo-1523971436722-f144a6a5dc60?ixlib=rb-1.2.1&auto=format&fit=crop&w=1295&q=80",
"Tozeur, Tunisia"
),
Photo(
"https://images.unsplash.com/photo-1556901599-6cd86f3da8b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=2533&q=80",
"Mosque Okba, kairouan, Tunisia"
),
Photo(
"https://images.unsplash.com/photo-1565689478170-6624de957899?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80",
"Avenue, Hammamet, Tunisia"
))
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
_binding = ActivitySecondBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.viewpager.apply {
adapter = PhotosAdapter(listOfImages)
offscreenPageLimit = 4
setPageTransformer(SliderTransformer(4))
}
}
override fun onDestroy() {
super.onDestroy()
_binding = null
}
} - for background style i am using this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white" />
<solid android:color="@android:color/white" />
<corners android:radius="40dp" />
</shape> - Here is the Screenshot of this output
Stack & Slide In android Studio using viewpager2
0 Comments