This document discusses widgets that can be used to build mobile applications. It identifies common widgets like TextView, EditText, Button, ImageView, Checkbox, RadioGroup and their uses. It explains that widgets are UI controls that allow users to interact with apps. All widgets have attributes like layout_width and layout_height. Additional attributes are specific to each widget type. The document provides code snippets examples for different widgets and their attributes.
This document discusses widgets that can be used to build mobile applications. It identifies common widgets like TextView, EditText, Button, ImageView, Checkbox, RadioGroup and their uses. It explains that widgets are UI controls that allow users to interact with apps. All widgets have attributes like layout_width and layout_height. Additional attributes are specific to each widget type. The document provides code snippets examples for different widgets and their attributes.
This document discusses widgets that can be used to build mobile applications. It identifies common widgets like TextView, EditText, Button, ImageView, Checkbox, RadioGroup and their uses. It explains that widgets are UI controls that allow users to interact with apps. All widgets have attributes like layout_width and layout_height. Additional attributes are specific to each widget type. The document provides code snippets examples for different widgets and their attributes.
This document discusses widgets that can be used to build mobile applications. It identifies common widgets like TextView, EditText, Button, ImageView, Checkbox, RadioGroup and their uses. It explains that widgets are UI controls that allow users to interact with apps. All widgets have attributes like layout_width and layout_height. Additional attributes are specific to each widget type. The document provides code snippets examples for different widgets and their attributes.
After studying this module, you as a future IT professional should be able to:
a. Identify the different widgets that can be utilized in building mobile applications b. Discover the uses of these widgets and utilize them on different layouts c. Classify the attributes and their possible values under each widget
On your first module, you have learned what is Android operating system, or simply Android. You also had the chance to get to know the versions of Android that you may have encountered, as well as their unique features that has been added every time a new version was released. Moreover, you also had a walkthrough with the installation of Android Studio, the software that we will be using to create your own Android application.
In this module, you will be discovering the different widgets that you can use in building your first mobile application. It includes TextView, EditText, Buttons and others. You will also familiarize yourself with the attributes that is associated with every widget to enhance your layout and making your application user- friendly.
Have you ever asked yourself, how do makers of mobile applications add those containers for you to be able to enter a text or even your passwords? How do those images appear inside your applications?
Widgets, also known as UI controls, are controls which users can use to interact with the mobile application. It can be buttons or text fields. As future IT professionals, these controls will be your friend in building mobile applications that will be used by millions of people.
All the controls that will be mentioned in this module, have the fundamental attributes namely layout_width and layout_height. These attributes commonly have the values match_parent or wrap_content. The value match_parent gets the size of the parent container of the control while wrap_content depends its size on the element inside the control. In some cases, these sizes can be modified depending on the requirement. Other than the values mentioned above, you can use values with the following units: dp, in, mm, pt, px, and sp. (e.g., 100dp, 175in)
TextView TextView is used to display text in the screen of the mobile device. In the picture above, the container that holds the string “Welcome to UCU-CITE” is a TextView. You can modify the size and color of the displayed text using the attribute textColor and textSize respectively.
Code Snippet for TextView:
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Welcome to UCU-CITE" android:textColor=”#000” android:textSize="35sp" />
EditText EditText is used to get an input from the user. It can be a text, number, a combination of the two, password and more. In the example given, the ID number, Name and Address are all EditText. The labels that are placed inside the EditText are called hints.
Button Button is used to perform an action or function upon clicking. In the example given, “REGISTER” is a button that can be clicked by the user after filling up the EditTexts above it. In order to add function for the button, onClick attribute is used while the value is needed in our java files.
ImageView is used to display an image resource. It can be a png, jpg, and other image resource files. On the other hand, ImageButton is simply a button with an image inside of the control instead of a text. The attribute src is used to reference an image file and onClick for its function.
CheckBox Checkbox can be used for selecting one or more in a given set of choices. It can be checked or unchecked depending on the user requirements. It can be pre-defined by using the attribute checked with a value of either true or false.
<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Orange" android:checked="false"/> RadioButton and RadioGroup RadioButton is much like a checkbox. It can be selected or unselected upon clicking.
On the other hand, if multiple RadioButtons are
inside a single RadioGroup, it will only allow 1 RadioButton to be selected at a time.
These are the following widgets or controls that can be used in creating your first mobile application. In addition, there are also other attributes that can be added to the xml codes above to further enhance the layout made in Android Studio. The next section will talk about these attributes.
1. layout_margin This attribute adds margin outside the control’s container where it is added. When it is used, it adds the value indicated in all the sides of the container. If you only need to add margin in a particular side, the following are commonly used: layout_marginTop, layout_marginLeft, layout_marginRight, and layout_marginBottom.
e.g. android:layout_margin="25dp”
1. padding This attribute adds padding inside the control. It is like adding margin but around the content of control be it a text or image.If you only need to add padding in a particular side, the following are commonly used: paddingTop, paddingLeft, lpaddingRight, and paddingBottom.
e.g. android:padding="10dp”
3. id This attribute functions as the unique identifier of the control. It is commonly used when adding functions to a specific button or EditText for you to be able to reference it in your Java code. It always starts with “@+id/”.
e.g. android:id=”@+id/txtName” or android:id=”@+id/btnRegister”
4. gravity This attribute changes the position of the content of a control. For example, a button has a text inside and you want to place that text at the inside bottom part of the button, you can use gravity.
e.g. android:gravity=”bottom”
5.layout_gravity This attribute changes the position of the whole control, not just the content, in relation to its parent container. For example, a TextView must be placed in the center of a container, you can use layout_gravity.
e.g. android:layout_gravity=”center”
So, these are the commonly used attributes that you may use when adding your widgets or UI controls to your mobile application. To see more attributes, you can browse it on your Android Studio and check it out.
Objective: To differentiate the UI controls and their uses Task: You are tasked to create a simple “layout” for account registration using Android Studio IDE. Make sure to use different widgets such as TextView, EditText, Button, RadioButton and ImageView. The field for your account registration should be First Name, Last Name, Email, Gender, Password, and Repeat Password (for Gender field, use RadioGroup widget e.g., O Male O Female). Create your own layout or design.
Note: Read the full instruction in Google Classroom.
Let us see if you can remember the main points raised in this lesson. Below is a summary of these points: • Widgets, also known as UI controls, are used for the users to be able to interact with the mobile application. They can be used to display text or images, as well as, accept input from the users.
• Commonly used widgets are TextView, EditText, ImageView, Checkbox, RadioGroup and more.
• All the controls have attributes specially, layout_width and layout_height which are mandatory in every control. In addition, there are also attributes specific only for that kind of control.
