In this tutorial, you will learn how to develop an Android application using Kotlin that features checkboxes, a submit button, and transitions to another activity based on the checked checkboxes. The tutorial will guide you through designing a colorful CardView layout for the main activity, where users can select multiple options using checkboxes. You'll implement functionality to handle checkbox selections, enable a submit button to proceed to another activity based on selected checkboxes, and navigate between activities using intents.
Submitted on July 07, 2024
To create an Android app with checkboxes, a submit button, and a transition to another activity based on the checked checkboxes, follow these steps. We'll include a colorful design using CardView for the main activity.
Layout (res/layout/activity_main.xml): Design the main activity layout with CardView, checkboxes, and a submit button.
<?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">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="16dp"
android:elevation="4dp"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<CheckBox
android:id="@+id/checkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1"
android:textColor="@color/black" />
<CheckBox
android:id="@+id/checkbox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 2"
android:textColor="@color/black" />
<CheckBox
android:id="@+id/checkbox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 3"
android:textColor="@color/black" />
<CheckBox
android:id="@+id/checkbox4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 4"
android:textColor="@color/black" />
<Button
android:id="@+id/btnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_marginTop="16dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
Handle checkbox selection and submit button click to pass checked values to the next activity.
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.CheckBox
class MainActivity : AppCompatActivity() {
private lateinit var checkbox1: CheckBox
private lateinit var checkbox2: CheckBox
private lateinit var checkbox3: CheckBox
private lateinit var checkbox4: CheckBox
private lateinit var btnSubmit: Button
@Override
protected fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
checkbox1 = findViewById(R.id.checkbox1)
checkbox2 = findViewById(R.id.checkbox2)
checkbox3 = findViewById(R.id.checkbox3)
checkbox4 = findViewById(R.id.checkbox4)
btnSubmit = findViewById(R.id.btnSubmit)
btnSubmit.setOnClickListener {
submitForm()
}
}
private fun submitForm() {
val checkedOptions = mutableListOf<String>()
if (checkbox1.isChecked) {
checkedOptions.add(checkbox1.text.toString())
}
if (checkbox2.isChecked) {
checkedOptions.add(checkbox2.text.toString())
}
if (checkbox3.isChecked) {
checkedOptions.add(checkbox3.text.toString())
}
if (checkbox4.isChecked) {
checkedOptions.add(checkbox4.text.toString())
}
if (checkedOptions.isEmpty()) {
// No checkboxes are checked, show error message or handle validation
// For simplicity, showing a toast message
showToast("Please select at least one option.")
} else {
// Proceed to next activity with selected options
val intent = Intent(this, ResultActivity::class.java)
intent.putStringArrayListExtra("checkedOptions", ArrayList(checkedOptions))
startActivity(intent)
}
}
private fun showToast(message: String) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
}
}
Receive the checked options from MainActivity and display them.
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class ResultActivity : AppCompatActivity() {
private lateinit var tvResult: TextView
@Override
protected fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_result)
tvResult = findViewById(R.id.tvResult)
val checkedOptions = intent.getStringArrayListExtra("checkedOptions")
tvResult.text = "Checked Options: ${checkedOptions?.joinToString(", ")}"
}
}
Create a simple layout to display the checked options.
<!-- res/layout/activity_result.xml -->
<?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:gravity="center">
<TextView
android:id="@+id/tvResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@color/black"/>
</RelativeLayout>
You can customize the colors and styles in styles.xml and colors.xml to achieve a colorful design.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
<color name="white">#FFFFFF</color>
<color name="green">#00FF00</color>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here -->
<item name="colorPrimary">@color/white</item>
<item name="colorPrimaryDark">@color/white</item>
<item name="colorAccent">@color/green</item>
</style>
</resources>
Make sure to handle edge cases such as no checkboxes checked or handling more complex validations based on your app’s requirements. This example provides a solid foundation for a checkbox-based Android app with navigation between activities.