Monday 27 November 2017

RecyclerView using Kotlin






A Simple example to create a RecyclerView using Kotlin Language.




build.gradle[under app folder]
============
apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.pratap.kotlinrecyclerview"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:design:26.1.0'
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:recyclerview-v7:26.1.0'
    implementation 'com.android.support:cardview-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

}



Student.kt
===========
create model class in kotlin like below


package com.pratap.kotlinrecyclerview.models

/**
 * Created by pratap.kesaboyina on 27-11-2017.
 */

data class Student(val name: String, val email: String)





MainActivity.kt
===============
package com.pratap.kotlinrecyclerview

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.widget.LinearLayout
import com.pratap.kotlinrecyclerview.adapters.StudentsAdapter
import com.pratap.kotlinrecyclerview.models.Student


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val recyclerView: RecyclerView = findViewById(R.id.recyclerView)

        //adding a layoutmanager
        recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false)


        //crating an arraylist to store users using the data class user
        val users = ArrayList<Student>()


        //adding some dummy data to the list
        for (i in 1..10) {

            users.add(Student("Student " + i, "Student" + i + "@gmail.com"))
        }


        //creating our adapter
        val adapter = StudentsAdapter(users)

        //now adding the adapter to recyclerview
        recyclerView.adapter = adapter


    }
}



activity_main.xml
==================
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        />

</LinearLayout>


list_row.xml
==================
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:foreground="?android:attr/selectableItemBackground"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text=""

                android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

            <TextView
                android:id="@+id/txt_email_id"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text=""
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" />
        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>




StudentsAdapter.kt
==================
package com.pratap.kotlinrecyclerview.adapters

/**
 * Created by pratap.kesaboyina on 27-11-2017.
 */

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import android.widget.Toast
import com.pratap.kotlinrecyclerview.R
import com.pratap.kotlinrecyclerview.models.Student


class StudentsAdapter(val studentList: ArrayList<Student>) : RecyclerView.Adapter<StudentsAdapter.ViewHolder>() {


    //this method is returning the view for each item in the list
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StudentsAdapter.ViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.list_row, parent, false)
        return ViewHolder(v)
    }

    //this method is binding the data on the list
    override fun onBindViewHolder(holder: StudentsAdapter.ViewHolder, position: Int) {
        holder.bindItems(studentList[position])
    }

    //this method is giving the size of the list
    override fun getItemCount(): Int {
        return studentList.size
    }


    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bindItems(student: Student) {
            val txt_name: TextView = itemView.findViewById(R.id.txt_name)
            val txt_email_id: TextView = itemView.findViewById(R.id.txt_email_id)
            txt_name.text = student.name
            txt_email_id.text = student.email


            //set the onclick listener for the list item
            itemView.setOnClickListener({

                Toast.makeText(itemView.context, student.name + "\n" + student.email, Toast.LENGTH_LONG).show();

            })
        }
    }
}


Screenshot:
=========




Friday 13 October 2017

Lottie Android Example


Render After Effects animations natively on Android using this Great Library

https://github.com/airbnb/lottie-android

Let's see how to implement in android app to render after effects animations using json files.

Download any after effects animation file from this site or if you created on your own

https://www.lottiefiles.com


Step: 1
======

Add gradle file to your dependencies in your build.gradle file under app folder

compile 'com.airbnb.android:lottie:2.2.5'


like below


dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.airbnb.android:lottie:2.2.5'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:26.1.0'
}


Step: 2
======

create an assets folder













Right click on main folder --> New  --> Folder --> Select assets folder --> Finish.

You need add after effects animation file in this assets folder.


Step: 3
======
create an activity and xml layout


package com.pratap.lottieexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // you can load it programmatically
       /*
        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view_1);
        animationView.setAnimation("favourite_app_icon.json");
        animationView.loop(true);
        animationView.playAnimation();*/


        // if  you want cancel, you can use this
        // animationView.cancelAnimation();
    }
}



activity_main.xml
==================


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.pratap.lottieexample.MainActivity">


    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="favourite_app_icon.json"
        app:lottie_loop="true" />


    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="trophy.json"
        android:layout_margin="20dp"
        app:lottie_loop="true" />


    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view_3"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="cycle_animation.json"
        app:lottie_loop="true" />


</LinearLayout>





Screenshots
==========
 



Demo Video
==========