Showing posts with label Viewpager. Show all posts
Showing posts with label Viewpager. Show all posts

Friday, 14 December 2018

HB Blog 162: View-pager In Android Using Kotlin.

Hey friends, we have seen listview using Kotlin as well as combination of Jetpack Architecture with Kotlin language.

Kotlin Listview Tutorial : - HB Blog 157: Listview In Android Using Kotlin.

Jetpack Architecture : - HB Blog 161: Jetpack Architecture: - Room And Live Data In Kotlin.

In this tutorial, I will show how to create a viewpager with custom adapter in Kotlin Android Application,
Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

 //activity_main.xml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?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"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

//CustomPagerAdapter.kt
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package com.harshalbenake.kotlinviewpager.adapter

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
import com.caressa.libs.leaderboard.ui.fragments.FirstFragment
import com.caressa.libs.leaderboard.ui.fragments.SecondFragment

class CustomPagerAdapter(fragmentManager: FragmentManager) : FragmentPagerAdapter(fragmentManager) {

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 ->FirstFragment()
            else -> {
                return SecondFragment()
            }
        }
    }

    override fun getCount(): Int {
        return 2
    }

    override fun getPageTitle(position: Int): CharSequence {
        return when (position) {
            0 -> "First"
            else -> {
                return "Second"
            }
        }
    }
}

//MainActivity.kt
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.harshalbenake.kotlinviewpager

import android.os.Bundle
import android.support.v4.app.FragmentActivity
import android.view.MenuItem
import com.harshalbenake.kotlinviewpager.adapter.CustomPagerAdapter
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initLayout()
    }

    override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
        android.R.id.home -> {
            onBackPressed()
            true
        }
        else -> false
    }
    /**
     * init Layout
     */
    private fun initLayout() {
        val fragmentAdapter = CustomPagerAdapter(supportFragmentManager)
        viewpager_main.adapter = fragmentAdapter
        tablayout_main.setupWithViewPager(viewpager_main)
    }
}

No comments:
Tags: , , , , , , , , , , , , ,

Monday, 21 July 2014

HB Blog 4: View pager animation using page transformation for Android.

Viewpager:-

 Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter and FragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.

For more information regarding view pager follow below link:-
 http://developer.android.com/reference/android/support/v4/view/ViewPager.html

View pager animation for pages transition using page transformation:-

It is pretty simple,

1)Create viewpager and its pager adapter.Follow below code snippet  or refer above viewpager link.


1
2
3
4
5
//view pager instance...
final ViewPager viewPager = (ViewPager)findViewById(R.id.myViewPager);
viewPager.setAdapter(pageAdapter);
//your page adapter instance...
MyPagerAdapter pageAdapter = new MyPagerAdapter(getSupportFragmentManager()
2)Now, just attach a PageTransformer to the ViewPage.


1
2
3
4
5
6
7
viewPager.setPageTransformer(false, new PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                        // do transformation here
            }
        });
    }
3)Find out few below examples.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
//For Alpha Transformation:-

 viewPager.setPageTransformer(false, new PageTransformer() {
 @Override
            public void transformPage(View page, float position) {
                /**ALPHA TRANSFORMATION**/
                final float normalizedposition = Math.abs(Math.abs(position) - 1);
                page.setAlpha(normalizedposition);
            }
        });


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
//For Scaling Transformation:-

 viewPager.setPageTransformer(false, new PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                /**SCALING TRANSFORMATION**/
                final float normalizedposition = Math.abs(Math.abs(position) - 1);
                page.setScaleX(normalizedposition / 2 + 0.5f);
                page.setScaleY(normalizedposition / 2 + 0.5f);
            }
        });



1
2
3
4
5
6
7
8
9
//For Rotation Transformation:-

viewPager.setPageTransformer(false, new PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                /**ROATAION TRANSFORMATION**/
                page.setRotationY(position * -30);
            }
        });


4)Happy coding :)

Refer the below link for complete sample code:-
Download Sample Code
Download Apk File 
3 comments:
Tags: , , , , , ,
Subscribe to: Posts (Atom)