Gallery
Share
Explore

Lab Exercises Work Book - Using KOTLIN Android Development skills to create an Android KOTLIN APP with a PICKER and a TEXT BOOK

Learning Outcome:

Create a KOTLIN App in which the user adds text to an editable text box which is added to the picker.
Items chosen from the PICKER are added to a TEXTLIST.
We use an anonymous inner class that implements the AdapterView.OnItemSelectedListener interface and overrides the onItemSelected() and onNothingSelected() methods.
In Kotlin, an inner class is a class nested inside another class. An inner class can access the properties and methods of its outer class and can also be used to implement interfaces.


In the context of the example code provided, we use an anonymous inner class to implement the AdapterView.OnItemSelectedListener interface. We do this by creating a new instance of the interface and overriding its methods onItemSelected() and onNothingSelected(). This allows us to define custom behavior for the picker UI element when an item is selected or when no item is selected.


Anonymous inner classes are useful when we need to implement an interface or extend a class for a specific purpose, without the need to create a separate class for it. They are also useful when we need to pass an instance of an interface or an abstract class as a parameter to a method or constructor.


In this example, the anonymous inner class is defined inline, within the same scope as the setOnClickListener() and setOnItemSelectedListener() methods. This allows us to keep the code compact and easy to read, as we don't need to define a separate class for the interface implementation.


Overall, inner classes and anonymous inner classes are powerful features in Kotlin that allow us to write more expressive and modular code, making it easy to create reusable and extendable components.

Introduction:

This lab exercise workbook is designed to provide a step-by-step guide for students learning Android development with Kotlin.
The focus of this exercise is to create a simple Android application that allows users to add text to an editable text box, which is then added to a picker. Items chosen from the picker are added to a text list.
Prerequisites:
Before starting this exercise, students should have a basic understanding of Kotlin programming language, Android Studio, and Android development.

Exercise 1: Creating the Project

Open Android Studio and create a new project.
Choose a name for the project and select Kotlin as the programming language.
Choose an appropriate minimum SDK version. For this exercise, a minimum SDK version of 21 (Android 5.0 Lollipop) and a target SDK version of 30 (Android 11) would be a reasonable choice, as it provides a good balance between compatibility and modern features.
Choose an empty activity as the project template.

Exercise 2: Designing the User Interface

Open the activity_main.xml file in the res/layout folder.
Drag and drop a text box from the Palette to the design view.
Drag and drop a button from the Palette to the design view.
Drag and drop a picker from the Palette to the design view.
Add appropriate IDs to each of the UI elements.

Exercise 3: Adding Functionality to the User Interface

Open the MainActivity.kt file.
Define the variables for the UI elements.
Here's an example code snippet for defining the variables for the UI elements in the MainActivity.kt file:
class MainActivity : AppCompatActivity() {

// Define the variables for the UI elements
private lateinit var textBox: EditText
private lateinit var button: Button
private lateinit var picker: NumberPicker

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

// Initialize the variables using the findViewById method
textBox = findViewById(R.id.text_box)
button = findViewById(R.id.button)
picker = findViewById(R.id.picker)

// Add functionality to the UI elements here
}

// Add functions for adding and removing items from the picker here

}

In this example, we define three private variables for the UI elements: textBox, button, and picker.

We use the lateinit keyword to indicate that the variables will be initialized later using the findViewById method.
We also specify the variable types: EditText for the text box, Button for the button, and NumberPicker for the picker.
We then initialize the variables in the onCreate method using the findViewById method, passing in the appropriate resource IDs for each UI element.
Finally, we can add functionality to the UI elements by creating functions for adding and removing items from the picker, or any other functionality required for the application.
Initialize the variables using the findViewById method.
Create a function to add text to the picker.
Create a function to add an item to the picker.
Create a function to remove an item from the picker.
Add an onClickListener to the button to add the text to the picker.
Add an onItemSelectedListener to the picker to add and remove items from the picker.
Initialize the variables using the findViewById method.
private lateinit var textBox: EditText
private lateinit var button: Button
private lateinit var picker: NumberPicker

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

// Initialize the variables using the findViewById method
textBox = findViewById(R.id.text_box)
button = findViewById(R.id.button)
picker = findViewById(R.id.picker)

// Add functionality to the UI elements here
}

In this example, we initialize the variables for the text box, button, and picker using the findViewById method. We use the lateinit keyword to indicate that the variables will be initialized later.
The resource IDs for each UI element are passed as arguments to the findViewById method.
Create a function to add text to the picker.
private fun addTextToPicker() {
val text = textBox.text.toString()
picker.displayedValues = picker.displayedValues.plus(text)
}

This example, we create a function addTextToPicker() which retrieves the text from the text box and adds it to the displayedValues property of the picker.
We use the plus() method of the Array class to concatenate the new text with the existing displayedValues array.
Create a function to add an item to the picker.
private fun addItemToPicker(item: String) {
picker.displayedValues = picker.displayedValues.plus(item)
}

In this example, we create a function addItemToPicker(item: String) which takes a string argument item and adds it to the displayedValues property of the picker using the same plus() method as in the previous example.
Create a function to remove an item from the picker.
private fun removeItemFromPicker(item: String) {
val currentValues = picker.displayedValues
val newValues = currentValues.filter { it != item }.toTypedArray()
picker.displayedValues = newValues
}

In this example, we create a function removeItemFromPicker(item: String) which takes a string argument item and uses filter to remove it from the displayedValues property of the picker.
We first retrieve the current displayedValues array using the displayedValues property of the picker. We then use the filter() method of the Array class to create a new array that excludes the item to be removed.
Finally, we convert the filtered array to a typed array and assign it to the displayedValues property of the picker.
Add an onClickListener to the button to add the text to the picker.
button.setOnClickListener {
addTextToPicker()
}
In this example, we add an onClickListener to the button that calls the addTextToPicker() function when the button is clicked.
We use a lambda expression to provide the functionality for the onClickListener, which simply calls the addTextToPicker() function. ​A lambda function is a short, anonymous function that can be passed as a parameter to another function or method. In Kotlin, lambda functions are defined using the -> syntax, which separates the function parameters from the function body.
In the context of the provided code, the lambda expression is used to provide the functionality for the setOnClickListener() method of the button UI element. The lambda expression simply calls the addTextToPicker() function, which adds the text from the textBox UI element to the picker UI element. This allows us to define the button click event handler in a concise and readable way, without the need to define a separate class or function for it.
Lambdas are a powerful feature in Kotlin that allow us to write more expressive and functional code. They are particularly useful in functional programming, where functions are treated as first-class citizens and can be passed around as objects. Lambdas can also help reduce code duplication and increase readability by encapsulating common functionality into reusable functions.
Add an onItemSelectedListener to the picker to add and remove items from the picker.
picker.setOnItemSelectedListener(object : AdapterView.OnItemSelectedListener {
override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
val selectedItem = picker.displayedValues[position]
removeItemFromPicker(selectedItem)
}

override fun onNothingSelected(parent: AdapterView<*>?) {
// Do nothing
}
})

In this example, we add an onItemSelectedListener to the picker that removes the selected item from the picker when it is selected.
The onItemSelected() method retrieves the selected item from the displayedValues array using the position argument passed to the method, and then calls the removeItemFromPicker() function to remove the item from the picker.

Exercise 4: Testing the Application

Build and run the application on an emulator or physical device.
Test the application by adding text to the text box and clicking the button to add the text to the picker.
Test the application by selecting an item from the picker and removing it from the list.

Conclusion:

This lab exercise workbook has provided a step-by-step guide for students to create a simple Android application using Kotlin programming language.
This exercise focused on creating a user interface that allows users to add text to an editable text box, which is then added to a picker. Items chosen from the picker are added to a text list.
By completing this exercise, students will have a better understanding of Android development with Kotlin and be able to create more complex applications in the future.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.