Category Archives: Kotlin Android Tutorial

kotlin android tutorial

Kotlin TabLayout Example

In Last Article we have briefly discussed about TabLayout and ViewPager. Now Let’s get understand this by below Example. Follow all the steps for creation of TabLayout with ViewPager with Kotlin.

1^st Step: Create Project: Create New Project on click of “File=>New=>New Project”, You will get Screen like below image. Please fill all details and do not forget to check on “Include Kotlin support” after that click on “Next” And Select Your Minimum and Maximum API Level then again Click on “Next”.

# After selection of API Level a new Screen will appear like below image, from here you can select your activity type.

#Simply click on Next and again new screen will appear like below image from here image you can change your Activity Name and also xml name.

#Click on Finish button, you are all set with Project Creation. Now we have to move to the coding side.

2^nd Step: Coding Implementation: We have to use some Fragments, class, adapter and XML for creation of TabLayout with ViewPager which are listed below.

fragment_layout.xml
FragmentOne
FragmentTwo
FragmentThree
ViewPager Adapter
activity_main.xml
MainActivity
AndroidManifest.xml

1.fragment_layout.xml: This xml will be associated with all three fragment. You can create different layout for different Fragment. Check below xml code.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_name"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />


</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/rel_main"

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv_name"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

</RelativeLayout>

FragmentOne.kt: This Kotlin fragment will be use in First Tab of TabLayout. Check below code.

package com.w3adda.tabexample

import android.graphics.Color
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.RelativeLayout
import android.widget.TextView


class FragmentOne : Fragment() {

    var tv_name: TextView? = null
    var rel_main: RelativeLayout? = null


    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view: View? = inflater!!.inflate(R.layout.fragment_layout, container, false)

        rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout
        rel_main?.setBackgroundColor(Color.CYAN)
        tv_name = view?.findViewById<TextView>(R.id.tv_name) as TextView
        tv_name?.text = "W3Adda First Tab"


        return view
    }
}

package com.w3adda.tabexample

import android.graphics.Color

import android.os.Bundle

import android.support.v4.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.RelativeLayout

import android.widget.TextView

class FragmentOne : Fragment() {

var tv_name: TextView? = null

var rel_main: RelativeLayout? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view: View? = inflater!!.inflate(R.layout.fragment_layout, container, false)

rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout

rel_main?.setBackgroundColor(Color.CYAN)

tv_name = view?.findViewById<TextView>(R.id.tv_name) as TextView

tv_name?.text = "W3Adda First Tab"

return view

}

FragmentTwo.kt: This Kotlin fragment will be use in Second Tab of TabLayout. Check below code.

package com.w3adda.tabexample 

import android.annotation.SuppressLint
import android.graphics.Color
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.RelativeLayout
import android.widget.TextView


class FragmentTwo : Fragment() {
    var tv_name: TextView? = null
    var rel_main: RelativeLayout? = null


    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)
        rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout
        rel_main?.setBackgroundColor(Color.LTGRAY)
        tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView
        tv_name?.text="W3Adda Second Tab"

        return view
    }

}

package com.w3adda.tabexample

import android.annotation.SuppressLint

import android.graphics.Color

import android.os.Bundle

import android.support.v4.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.RelativeLayout

import android.widget.TextView

class FragmentTwo : Fragment() {

var tv_name: TextView? = null

var rel_main: RelativeLayout? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)

rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout

rel_main?.setBackgroundColor(Color.LTGRAY)

tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView

tv_name?.text="W3Adda Second Tab"

return view

}

FragmentThree.kt: This Kotlin fragment will be use in Third Tab of TabLayout. Check below code.

package com.w3adda.tabexample 

import android.annotation.SuppressLint
import android.graphics.Color
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.RelativeLayout
import android.widget.TextView


class FragmentThree : Fragment() {
    var tv_name: TextView? = null
    var rel_main: RelativeLayout? = null

    
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)
        rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout
        rel_main?.setBackgroundColor(Color.YELLOW)
        tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView
        tv_name?.text="W3Adda Third Tab"

        return view
    }

}

package com.w3adda.tabexample

import android.annotation.SuppressLint

import android.graphics.Color

import android.os.Bundle

import android.support.v4.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.RelativeLayout

import android.widget.TextView

class FragmentThree : Fragment() {

var tv_name: TextView? = null

var rel_main: RelativeLayout? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view:View?=inflater!!.inflate(R.layout.fragment_layout,container,false)

rel_main=view?.findViewById<RelativeLayout>(R.id.rel_main) as RelativeLayout

rel_main?.setBackgroundColor(Color.YELLOW)

tv_name=view?.findViewById<TextView>(R.id.tv_name) as TextView

tv_name?.text="W3Adda Third Tab"

return view

}

5.ViewPagerAdapter: It extends FragmentPagerAdapter Which is implementation of PagerAdapter that represent each page as a Fragment. Check below code for understand how It was used.

package com.w3adda.tabexample 

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter

class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
    override fun getItem(position: Int): Fragment? {
        var fragment: Fragment? = null
        if (position == 0) {
            fragment = FragmentOne()
        } else if (position == 1) {
            fragment = FragmentTwo()
        } else if (position == 2) {
            fragment = FragmentThree()
        }
        return fragment
    }

    override fun getCount(): Int {
        return 3
    }

    override fun getPageTitle(position: Int): CharSequence? {
        var title: String? = null
        if (position == 0) {
            title = "First"
        } else if (position == 1) {
            title = "Second"
        } else if (position == 2) {
            title = "Third"
        }
        return title
    }
}

package com.w3adda.tabexample

import android.support.v4.app.Fragment

import android.support.v4.app.FragmentManager

import android.support.v4.app.FragmentPagerAdapter

class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

override fun getItem(position: Int): Fragment? {

var fragment: Fragment? = null

if (position == 0) {

fragment = FragmentOne()

} else if (position == 1) {

fragment = FragmentTwo()

} else if (position == 2) {

fragment = FragmentThree()

}

return fragment

}

override fun getCount(): Int {

return 3

}

override fun getPageTitle(position: Int): CharSequence? {

var title: String? = null

if (position == 0) {

title = "First"

} else if (position == 1) {

title = "Second"

} else if (position == 2) {

title = "Third"

}

return title

}

activity_main.xml: In this xml we kept our TabLayout and ViewPager. Check below XML code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabIndicatorColor="#1c1c1d"
    />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@+id/tab_layout"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="40dp"

app:tabGravity="fill"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/colorAccent"

app:tabIndicatorColor="#1c1c1d"

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_below="@+id/tab_layout"/>

</RelativeLayout>

MainActivity.kt: So this will be final class of Kotlin from here we will bind our pager adapter with ViewPager and ViewPager with TabLayout. Check below code.

package com.w3adda.tabexample 

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_tab_layout.*

class TabLayoutActivity : AppCompatActivity(){

  internal lateinit var viewpageradapter:ViewPagerAdapter //Declare PagerAdapter


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tab_layout)
        viewpageradapter= ViewPagerAdapter(supportFragmentManager)

 this.viewPager.adapter=viewpageradapter  //Binding PagerAdapter with ViewPager
 this.tab_layout.setupWithViewPager(this.viewPager) //Binding ViewPager with TabLayout
    }
}

package com.w3adda.tabexample

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import kotlinx.android.synthetic.main.activity_tab_layout.*

class TabLayoutActivity : AppCompatActivity(){

internal lateinit var viewpageradapter:ViewPagerAdapter //Declare PagerAdapter

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_tab_layout)

viewpageradapter= ViewPagerAdapter(supportFragmentManager)

this.viewPager.adapter=viewpageradapter //Binding PagerAdapter with ViewPager

this.tab_layout.setupWithViewPager(this.viewPager) //Binding ViewPager with TabLayout

}

8.AndroidManifest.xml: As we know that this is very important file for Android Project, From here you can give permission and declare your activities. Also you can change your App icon and Label of App. Check Below code.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.w3adda.tabexample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.w3adda.tabexample">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

3^rd Step: Run: Now you are all set with project so run this project on your device or Emulator. You will get output like below images.

Kotlin ViewPager & TabLayout

Leave a reply

Kotlin ViewPager & TabLayout

ViewPager: This is a layout manager which allows users to swipe left and right through pages of data. In a sense, it is nice way to show the user multiple tabs. We can also add and remove pages(tabs) dynamically. Let’s get more understand about ViewPager.

Class Declaration : The ViewPager class is a subclass of ViewGroup. Below is the class declaration.

public class ViewPager extends ViewGroup

1	public class ViewPager extends ViewGroup

XML Declaration: We have to declare ViewPager in the XML then we can access this.

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Constant Summary: There are some frequently used constant are listed below.

1.int SCROLL_STATE_DRAGGING: This constant indicates that the pager is being dragged by user.

2.int SCROLL_STATE_IDLE: This constant of ViewPager indicates that the pager is in idle state.

3.int SCROLL_STATE_SETTLING: This constant of ViewPager indicates that the state of ViewPager is in process of settling to a final position.

Method Summary: There are some commonly used methods are listed below.

1.PagerAdapter getAdapter(): This method is used to retrieve current adapter so that user can supply pages.

void setAdapter(PagerAdapter adapter): This method is used to set a Pager Adapter that will supply views for this pager as needed.
void setCurrentItem(int item): This method is used to set the currently selected pages.
void setPagerMargin(int marginPixel): This method is used to set margin between pages.
void setoffscreenPageLimit(int limit): This method is used to set number of pages.

TabLayout: The TabLayout provides a horizontal layout to display tabs. We can display more screens on a single screen using tabs. We can create sliding as well as non sliding tabs using TabLayout. Let’s get more understand about TabLayout.

Class Declaration:

public class TabLayout extends HorizontalScrollView

1	public class TabLayout extends HorizontalScrollView

XML Declaration: 
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabIndicatorColor="#1c1c1d"
    />

XML Declaration:

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="40dp"

app:tabGravity="fill"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/colorAccent"

app:tabIndicatorColor="#1c1c1d"

Constant Summary: Some frequently used Constant are listed below.

1.int GRAVITY_CENTER: This constant is used to keep the tabs in the center of the TabLayout.

2.int GRAVITY_FILL: This constant is used to fill the TabLayout as much as possible.

3.int MODE_FIXED: This constant is used to fixed the tabs concurrently.

4.int MODE_SCROLLABLE: This constant is used to Scrollable tabs display a subset of tabs at any given moment and used to contain longer tabs labels and larger number of tabs.
Constructor Summary: Some public constructor are used in TabLayout which are listed below.

1.TabLayout(Context context).
2.TabLayout(Context context, AttributeSet attrs).
3.TabLayout(Context context, AttributeSet attrs, int defStyleAttr).

Method Summary: The most commonly methods are listed below, that will let you get more awareness about TabLayout.

1.void addTab(TabLayout.Tab tab, boolean setSelected): This method is used to add a tab to this Layout with the property of selection.

void addTab(TabLayout.Tab tab, int position): This method also used to add a tab to this layout but at given position.
void addTab(TabLayout.Tab tab): This method simply add a tab to this layout.
void addTab(TabLayout.Tab tab, int position, boolean setSelected): This method is used to add a tab to this layout with given position and with selection status.
5.void addOnTabSelectedListener(TabLayout.OnTabSelectedListener listener): This method is used to invoke TabLayout.OnTabSelectedListener when tab selection changed.
void clearOnTabSelectedListener(): This method simply removes all TabLayot.OnTabSelectedListeners which were previously added.
TabLayout.Tab getTabAt(int index): This method returns the tab at the specified position.
int getTabCount(): This method is used to returns number of tabs which are currently registered with action bar.

9.TabLayout.Tab newTab(): This method is used to create and return a new tab in TabLayout.Tab.

void removeAllTabs(): This method is used to remove all tabs from the layout.
void removeTabAt(int position): This method is used to remove a tab from the layout at specified position.
void setTabGravity(int gravity): This method is used to set the gravity to use when laying out the tabs.
void setTabMode(int mode): This method is used to set the behavior mode for the Tabs in this layout.
void setTabTextColors(int normalColor, int selectedColor): This method is used to set the color of Tab’s Text when normal and when selected.
void setupWithViewPager(ViewPager pager): This method is used to set TabLayout with ViewPager.

So this was about ViewPager and TabLayout, Click on Next for Example of TabLayout with ViewPager.

Kotlin Navigation Drawer

Leave a reply

The navigation drawer is a panel that displays the app’s Main Navigation options on the left edge of the screen. It is only show when any user swipe a finger from the left edge of the screen or tapping the app icon on the action bar, Most of the time it is in hidden condition.

Example: Now a days most of the applications have navigation drawer like Facebook, Youtube, Google+ .So let’s get understand it by this example. I have used Kotlin Language for this. Follow the steps for creation of navigation drawer.

Project Creation:

Create New Project: Click on “File” and then go to “New” =>”New Project” in Android Studio. The below screen will appear, please fill all details and click on “Next”.

Activity Selection:Please select “Navigation Drawer Activity”, It will auto create navigation drawer in your application. You can use it as you want. After Selection click on “Next” like below image.

Finish: Click on “Finish” and wait till configuration of your project. Like below image.

Used Class and XML: There are some auto created xml which are used for creation of Navigation Drawer and bind with MainActivity. You can customize them according to your requirements. Let’s get understand one by one.

#1. Menu=>activity_main_drawer.xml: From here you can add new options in navigation drawer with icon and also you can change default options.

<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />

<item

android:id="@+id/nav_send"

android:icon="@drawable/ic_menu_send"

android:title="Send" />

Item is used to add an option in navigation drawer.

#2.Layout=>nav_header_main.xml:This is the header of Navigation Drawer. You can change it according to your requirements like you can add your Image, Email, Name etc. Check below image.

#3.layout=>app_bar_main.xml:The app bar is also known as the action bar. It is most important design elements in our app’s activities. It gives dedicated space for giving your app an identity and indicating the user’s location in the app. The app bar looks like below image

#4.layout=>content_main.xml:In this xml you can write code of main activity layout which will appear like below image.

#5.activity_main.xml: In this xml you have to add NavigationView(Represent a standard navigation menu for application) and include app_bar_main.xml in this XML. Like below code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:openDrawer="start">

<include

layout="@layout/app_bar_main"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<android.support.design.widget.NavigationView

android:id="@+id/nav_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

android:fitsSystemWindows="true"

app:headerLayout="@layout/nav_header_main"

app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

#6.MainActivity:An Activity is a class, Its represent single screen. Parent class for Any Activity is Activity, Means You need to implement an Activity as a subclass of Activity, like

class MainActivity:AppCompatActivity {
}

1 2	class MainActivity:AppCompatActivity { }

If you created an activity so you must declare it Manifest.xml file. In MainActivity we have to write our code for navigation drawer. Default code will be there, you can simply run that code and check output for this.

From below method you can operate your navigation menu click. For an example if you want operate camera on click of Navigation item click so write your code under the “R.id.nav_camera” where nav_camera is the unique id of Camera option in navigation drawer.

override fun onNavigationItemSelected(item: MenuItem): Boolean {
// Handle navigation view item clicks here.
when (item.itemId) {
R.id.nav_camera-> {
// Handle the camera action
}
R.id.nav_gallery-> {

        }
R.id.nav_slideshow-> {

        }
R.id.nav_manage-> {

        }
R.id.nav_share-> {

        }
R.id.nav_send-> {

        }
    }

drawer_layout.closeDrawer(GravityCompat.START)
return true
}

override fun onNavigationItemSelected(item: MenuItem): Boolean {

// Handle navigation view item clicks here.

when (item.itemId) {

R.id.nav_camera-> {

// Handle the camera action

}

R.id.nav_gallery-> {

}

R.id.nav_slideshow-> {

}

R.id.nav_manage-> {

}

R.id.nav_share-> {

}

R.id.nav_send-> {

}

drawer_layout.closeDrawer(GravityCompat.START)

return true

}

Run: Simply run this project and you will get output like below image.

Kotlin ListView

Leave a reply

ListView with Kotlin

ListView is a view from which we can display group of items in vertical scrollable list. List items are automatically inserted with the help of adapter.
Adapter is a bridge UI component and data source, It pulls data from database or an array.
It is briefly discussed in Android ListView Article . Please check that article.

Here we are going to discuss ListView with Kotlin in Android.

Example: Let’s create new project and do not forget check “Include Kotlin Support”. Used classes and Xml are listed below.

MainActivity
LangListAdapter
Langauge(Model)
activity_main.xml
layout_adapter.xml
header.xml
colors.xml

Let’s understand each class one by one.

#Langauge(Model): In Kotlin we do not need to write getter and setter method in model. It is very simple to create model in Kotlin support. Just check below model, you will get understand what I am trying to say.

package com.w3adda.listviewwithkot


class Langauge {
    var name: String = ""

}

package com.w3adda.listviewwithkot

class Langauge {

var name: String = ""

}

so it is pretty simple to create model just need to declare our variable.

#LangListAdapter: Below is the Adapter Code, code is reduced by Kotlin and it is very easy to get understand, methods are same as we already discussed in ListAdapter in Android Article. So Let’s write code of it. Here It extends Base Adapter which is clearly explained in Android Tutorial. BaseAdapter is very generic adapter which allows you to do pretty much whatever you want . Its custom Adapter from which you can do whatever you want to do with grid and list, But you need to do some coding for it.

package com.w3adda.listviewwithkot

import android.app.Activity
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView

data class LangListAdapter(var langaugeList:List<Langauge>, var activity: Activity) : BaseAdapter(){

    override fun getItem(position: Int): Any {
        return langaugeList.get(position)
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getCount(): Int {
        return langaugeList.size
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view: View = View.inflate(activity,R.layout.layout_adapter,null)

        val tv_num = view.findViewById<TextView>(R.id.tv_number) as TextView
        val tv_lang = view.findViewById<TextView>(R.id.tv_lang) as TextView


        tv_num.text = (position+1).toString()+"."
        tv_lang.text = langaugeList.get(position).name


        return view
    }

}

package com.w3adda.listviewwithkot

import android.app.Activity

import android.view.View

import android.view.ViewGroup

import android.widget.BaseAdapter

import android.widget.TextView

data class LangListAdapter(var langaugeList:List<Langauge>, var activity: Activity) : BaseAdapter(){

override fun getItem(position: Int): Any {

return langaugeList.get(position)

}

override fun getItemId(position: Int): Long {

return position.toLong()

}

override fun getCount(): Int {

return langaugeList.size

}

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

val view: View = View.inflate(activity,R.layout.layout_adapter,null)

val tv_num = view.findViewById<TextView>(R.id.tv_number) as TextView

val tv_lang = view.findViewById<TextView>(R.id.tv_lang) as TextView

tv_num.text = (position+1).toString()+"."

tv_lang.text = langaugeList.get(position).name

return view

}

# layout_adapter.xml : The below layout is associated with Above adapter class. Just check it.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

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

        android:text="1."
        android:gravity="end|top"
        android:textColor="@color/colorText"
        android:textSize="18sp" />


        <TextView
            android:id="@+id/tv_lang"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="40dp"
            android:text="Kotlin"
            android:padding="5dp"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/tv_number"
            android:textColor="@color/colorText"
            android:textSize="18sp" />
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<TextView

android:id="@+id/tv_number"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dp"

android:text="1."

android:gravity="end|top"

android:textColor="@color/colorText"

android:textSize="18sp" />

<TextView

android:id="@+id/tv_lang"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:minHeight="40dp"

android:text="Kotlin"

android:padding="5dp"

android:layout_marginLeft="10dp"

android:layout_toRightOf="@+id/tv_number"

android:textColor="@color/colorText"

android:textSize="18sp" />

</RelativeLayout>

#MainActivity: Now it is time to finish our last stage that is Activity which is associated with Model and Adapter. We have added data from here. The adding process is about same Like we used to use before, but some changes are there, Kotlin also reduced code here and did simple work for us. Checkout below code.

package com.w3adda.listviewwithkot

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.ListView

class MainActivity : AppCompatActivity() {

    var list_lang: ListView? = null
    var langaugeList: ArrayList<Langauge> = ArrayList<Langauge>()
    var adapter: LangListAdapter? = null

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

        list_lang = findViewById<ListView>(R.id.list_lang) as ListView
        addLangData()
        adapter = LangListAdapter(langaugeList, this)
        list_lang?.adapter = adapter
    }

    private fun addLangData() {
        val lang1 = Langauge()
        lang1.name = "Android"
        langaugeList.add(lang1)

        val lang2 = Langauge()
        lang2.name = "Kotlin"
        langaugeList.add(lang2)

        val lang3 = Langauge()
        lang3.name = "Java"
        langaugeList.add(lang3)

        val lang4 = Langauge()
        lang4.name = "Python"
        langaugeList.add(lang4)

        val lang5 = Langauge()
        lang5.name = "PHP"
        langaugeList.add(lang5)

        val lang6 = Langauge()
        lang6.name = "Swift"
        langaugeList.add(lang6)

        val lang7 = Langauge()
        lang7.name = "Html"
        langaugeList.add(lang7)

        val lang8 = Langauge()
        lang8.name = "MySql"
        langaugeList.add(lang8)


        val lang9 = Langauge()
        lang9.name = "Ruby"
        langaugeList.add(lang9)
    }
}

package com.w3adda.listviewwithkot

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.widget.ListView

class MainActivity : AppCompatActivity() {

var list_lang: ListView? = null

var langaugeList: ArrayList<Langauge> = ArrayList<Langauge>()

var adapter: LangListAdapter? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

list_lang = findViewById<ListView>(R.id.list_lang) as ListView

addLangData()

adapter = LangListAdapter(langaugeList, this)

list_lang?.adapter = adapter

}

private fun addLangData() {

val lang1 = Langauge()

lang1.name = "Android"

langaugeList.add(lang1)

val lang2 = Langauge()

lang2.name = "Kotlin"

langaugeList.add(lang2)

val lang3 = Langauge()

lang3.name = "Java"

langaugeList.add(lang3)

val lang4 = Langauge()

lang4.name = "Python"

langaugeList.add(lang4)

val lang5 = Langauge()

lang5.name = "PHP"

langaugeList.add(lang5)

val lang6 = Langauge()

lang6.name = "Swift"

langaugeList.add(lang6)

val lang7 = Langauge()

lang7.name = "Html"

langaugeList.add(lang7)

val lang8 = Langauge()

lang8.name = "MySql"

langaugeList.add(lang8)

val lang9 = Langauge()

lang9.name = "Ruby"

langaugeList.add(lang9)

}

#activity_main.xml: The Associated XML file with Above activity is below you can simply use it.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.listviewwithkot.MainActivity">
    <include layout="@layout/header"
        android:id="@+id/header"/>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list_lang"
        android:layout_below="@+id/header"
        android:padding="5dp"
        android:divider="@color/colorDivider"

        android:dividerHeight="1dp"/>

</RelativeLayout>

<?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"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.listviewwithkot.MainActivity">

<include layout="@layout/header"

android:id="@+id/header"/>

<ListView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/list_lang"

android:layout_below="@+id/header"

android:padding="5dp"

android:divider="@color/colorDivider"

android:dividerHeight="1dp"/>

</RelativeLayout>

#Header.xml: The Header file which I have used in activity_main.xml is below, you can modified it according to you.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/header"
    android:layout_height="50dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:text="W3Adda ListView"
        android:textSize="18sp"
        android:textStyle="bold"
        />



</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:background="@color/header"

android:layout_height="50dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="12dp"

android:text="W3Adda ListView"

android:textSize="18sp"

android:textStyle="bold"

</RelativeLayout>

#colors.xml: Some colors I have used so that it look good, you can use it.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#9e4e11</color>
    <color name="colorPrimaryDark">#a96028</color>
    <color name="colorAccent">#FF4081</color>


    <color name="header">#9e4e11</color>
    <color name="colorDivider">#795548</color>
    <color name="colorText">#ffffff</color>
    <color name="colorSecondaryText">#fafafa</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="colorText">#ffffff</color>

<color name="colorSecondaryText">#fafafa</color>

</resources>

Run: We are all set from coding site. So its time to run this project on your device or Emulator. I have used Emulator. The result of above project will look like below image.

Kotlin GridView

Leave a reply

It displays items in a two-dimensional , scrollable grid. The ListView and GridView are subclass of AdapterView . As we discussed in ListView that Adapter is a bridge between UI and Data source and it retrieves data from data source.

Lets understand it by an example , Create GridView in Xml Layout like below code

<GridView
android:id="@+id/gv_test"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>

<GridView

android:id="@+id/gv_test"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:columnWidth="90dp"

android:numColumns="2"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:stretchMode="columnWidth"

android:gravity="center"

GridView Attributes

android:id : it used to identify GridView Uniquely.

android:numColumns : It used to define that how many columns will be shown on display. It may be integer value like “2” or auto_fit. auto_fitmeans as many as column possible to fit on display.

android:verticalSpacing :It defines vertical spacing between rows, It can be dp,px,sp,in or mm.

android:horizontalSpacing :It defines horizontal spacing between columns.

android:strechMode :It defines how columns should stretched to fill display.

Example: With the help of below example we will get understand about GridView with Kotlin. There are some classes and xml which is used in Grid View are listed below.

MainActivity
LangListAdapter
Langauge(Model).
Activity_main.xml
Layout_adapter.xml
Header.xml
border_layout.xml

Let’s get understand each class one by one.

package com.w3adda.listviewwithkot


class Langauge {
varname: String = ""
varimg_icon: Int = 0


}

package com.w3adda.listviewwithkot

class Langauge {

varname: String = ""

varimg_icon: Int = 0

}

so it is pretty simple to create model just need to declare our variable.

#LangListAdapter:Below is the Adapter Code, code is reduced by Kotlin and it is very easy to get understand, methods are same as we already discussed in BaseAdapter in Android Article. So Let’s write code of it. Here It extends Base Adapter which is clearly explained in Android Tutorial. BaseAdapter is very generic adapter which allows you to do pretty much whatever you want . Its custom Adapter from which you can do whatever you want to do with grid and list, But you need to do some coding for it.

package com.w3adda.listviewwithkot

import android.app.Activity
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView

data class LangListAdapter(varlangaugeList:List<Langauge>, varactivity: Activity) : BaseAdapter(){

override fun getItem(position: Int): Any {
return langaugeList.get(position)
    }

override fun getItemId(position: Int): Long {
return position.toLong()
    }

override fun getCount(): Int {
return langaugeList.size
}

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
valview: View = View.inflate(activity,R.layout.layout_adapter,null)

valtv_num = view.findViewById<TextView>(R.id.tv_number) as TextView
valtv_lang = view.findViewById<TextView>(R.id.tv_lang) as TextView
valimg_lang=view.findViewById<ImageView>(R.id.im_lang)


tv_num.text= (position+1).toString()+"."
tv_lang.text= langaugeList.get(position).name
vallang_pic=langaugeList.get(position).img_icon
//img_lang.drawable =langaugeList.get(position).img_icon
img_lang.setImageResource(lang_pic)



return view
    }

}

package com.w3adda.listviewwithkot

import android.app.Activity

import android.view.View

import android.view.ViewGroup

import android.widget.BaseAdapter

import android.widget.ImageView

import android.widget.TextView

data class LangListAdapter(varlangaugeList:List<Langauge>, varactivity: Activity) : BaseAdapter(){

override fun getItem(position: Int): Any {

return langaugeList.get(position)

}

override fun getItemId(position: Int): Long {

return position.toLong()

}

override fun getCount(): Int {

return langaugeList.size

}

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

valview: View = View.inflate(activity,R.layout.layout_adapter,null)

valtv_num = view.findViewById<TextView>(R.id.tv_number) as TextView

valtv_lang = view.findViewById<TextView>(R.id.tv_lang) as TextView

valimg_lang=view.findViewById<ImageView>(R.id.im_lang)

tv_num.text= (position+1).toString()+"."

tv_lang.text= langaugeList.get(position).name

vallang_pic=langaugeList.get(position).img_icon

//img_lang.drawable =langaugeList.get(position).img_icon

img_lang.setImageResource(lang_pic)

return view

}

# layout_adapter.xml : The below layout is associated with Above adapter class. Just check it.

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/border_layout"
android:layout_margin="10dp"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/im_lang"
android:layout_marginTop="38dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
android:text="1."
android:gravity="end|top"
android:textColor="@color/colorText"
android:textSize="18sp" />


<TextView
android:id="@+id/tv_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin"


android:layout_below="@+id/im_lang"
android:layout_alignLeft="@+id/im_lang"
android:layout_marginLeft="10dp"
android:textColor="@color/colorText"
android:textSize="18sp" />


<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="@+id/im_lang"
android:layout_toRightOf="@+id/tv_number"
android:layout_margin="20dp"
/>


</RelativeLayout>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/border_layout"

android:layout_margin="10dp"

android:orientation="horizontal">

<TextView

android:id="@+id/tv_number"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="@+id/im_lang"

android:layout_marginTop="38dp"

android:layout_marginLeft="5dp"

android:layout_marginBottom="5dp"

android:text="1."

android:gravity="end|top"

android:textColor="@color/colorText"

android:textSize="18sp" />

<TextView

android:id="@+id/tv_lang"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Kotlin"

android:layout_below="@+id/im_lang"

android:layout_alignLeft="@+id/im_lang"

android:layout_marginLeft="10dp"

android:textColor="@color/colorText"

android:textSize="18sp" />

<ImageView

android:layout_width="80dp"

android:layout_height="80dp"

android:id="@+id/im_lang"

android:layout_toRightOf="@+id/tv_number"

android:layout_margin="20dp"

</RelativeLayout>

#MainActivity:Now it is time to finish our last stage that is Activity which is associated with Model and Adapter. We have added data from here. The adding process is about same Like we used to use before, but some changes are there, Kotlin also reduced code here and did simple work for us. Checkout below code.

package com.w3adda.listviewwithkot

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.GridView


class MainActivity : AppCompatActivity() {

varlist_lang: GridView? = null
varlangaugeList: ArrayList<Langauge> = ArrayList<Langauge>()
varadapter: LangListAdapter? = null

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

list_lang= findViewById<GridView>(R.id.list_lang) as GridView
addLangData()
adapter = LangListAdapter(langaugeList, this)
list_lang?.adapter = adapter
}

private fun addLangData() {
vallang1 = Langauge()
        lang1.name = "Android"
lang1.img_icon=R.drawable.android
langaugeList.add(lang1)

vallang2 = Langauge()
        lang2.name = "Kotlin"
lang2.img_icon=R.drawable.kotlin
langaugeList.add(lang2)

vallang3 = Langauge()
        lang3.name = "Java"
lang3.img_icon=R.drawable.java
langaugeList.add(lang3)

vallang4 = Langauge()
        lang4.name = "Python"
lang4.img_icon=R.drawable.python
langaugeList.add(lang4)

vallang5 = Langauge()
        lang5.name = "PHP"
lang5.img_icon=R.drawable.php
langaugeList.add(lang5)

vallang6 = Langauge()
        lang6.name = "React"
lang6.img_icon=R.drawable.react
langaugeList.add(lang6)

vallang7 = Langauge()
        lang7.name = "HTML"
lang7.img_icon=R.drawable.html
langaugeList.add(lang7)

vallang8 = Langauge()
        lang8.name = "MySql"
lang8.img_icon=R.drawable.mysql
langaugeList.add(lang8)


vallang9 = Langauge()
lang9.name = "Laravel"
lang9.img_icon=R.drawable.laravel
langaugeList.add(lang9)
    }
}

package com.w3adda.listviewwithkot

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.widget.GridView

class MainActivity : AppCompatActivity() {

varlist_lang: GridView? = null

varlangaugeList: ArrayList<Langauge> = ArrayList<Langauge>()

varadapter: LangListAdapter? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

list_lang= findViewById<GridView>(R.id.list_lang) as GridView

addLangData()

adapter = LangListAdapter(langaugeList, this)

list_lang?.adapter = adapter

}

private fun addLangData() {

vallang1 = Langauge()

lang1.name = "Android"

lang1.img_icon=R.drawable.android

langaugeList.add(lang1)

vallang2 = Langauge()

lang2.name = "Kotlin"

lang2.img_icon=R.drawable.kotlin

langaugeList.add(lang2)

vallang3 = Langauge()

lang3.name = "Java"

lang3.img_icon=R.drawable.java

langaugeList.add(lang3)

vallang4 = Langauge()

lang4.name = "Python"

lang4.img_icon=R.drawable.python

langaugeList.add(lang4)

vallang5 = Langauge()

lang5.name = "PHP"

lang5.img_icon=R.drawable.php

langaugeList.add(lang5)

vallang6 = Langauge()

lang6.name = "React"

lang6.img_icon=R.drawable.react

langaugeList.add(lang6)

vallang7 = Langauge()

lang7.name = "HTML"

lang7.img_icon=R.drawable.html

langaugeList.add(lang7)

vallang8 = Langauge()

lang8.name = "MySql"

lang8.img_icon=R.drawable.mysql

langaugeList.add(lang8)

vallang9 = Langauge()

lang9.name = "Laravel"

lang9.img_icon=R.drawable.laravel

langaugeList.add(lang9)

}

#activity_main.xml:The Associated XML file with Above activity is below you can simply use it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns: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:background="#fff"
tools:context="com.w3adda.listviewwithkot.MainActivity">
<include layout="@layout/header"
android:id="@+id/header"/>

<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/list_lang"
android:layout_below="@+id/header"
android:padding="5dp"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:divider="@color/colorDivider"
android:dividerHeight="1dp"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns: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:background="#fff"

tools:context="com.w3adda.listviewwithkot.MainActivity">

<include layout="@layout/header"

android:id="@+id/header"/>

<GridView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/list_lang"

android:layout_below="@+id/header"

android:padding="5dp"

android:numColumns="2"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:stretchMode="columnWidth"

android:gravity="center"

android:divider="@color/colorDivider"

android:dividerHeight="1dp"/>

</RelativeLayout>

#Header.xml: The Header file which I have used in activity_main.xml is below, you can modified it according to you.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/header"
android:layout_height="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="W3Adda ListView"
android:textSize="18sp"
android:textStyle="bold"
/>



</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:background="@color/header"

android:layout_height="50dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="12dp"

android:text="W3Adda ListView"

android:textSize="18sp"

android:textStyle="bold"

</RelativeLayout>

#border_layout.xml: Here I have used border layout for creation border of GridView’s item. Press right click of mouse on drawable and make drawable resource file like below image,

And paste this code in your resource file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
>
<shape>
<solid
android:color="@android:color/transparent"
>

</solid>

<corners android:radius="3dp" />

<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<stroke
android:width="1dp"
android:color="#ca640b"/>
</shape>


</item>
</selector>

<?xml version="1.0" encoding="utf-8"?>

<item

<shape>

<solid

android:color="@android:color/transparent"

</solid>

<padding

android:bottom="1dp"

android:left="1dp"

android:right="1dp"

android:top="1dp" />

<stroke

android:width="1dp"

android:color="#ca640b"/>

</shape>

</item>

</selector>

Run:We are all set from coding part. Soits time to run this project on your device or Emulator. I have used Emulator. The result of above project will look like below image.

Kotlin Fragment

Leave a reply

Fragment is a part of Activity or also we can say sub activity. It represent multiple screen inside an activity.

The fragment’s lifecycle is affected by the host activity’s lifecycle, For example if host activity is in pause status so all fragment will be in pause status and if activity is destroyed so all fragment will be destroyed. It contains callback methods like an activity, like onCreate(), onStart(), onPause() and onStop().
It has been already discussed in Android Tutorial here we are going to create Fragment with Kotlin in Android.

package com.w3adda.myapplication

import android.content.Context
import android.net.Uri
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup


class KotlinFragment : Fragment(){
    private var kotlinFragment: KotlinFragment? = null
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view:View?=null
        view=inflater!!.inflate(R.layout.fragment_kotlin,container,false)
        return view
    }
}

package com.w3adda.myapplication

import android.content.Context

import android.net.Uri

import android.os.Bundle

import android.support.v4.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

class KotlinFragment : Fragment(){

private var kotlinFragment: KotlinFragment? = null

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view:View?=null

view=inflater!!.inflate(R.layout.fragment_kotlin,container,false)

return view

}

So it was the way from which we can create fragment in Android with Kotlin And if you want more details about Fragment so please visit Android Fragment Article.

FindViewById & On Click Listener

Leave a reply

In Kotlin we do not need to fetch our component using Id, It depends upon you If you want to fetch them so you can. You can directly Access your xml component without using “findViewById()”.In this article we get know about On-click Listener and set text into component.
#Use of component without using “findViewByID()” So Now say good by to findViewById() and just write your logic with less verbosity.

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

this.tv_hello.setText("Kotlin Welcome")

}
}

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

this.tv_hello.setText("Kotlin Welcome")

}

#On-Click Listener: The below code will show you that how can you use On-click Listener, In Kotlin and in Java.

Kotlin:

this.btn_fir.setOnClickListener{

//this.tv_hello.setText("Button Clicked")
Toast.makeText(this,"Clicked", Toast.LENGTH_SHORT).show() }

}

this.btn_fir.setOnClickListener{

//this.tv_hello.setText("Button Clicked")

Toast.makeText(this,"Clicked", Toast.LENGTH_SHORT).show() }

}

Java:

Button btn=(Button)findViewById(R.id.btn);
btn_fir.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
Toast.makeText(this,"Clicked on Button", Toast.LENGTH_SHORT).show()
}
});

Button btn=(Button)findViewById(R.id.btn);

btn_fir.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(this,"Clicked on Button", Toast.LENGTH_SHORT).show()

}

});

Example:Let get more understand it by this simple example.

#Main Activity:the below code I have used in MainActivity.

package com.w3adda.myapplication

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
this.btn_fir.setOnClickListener{
this.tv_hello.setText("Welcome to w3adda.com")
Toast.makeText(this,"Clicked", Toast.LENGTH_SHORT).show() }

}
}

package com.w3adda.myapplication

import android.os.Bundle

import android.support.v7.app.AppCompatActivity

import android.widget.Toast

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

this.btn_fir.setOnClickListener{

this.tv_hello.setText("Welcome to w3adda.com")

Toast.makeText(this,"Clicked", Toast.LENGTH_SHORT).show() }

}

Xml: The below xml is associated with MainActivity.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.w3adda.myapplication.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_hello"
android:textColor="#000"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

/>

<Button
android:id="@+id/btn_fir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click"
android:layout_above="@+id/tv_hello"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.w3adda.myapplication.MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv_hello"

android:textColor="#000"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

<Button

android:id="@+id/btn_fir"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click"

android:layout_above="@+id/tv_hello"

android:layout_centerHorizontal="true"

android:layout_marginBottom="10dp"/>

</RelativeLayout>

Output:So output of this code will look like below images. First Image when you will run this code and second when you will click on Button.

Conversion Java to Kotlin

Leave a reply

Intent & Conversion from Java to Kotlin

Intent: As we know that intent is used to redirect one activity to another activity.Intent Facilitate communication between components, It is Used to invoke components. Uses of Intent are: Starting an Activity, Starting a Service ,Delivering a Broadcast etc.
Types of Intent : Explicit Intents, Implicit Intents .
It is briefly discussed in Android tutorial, Please check Android tutorial for more details.

Android studio version 3.0 provide us facilities to convert our Java class to Kotlin class by following some easy steps. Lets see these steps.

Example: With this given example we get understand about conversion and Also we will learn use of Intent in Android with Kotlin. Follow below steps for Conversion.

Step 1^st: In below screen I wrote code of activity in java which we used to do before Kotlin.

Step 2^nd :Click on “Code” option in menu of Android Studio and go to “Convert Java File to Kotlin File” or simply use shortcut press “Ctrl+Alt+Shift+K” for converting Java file to Kotlin file. Like below Image.

# After Pressing this option it will be doing process for converting Java File to Kotlin.

Step 3^rd: In step third the Java file is converted to Kotlin File, Just check below image.

So this was Java file to Kotlin file conversion. I have used two Activities here , First One is MainActivity and Second one is SecondActivity (Converted file).

#MainActivity.kt: The below code is used for Main Activity.

package com.w3adda.helloapp

import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.header.*

class MainActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
this.heading.setText("Main Activity")
this.btn_fir.setOnClickListener {
val i = Intent(this, SecondActivity::class.java)
            startActivity(i)
        }
    }
}

package com.w3adda.helloapp

import android.content.Intent

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.widget.Button

import kotlinx.android.synthetic.main.activity_main.*

import kotlinx.android.synthetic.main.header.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

this.heading.setText("Main Activity")

this.btn_fir.setOnClickListener {

val i = Intent(this, SecondActivity::class.java)

startActivity(i)

}

#SecondActivity.java:The below code is used for Second Activity(Before Conversion).

package com.infowind.myapplication;


import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;


public class SecondActivity extends AppCompatActivity {

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        Button btn_next=(Button)findViewById(R.id.btn_next);
        btn_next.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
                Intent i =new Intent(SecondActivity.this,MainActivity.class);
                startActivity(i);
            }
        });
    }
}

package com.infowind.myapplication;

import android.content.Intent;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.Button;

public class SecondActivity extends AppCompatActivity {

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_second);

Button btn_next=(Button)findViewById(R.id.btn_next);

btn_next.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent i =new Intent(SecondActivity.this,MainActivity.class);

startActivity(i);

}

});

}

SecondActivity.kt: After conversion of java file to Kotlin file will look like below code.

package com.w3adda.helloapp

import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import kotlinx.android.synthetic.main.activity_second.*
import kotlinx.android.synthetic.main.header.*

class SecondActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_second)
val btn_next=findViewById<View>(R.id.btn_next) as Button
btn_next.setOnClickListener {
val i = Intent(this, MainActivity::class.java)
            startActivity(i)
        }
    }
}

package com.w3adda.helloapp

import android.content.Intent

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.widget.Button

import kotlinx.android.synthetic.main.activity_second.*

import kotlinx.android.synthetic.main.header.*

class SecondActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_second)

val btn_next=findViewById<View>(R.id.btn_next) as Button

btn_next.setOnClickListener {

val i = Intent(this, MainActivity::class.java)

startActivity(i)

}

XML: There are three XML files are used in this project 1^st is for Main Activity, 2^nd is for Second Activity and 3^rd is “Header” File which is used in both XML. Checkout all below.

#header.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/header"
android:layout_height="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:text="Main Activity"
android:textSize="18sp"
android:layout_margin="10dp"
android:id="@+id/heading"

/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:background="@color/header"

android:layout_height="50dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="40dp"

android:text="Main Activity"

android:textSize="18sp"

android:layout_margin="10dp"

android:id="@+id/heading"

</RelativeLayout>

#activity_main:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.w3adda.helloapp.MainActivity">

<include layout="@layout/header"
android:id="@+id/heder"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_hello"
android:textColor="#000"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

/>

<Button
android:id="@+id/btn_fir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click"
android:layout_above="@+id/tv_hello"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.w3adda.helloapp.MainActivity">

<include layout="@layout/header"

android:id="@+id/heder"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv_hello"

android:textColor="#000"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

<Button

android:id="@+id/btn_fir"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click"

android:layout_above="@+id/tv_hello"

android:layout_centerHorizontal="true"

android:layout_marginBottom="10dp"/>

</RelativeLayout>

#activity_second:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.w3adda.helloapp.SecondActivity">
<include layout="@layout/header"
android:id="@+id/header"/>


<Button
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="107dp"
android:text="Next" />
</RelativeLayout>

<?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"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.w3adda.helloapp.SecondActivity">

<include layout="@layout/header"

android:id="@+id/header"/>

<Button

android:id="@+id/btn_next"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="107dp"

android:text="Next" />

</RelativeLayout>

So we are all set for this code. Guys do not forget to declare Second Activity in “Manifest.xml” file.

Run: Follow all steps and after completion Run your project, you will get Output like below images.

Hopefully this will help you to get conversion of Java file to Kotlin file and also Intent in Kotlin.

Kotlin Android Hello World

Leave a reply

As we know that Google has announced that Kotlin is official language for android. It has briefly discussed in introduction article of Kotlin with Android. Let’s make our first “Hello World” Project with Kotlin. Please Update your Android Studio before start coding with Kotlin.
Create An Android Application With Kotlin:
For creation of new project with Kotlin Let’s Open your Android Studio and click on New Project. You will get screen like below image.

hello-world-1

Enter Application Name and company domain, Do not forget to check “Include Kotlin support”. Click on Next button, You will get new screen like below image.

hello-world-2

#Select your minimum sdk version and click on “Next”, You will get new screen like below image.

hello-world-3

# Again Click on Next Button and then finish it like below image.

hello-world-4

#So Below is your Android Activity with Kotlin. The Extension is with “.kt” .

hello-world-5

Declare Activity: Below is the code for declaration of an Activity in both language Java and Kotlin.

Declare Activity in Kotlin:

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

class MyActivity:AppCompatActivity(){

override fun onCreate(savedInstanceState:Bundle?){

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

}

Declare Activity in Java:

public class MyActivity extends AppCompatActivity{
  @Override
  protectedvoidonCreate(BundlesavedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

public class MyActivity extends AppCompatActivity{

@Override

protectedvoidonCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

So this was the way that how you declare Activity in both Language.

#XML: Default Xml when you first time create any project will look like below image.

hello-world-6

Run: You are all set with your “Hello World” project, just click on Run button and output will display like below image.

hello-world-7

So this was simple project of Android With Kotlin, Hopefully It will clear your basic with Kotlin.

More Kotlin Android Tutorial

Learn

ABOUT PAGES

Category Archives: Kotlin Android Tutorial

Kotlin TabLayout Example

Kotlin TabLayout Example

Kotlin ViewPager & TabLayout

Kotlin ViewPager & TabLayout

Kotlin Navigation Drawer

Navigation Drawer

Kotlin ListView

ListView with Kotlin

Kotlin GridView

Kotlin Fragment

FindViewById & On Click Listener

Conversion Java to Kotlin

Kotlin Android Hello World