CheckBox Widget in Android Studio With Application Example
Introduction:
Hello programmers, in this article we will learn how to create a checkbox application in Android Studio. A checkbox Widget in Android Studio is a UI component typically found in the ‘Widgets’ category, which can be checked (selected) or unchecked (deselected). It is used to allow users to make a binary choice, and multiple checkboxes can be present on the screen at the same time. Unlike radio buttons, checkboxes allow users to select multiple options simultaneously. Each checkbox represents an independent option, and users can toggle them on or off.
Assuming you already understand the definition and function of a checkbox, in this discussion, I’ll provide an example of using checkboxes in an application. The application will feature a checkbox selection menu for popular social media platforms like Facebook, Instagram, WhatsApp, Twitter, and Google+. You can select one, two, or even all of them by checking the respective checkboxes. After selecting your options, clicking the ‘Click’ button will display the chosen items in a TextView.
Properties of CheckBox widget in Android Studio
In Android Studio, you can create and work with the CheckBox widget, which is a type of toggle button that can be checked (on) or unchecked (off). CheckBoxes are commonly used for accepting user input, such as confirming terms and conditions, enabling or disabling certain features, and more. You can customize the properties of a CheckBox in your Android application through XML layout files or programmatically in Java/Kotlin code.
Here are some of the important properties and attributes you can use to customize CheckBox widget in Android Studio:
id: This attribute assigns a unique identifier to the CheckBox Widget, which you can use to reference it in your code or XML layout files.
android:id=”@+id/myCheckBox”
text: This sets the text displayed next to the CheckBox Widget. It can be used to provide a label or description for the CheckBox.
android:text=”I agree to the terms and conditions”
checked: This attribute determines whether the CheckBox is initially checked (true) or unchecked (false).
android:checked=”true”
onCheckedChanged: You can specify a method to be called when the CheckBox’s state changes. This is commonly used to respond to user interactions.
android:onCheckedChanged=”onCheckBoxClicked”
layout_width and layout_height: These attributes define the width and height of the CheckBox Widget.
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
layout_gravity: Determines the positioning of the CheckBox Widget within its parent layout. You can use values like “center,” “start,” “end,” etc.
android:layout_gravity=”center”
layout_margin: Sets margins around the CheckBox to control its spacing with other elements in the layout.
android:layout_margin=”16dp”
buttonTint: This attribute lets you change the color of the CheckBox’s check mark (the inside box when it’s checked).
android:buttonTint=”@color/your_color”
textColor: Specifies the color of the text associated with the CheckBox.
android:textColor=”@color/your_text_color”
background: You can set the background drawable or color of the CheckBox Widget.
android:background=”@drawable/your_background”
padding: Determines the internal padding of the CheckBox.
android:padding=”8dp”
visibility: Controls the visibility of the CheckBox Widget. You can set it to “visible,” “invisible,” or “gone.”
android:visibility=”visible”
You can customize these properties to create CheckBox widget that match your app’s design and functionality. You can also manipulate these properties programmatically in Java or Kotlin code to respond to user interactions and update the CheckBox’s appearance and behavior as needed.
Making Android Studio CheckBox Applications
Okay, now that you have a better understanding, let’s start learning how to create an application for inputting text and displaying it through a TextView.
Create a new project
Select empty views activity and click the next button
Select your application name in my case I selected “CheckBox”. Then click on the finish button
After that, please open activity_main.xml, click Text mode, then enter the following code into the activity_main.xml file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity"> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:layout_marginEnd="8dp" android:text="Social Media:" android:textSize="18sp" android:textStyle="bold" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.511" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <CheckBox android:id="@+id/fb" android:layout_width="104dp" android:layout_height="49dp" android:layout_marginTop="8dp" android:text="Facebook" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView4" /> <CheckBox android:id="@+id/ig" android:layout_width="104dp" android:layout_height="53dp" android:layout_marginTop="8dp" android:text="Instagram" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/fb" /> <CheckBox android:id="@+id/tw" android:layout_width="104dp" android:layout_height="41dp" android:layout_marginTop="8dp" android:text="Twitter" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/wa" /> <CheckBox android:id="@+id/wa" android:layout_width="104dp" android:layout_height="51dp" android:layout_marginTop="8dp" android:text="WhatsApps" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ig" /> <CheckBox android:id="@+id/gplus" android:layout_width="104dp" android:layout_height="47dp" android:layout_marginTop="8dp" android:text="Google+" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/tw" /> <Button android:id="@+id/submit" android:layout_width="276dp" android:layout_height="41dp" android:layout_marginTop="28dp" android:text="Click" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/gplus" /> <TextView android:id="@+id/Mtext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Your Selected Social Media is:" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/submit" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Now that we have finished designing our application’s appearance, now open MainActivity.java and enter the code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
package com.example.checkbox; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.CheckBox; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends AppCompatActivity { CheckBox fb,ig, wa, tw, gplus; Button submit; TextView MediaText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fb=(CheckBox)findViewById(R.id.fb); ig=(CheckBox)findViewById(R.id.ig); wa=(CheckBox)findViewById(R.id.wa); tw=(CheckBox)findViewById(R.id.tw); gplus=(CheckBox)findViewById(R.id.gplus); MediaText=(TextView)findViewById(R.id.Mtext); submit=(Button)findViewById(R.id.submit); submit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // Condition If None is Selected if (!fb.isChecked() && !ig.isChecked() && !wa.isChecked() && !tw.isChecked() && !gplus.isChecked()) { Toast.makeText(getApplicationContext(), "No social media selected", Toast.LENGTH_SHORT).show(); } else { String a = ""; if (fb.isChecked()) { a += "Facebook\n"; } String b = ""; if (ig.isChecked()) { b += "Instagram\n"; } String c = ""; if (wa.isChecked()) { c += "WhatsApp\n"; } String d = ""; if (tw.isChecked()) { d += "Twitter\n"; } String e = ""; if (gplus.isChecked()) { e += "Google+\n"; } MediaText.setText("Your Selected Social Media is:\n" + a + "" + b + "" + c + "" + d + "" + e); } } }); } } |
code explanation:
This code defines an Android app’s main activity, which allows users to select multiple social media platforms through checkboxes and then displays the selected choices in a TextView when a “Click” button is clicked. The code is written in Java and utilizes Android’s user interface components and event handling.
In the onCreate method, it initializes various UI elements such as checkboxes for Facebook, Instagram, WhatsApp, Twitter, and Google+ (fb, ig, wa, tw, gplus), a “Submit” button (submit), and a TextView (MediaText) by finding them using their respective IDs from an XML layout file.
The OnClickListener is set on the “Submit” button, defining what happens when it is clicked. If none of the checkboxes are selected, a short Toast message is displayed, indicating that no social media platform is selected. If one or more checkboxes are selected, the code constructs individual strings for each selected platform, appending their names (e.g., “Facebook\n”) to these strings.
Finally, it updates the TextView (MediaText) with the concatenated message, displaying the selected social media platforms. This code provides a basic example of how to handle user input through checkboxes and update a TextView to show the user’s choices in an Android application.
Save your project and run your application by clicking the Run button or via the Run menu > Run ‘app’ then selecting the device you are using. You can use an Android Virtual Device (AVD) or use your phone to Run your app. In my case I am using my phone for testing the application.
Testing:
Without selecting the checkbox when you press the button it will show a message
You can customize the design according to your preferences and change the captions as needed in this tutorial on creating CheckBox applications in Android Studio. Please try it out, and if you have any questions, feel free to ask in the comments.
