[Android][Kotlin] ViewPager Indicator 달기

 ViewPager Indicator

뷰페이저로 이동할때마다 지금이 몇번째 페이지인지 알 수 있도록 하단에 인디케이터를 달아줬다. 

 

 

 

인디케이터로 사용할 shape 만들기

/drawable 안에

shape_circle_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/gray"/>
</shape>

 

shape_circle_purple

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/purple_200"/>

</shape>

 

 

뷰페이저 밑에 인디케이터 위치시키기

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageView
            android:id="@+id/indicator0_iv_main"
            android:layout_width="10dp"
            android:layout_height="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/shape_circle_purple" />

        <ImageView
            android:id="@+id/indicator1_iv_main"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginStart="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/indicator0_iv_main"
            app:layout_constraintStart_toEndOf="@+id/indicator0_iv_main"
            app:layout_constraintTop_toTopOf="@+id/indicator0_iv_main"
            app:srcCompat="@drawable/shape_circle_gray" />

        <ImageView
            android:id="@+id/indicator2_iv_main"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginStart="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/indicator1_iv_main"
            app:layout_constraintStart_toEndOf="@+id/indicator1_iv_main"
            app:layout_constraintTop_toTopOf="@+id/indicator1_iv_main"
            app:srcCompat="@drawable/shape_circle_gray" />
    </androidx.constraintlayout.widget.ConstraintLayout>

 

 

액티비티에 코드 작성하기

MainActivity.kt

//  indicator
viewPager_main.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
    override fun onPageScrollStateChanged(p0: Int) {
    }

    override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {
    }

    override fun onPageSelected(p0: Int) {
        indicator0_iv_main.setImageDrawable(getDrawable(R.drawable.shape_circle_gray))
        indicator1_iv_main.setImageDrawable(getDrawable(R.drawable.shape_circle_gray))
        indicator2_iv_main.setImageDrawable(getDrawable(R.drawable.shape_circle_gray))

        when(p0){
            0 -> indicator0_iv_main.setImageDrawable(getDrawable(R.drawable.shape_circle_purple))
            1 -> indicator1_iv_main.setImageDrawable(getDrawable(R.drawable.shape_circle_purple))
            2 -> indicator2_iv_main.setImageDrawable(getDrawable(R.drawable.shape_circle_purple))
            }
        }
})

 

 

 

뷰페이저 코드

yuuj.tistory.com/180

[Android][Kotlin] ViewPager로 프래그먼트간의 슬라이드하기

 

버튼 클릭으로 화면 넘기는법

yuuj.tistory.com/39

[Android][Kotlin] 버튼 클릭으로 ViewPager 페이지 넘기기