tommybuonomo / dotsindicator

Three material Dots Indicators for view pagers in Android !
Apache License 2.0
3.44k stars 353 forks source link

How to make all dots layout vertically? #98

Closed rockyoung closed 3 years ago

rockyoung commented 4 years ago

Nice lib! But is there any way to let dots layout vertically? cause i want to let it work with vertical viewpager2.

ichenhe commented 3 years ago

Workaround: Just rotate the indicator view! However, you need to change the layout programmatically to adapt the new orientation.

The coordinate system after rotation is a bit confused, finally I found a solution. (Actually I use TabLayout instead of this project but that shouldn't matter)

Here's my layout:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/pager_indicator_height"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="0dp"
        android:rotation="90" />
</FrameLayout>

and the fragment:

class MyFragment: Fragment() {
    private lateinit var binding: MyFragmentBinding
    // something not important....
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding.viewPager2.adapter = MyAdapter()
        TabLayoutMediator(binding.tabLayout, binding.viewPager2) { _, _ -> }.attach()

        // ATTENTION!
        binding.tabLayout.post {
            val lp = binding.tabLayout.layoutParams as FrameLayout.LayoutParams
            lp.width = binding.root.height
            lp.topMargin = lp.width / 2
            binding.tabLayout.layoutParams = lp
            binding.tabLayout.translationX = (binding.root.width - binding.tabLayout.height) / 2f -
                    resources.getDimensionPixelSize(R.dimen.pager_indicator_margin)
        }
    }
}

The indicator will become vertical and stick to the right side of the screen.