AppIntro (OnBoard) Screen - Kotlin

-

Introduction:

App Intro/Onboard screen is mainly to display the key features of our app to users while launching it, in a sweet way. Let's do that simply with TabLayout, ViewPager and its PageTransformer. 

Design:

slide_page.xml 

Desgin this layout with ViewPager and TabLayout to begin with.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/introLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tabLayout" />


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/next"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />

    <TextView
        android:id="@+id/next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="15dp"
        android:text="@string/next"
        android:textAppearance="@android:style/TextAppearance.Medium"
        android:textColor="@color/colorPrimary" />


    <TextView
        android:id="@+id/skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="15dp"
        android:text="@string/skip"
        android:textAppearance="@android:style/TextAppearance.Medium"
        android:textColor="@color/colorPrimary" />


</RelativeLayout>

intro_layout.xml 

The layout have the design that will be displayed on each page of Viewpager.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/third_layout"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/description"
        android:text="@string/title"
        android:gravity="center"
        android:layout_margin="15dp"
        android:textColor="#000000"
        android:textSize="24sp"/>

    <TextView
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/description"
        android:gravity="center"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="15dp"
        android:textSize="18sp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/title"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp">

    <ImageView
        android:id="@+id/introImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/cycling"/>

        <ImageView
            android:id="@+id/iv_bike_shadow"
            android:layout_width="80dp"
            android:layout_height="8dp"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/introImage"
            android:layout_marginTop="30dp"
            android:src="@drawable/shadow"/>
    </RelativeLayout>
</RelativeLayout>

Drawable Files:

tab_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/selected_dot" android:state_selected="true" />
    <item android:drawable="@drawable/default_dot" />
</selector>

selected_dot.xml:


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</layer-list>

default_dot.xml:


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">

            <solid android:color="@color/divider"/>
        </shape>
    </item>
</layer-list>

shadow.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/transparentBlack"/>
</shape>

Values Files:

strings.xml:

Include the following in your strings.xml file.

    <string name="next">Next</string>
    <string name="skip">Skip</string>
    <string name="continues">Continue</string>
    <string name="skip_pressed">Skip Pressed!!</string>
    <string name="description">How great is it to travel? 
      To meet new people, see new places, experience different cultures.</string>
    <string name="title">Travel World</string>

colors.xml:

Include the following in your colors.xml


<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="transparentBlack">#48000000</color>
<color name="grey">#C0C0C0</color>
<color name="white">#ffffff</color>
<color name="divider">#e6e6e6</color>

Code:

AppIntroScreen.kt

In this Activity, we have to initialize TabLayout with Viewpager. Also we have to set the adapter to the ViewPager. Here, we have extended FragmentPagerAdapter for Adapter class. Then we have to set our custom PageTransformer to the ViewPager to perform animation while scrolling the pages.

class AppIntroScreen : AppCompatActivity(), View.OnClickListener {
    
    val mResources = intArrayOf(R.drawable.cycling, R.drawable.airplane, R.drawable.kick_scooter, R.drawable.firefighter)
    lateinit var adapter: SlidingPagerAdapter
    var currentTab = 0
    var tabCount = 0
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.slide_page)

        tabCount = mResources.size
        adapter = SlidingPagerAdapter(supportFragmentManager, mResources)
        viewPager.adapter = adapter


        val pageTransformer = ParallaxTransformer()
        viewPager.setPageTransformer(true, pageTransformer)


        tabLayout.setupWithViewPager(viewPager)
        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(tab: TabLayout.Tab?) {
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                viewPager.currentItem = tab!!.position
            }

        })
        viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            override fun onPageScrollStateChanged(state: Int) {

            }

            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                currentTab = position + 1
                if (currentTab == tabCount) {
                    skip.text = getString(R.string.continues)
                } else {
                    skip.text = getString(R.string.skip)
                }
            }

            override fun onPageSelected(position: Int) {
            }

        })
        next.setOnClickListener(this)
        skip.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.next -> {
                if (currentTab == tabCount) {
                    skip.text = getString(R.string.continues)
                } else {
                    skip.text = getString(R.string.skip)
                    viewPager.currentItem = currentTab
                }
            }

            R.id.skip -> {
                Toast.makeText(this@AppIntroScreen, getString(R.string.skip_pressed), Toast.LENGTH_SHORT).show()
                // Proceed to Main/Home Activity of the App
            }
        }
    }
}

class SlidingPagerAdapter(fragmentManager: FragmentManager?, val mResources: IntArray) : FragmentPagerAdapter(fragmentManager) {

    override fun getItem(position: Int): Fragment {
        return IntroPage().newInstance(position)
    }
    
    override fun getCount(): Int {
        return mResources.size
    }
}

IntroPage.kt (Fragment)

In this Fragment class, we have to change the images, based on the position of the ViewPager's Adapter.

class IntroPage : Fragment() {

    var position = 0
    val mResources = intArrayOf(R.drawable.cycling, R.drawable.airplane, R.drawable.kick_scooter, R.drawable.firefighter)

    fun newInstance(position: Int): IntroPage {
        val fragment = IntroPage()
        val arguments = Bundle()
        arguments.putInt("POSITION", position)
        fragment.setArguments(arguments)
        return fragment
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.intro_layout, container, false);
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        val args = arguments
        position = args.getInt("POSITION")


        introImage.setImageDrawable(resources.getDrawable(mResources[position]))

    }
}

ParallaxTransformer.kt

Here, we can play with animation of our choice.


class ParallaxTransformer : ViewPager.PageTransformer {
    override fun transformPage(view: View, position: Float) {
        val absPosition = Math.abs(position)
        if (position < -1) { 
            // This page is way off-screen to the left.
            view.alpha = 1f
        } else if (position <= 1) {
            val image = view.findViewById<ImageView>(R.id.introImage)
            image?.apply {
                setScaleX(1.0f - absPosition * 2)
                setScaleY(1.0f - absPosition * 2)
                setAlpha(1.0f - absPosition * 2)
            }
            val shadow = view.findViewById<ImageView>(R.id.shadow)
            shadow?.apply {
                setScaleX(1.0f - absPosition * 2)
                setScaleY(1.0f - absPosition * 2)
                setAlpha(1.0f - absPosition * 2)
            }
        } else {
            // This page is way off-screen to the right.
            view.alpha = 1f
        }
    }
}

Run Application:

Now our Application is ready to launch . Output screen will be like,





Comments

  1. chadbrochill317January 17, 2019 3:05 pm

    I am getting an error with the View.onClickListener at the top of the class.

    ReplyDelete
    Replies
    1. Yamini BalakrishnanJanuary 17, 2019 8:51 pm

      Have you imported android.view.View?? Also kindly check whether you used OnClickListener or onClickListener..

      Delete

Post a Comment

Popular posts from this blog

SOAP Client using ksoap2 in Android - Kotlin

-
Image
Introduction: SOAP stands for Simple Object Access Protocol. It is XML-based protocol that allows programs that run on different operating systems (like Windows, Linux, etc) to communicate using HTTP and XML. Pros: Security - SOAP provides its own security known as WS Security . Platform Independent - SOAP web services can be written in any programming language and executed in any platform Cons: Slow - It uses XML format that must be parsed, to be read. It defines many standards to be followed while developing. So its slow and consumes more bandwidth and resource. WSDL dependent - It uses WSDL mechanism and doesn't have any other mechanism to discover the service. Things to know: The following are the things we have to know before we proceed further:                     URL - It is the URL of WSDL file.                     NAMESPACE - It is targetNamespace in WSDL.                                         METHOD_NAME - It is the met
Read more

Databinding in RecyclerView - Android - Kotlin

-
Image
Hey Guyss!! Already we have seen the basics of Databinding and how to use it in previous  post . Now let's see how to use Databinding in RecyclerView . And Its gonna be a short post. ;) You can find the Project in GitHub . Prerequisite: build.gradle First, we have enable dataBinding in app-level build.gradle                           android {                                     dataBinding {                                             enabled = true                                     }                            } Next, we have add the following plugin.                               apply plugin: 'kotlin-kapt'  Next, we have to include dependency for databinding, (Not needed, if using Android Studio 3.2 or above, since its already bundled)                             kapt "com.android.databinding:compiler:3.2.0-alpha10" Implementation: We can directly bind the data to RecyclerView's Adapter layout. So, let's design the
Read more

RecyclerView with different number of columns using SpanSizeLookup

-
Image
We already know how to design RecyclerView. But how to create RecyclerView with different columns depending on its row? Like below image? Yeah, we can do that, by using two different layouts with different viewType on Adapter. Another way is do some logic to do so. But, it's cumbersome. Luckily, we have another simple way to do that using SpanSizeLookUp . Let's see how to implement that in this post. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.android.support:recyclerview-v7:27.0.2' implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5' recycler.xml <?xml version= "1.0" encoding= "utf-8" ?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" xmlns:ap
Read more

Using Camera in Android - Kotlin

-
Image
Nowadays, most of our Android app require access to Camera to capture picture or Video. We can do that in two ways.                                 (i) Using built-in Camera,                                 (ii) Using custom Camera. Using Built-in Camera In this post, Let's see how to use the built-in camera to capture images and save it. Its a simple way to capture pics. We can use the mobile's built-in camera app using Intent.  val REQUEST_IMAGE_CAPTURE = 1 private fun takePictureIntent() { val takePictureIntent = Intent(MediaStore . ACTION_IMAGE_CAPTURE) if (takePictureIntent . resolveActivity(packageManager) != null) { startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE) } } After the picture has been captured, the result will received on onActivityResult method. There, we can get the data, in Bitmap form. override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
Read more

Using RxJava, Retrofit in Android - Kotlin

-
Image
Introduction: Reactive Programming is a programming paradigm that’s concerned with data streams and propagation of change. The reactive model listens to changes in the event and runs the relevant code accordingly. RxJava is a Java based implementation of Reactive Programming. Whereas, RxAndroid is specific to Android platform which utilises some classes on top of the RxJava library. Classes and Concepts: There are 3 main components in RxJava. (i) Observable - It emits a stream of data or events. i.e., a class that can be used to perform some action, and publish the result. (ii) Observer - It receivers the events or data and acts upon it. i.e. a class that waits and watches the Observable, and reacts whenever the Observable publishes results. It have 4 interface methods to know the different states of Observable, as follows:         onSubscribe() - invoked when the Observer is subscribed.         onNext() - invoked when the new item is emitted from Observer.
Read more

Map, Location update and AutoComplete Places - Kotlin

-
Image
Let's see how to show current location in Maps and also show the location which is chosen from AutoComplete in Maps with the updated Google play services. That is, for location listening we gonna use   FusedLocationProviderClient and for autocomplete places, we gonna use, GeoDataClient with AutoCompletePrediction, i.e., no need to call places url from our end, Google Playservices will do that work for you. Okiee, Let's start now. You can find the project in Github . PreRequisite: Navigate to  https://developers.google.com/maps/documentation/android-api/signup and do as per the instructions to start. Manifest: Include your API key, which you got from previous step in AndroidManifest.xml <meta-data android:name= "com.google.android.geo.API_KEY" android:value= "AIzXXXXXXXXXX_XXXXXXXXXXXXXX" /> Gradle: Include the following in app-level build 's dependencies. implementation 'com
Read more

Braintree Integration in Android - Kotlin

-
Image
Let’s learn how to integrate Braintree in Android app with Kotlin. Braintree is a subsidary of PayPal. It focuses in helping businesses of all size and to help maximize business growth. Braintree accepts the following payments: * Credit Cards                             * Venmo                             * Android Pay                             * Apple Pay                             * PayPal Operation Flow: 1. App have to request token from the server. 2. Server have to generate a token using Braintree’s SDK and send that to the requested App. 3. With that Token, app should allow user to pay, which will be validated by Braintree’s server and then the payment nonce will be received. 4. That received payment nonce and paid amount will be sent to our own server. There the payment will be checked whether its successful or not and the response will be s
Read more

Exploring Android Slices - JetPack

-
Image
Introduction: Slices are a new way of embedding our app's content in other surfaces, like Google Search and later in other places like Google Assistant. Slices are UI templates, which gives look and feel at home in whatever surface, they get hosts in. Also they are rich, interactive and dynamically updatable. Before jumping into that, first migrate your project to AndroidX, (Android Studio 3.2 & above), by navigating as,                                         Refactor --> Migrate  to AndroidX  Setup: build.gradle implementation 'androidx.slice:slice-core:1.0.0' implementation 'androidx.slice:slice-builders-ktx:1.0.0-alpha6' implementation 'androidx.slice:slice-builders:1.0.0' Creating Slice Provider: Slice Provider is a component that let us display the slices we are creating, on outside our application. We can create the Slice Provider by navigating,                                       File -> New ->
Read more

Room with LiveData, ViewModel - Android Architecture Components - Kotlin

-
Image
Introduction: We have already learnt about Room in last post,  Room-Kotlin . In this post, lets learn about how to use ViewModel and LiveData with Room to improve usablity. Using LiveData with Room, allows views to be notified about data changes automatically. LiveData: LiveData is nothing but observable data holder class. It allows us to observer changes in data across multiple components of app. It is also aware of and respects lifecycle of Activities/Fragments. It also ensures that LiveData only updates app component observers that are in an active lifecycle state. The following image depicts the Lifecycle and States: Here, CREATED, STARTED, RESUMED - Active States           INTIALIZED, DESTROYED - InActive States So, LiveData will remove the updates automatically while in InActive States, i.e., INTIALIZED and DESTROYED. ViewModel: ViewModel is an entity that is free of Activity/Fragment's lifecycle. So it allows us to store and manage UI-r
Read more

Stripe Integration in Android - Kotlin

-
Image
Stripe is one of the simplest payment gateway to be used. It enables us to process payments in minutes. Let's see how to integrate Stripe in Android using Kotlin. Operational Flow:             1. App should provide order details to Stripe server and the order total will be returned to App.             2. Then the user will enter the payment/card details. That will be sent to Stripe server and the result of the request will be sent back to the App. Create Stripe Account: (a) Go to  https://dashboard.stripe.com/register and enter all your details and create account.   (b) Click API in side tab. Make sure that the Account is in Test mode. And make a note of          Publishable Key and Secret Key for use. Code: build.gradle:   compile 'com.stripe:stripe-android:5.1.0' Layout files: main_layout.xml: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:an
Read more