The graphic components correspond to the elements that will allow the user to interact with the system, when we talk about GUI we refer to the graphical user interfaces, therefore these interfaces are built through graphic elements such as buttons, menus, icons, text fields, labels, etc. text among others, a GUI combines the visual design and the events associated with that design, so if we add a button, we must program the event associated with that button when it is pressed by a user.
As mentioned, let's focus on the graphical components that are used from XML files, let's see some of the properties mentioned above.
Basic properties.
Let's see some basic properties used in graphic components, these can be applied to any component regardless of its type, because as mentioned all components are Views so they share the same properties, some of the most used are:
android: id.
Very important property because it allows defining an identifier for the control, this property is assigned to any view, for example if it is assigned to a data entry field then this will be used to capture user information, so we must use a differentiating name it is clear.
The correct way to generate an identifier is as follows:
android:id="@+id/miTextField"
The symbol @+id/ means that a new identifier is being generated, this will make the class R. from the project's gen package, create a reference to this object so that it can later be manipulated by code.
In the example, the identifier “myTextField” for the component.
android:layout_width.
Defines the width associated with the view, it is a mandatory property and its value can be defined in absolute values or by indicating one of the following two values:
-
wrap_content (It occupies the space according to its content)
-
match_parent (Occupies all available space)
Example:
android:layout_width="match_parent"anyandroid:layout_width="290dp"
android:layout_height.
Defines the height associated with the view, it is a mandatory property and its value can be defined in absolute values or indicating one of the two following values:
-
wrap_content (It occupies the space according to its content)
-
match_parent (Occupies all available space)
Example:
android:layout_height="wrap_content"anyandroid:layout_height="58dp"
android:layout_margin.
Defines a margin for the component, allowing to establish a space above, below and on its sides, as variants in case you want to give independent spaces, it can be done using the properties marginLeft, marginRight, marginTop or marginBottom (or all)
Example: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
android: tip.
This property allows text to be displayed in the control as a help while the user has not yet entered information. (Preferable over the text property)
Example: android:hint="Enter the name"
android:inputType.
It determines what type of input will be allowed for the text box, this allows for some sort of data validation and also tells the operating system what type of (virtual) keyboard to use.
Among the options that we can associate with this property are some such as:
- Text
- number
- texture
- text password
- telephone
- meeting
- TextEmailAddress
There are many other options that can be used depending on the need.
Example: android:inputType="number" | android:inputType="textEmailAddress"
android:textSize.
Defines a size for the text to be displayed on the screen, units of measurement must be taken into account where sp is used for texts
Example: android:textSize="25sp"
android:styletext.
Defines a style for the text, being able to define the text as normal, bold, italic (or both).
Example: android:textStyle="bold" | android:textStyle="italic" | android:textStyle="bold|italic"
android:textColor.
Defines a color for the text, being able to add a color from the “colors” properties file or a hexadecimal value
Example: android:textColor="@color/teal_700" | android:textColor="#9C27B0"
android:backgroundTint.
Defines a background color for the component, you can also get the color from the “colors” properties or a hexadecimal value
Example: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
android:text.
Defines the textual content associated with the view. Although its value can be assigned directly, it is highly recommended to use the strings file available in the resources folder.
Example: android:text="Bienvenidos" | android:text="@string/title"
This property is common in views that display text in the device's interface. The following screen shows the strings.xml resource file where different values for the texts are added
and later these values are accessed from the views
After clearing the previous properties, let's see what the basic graphic components are.
Button.
These correspond to the basic buttons we know, it just shows a button with its internal text and a defined margin.
The button would fulfill the basic function of waiting for an event when pressed.
toggle button
The ToggleButton type corresponds to a type of button that can be kept in 2 possible states, pressed or not pressed, for this not only a single text property is defined, but 2 depending on the state it has at the moment, using the properties of the android : textOn and android:textOff.
Like traditional buttons, the ToggleButton can be programmed to respond to the click event, but you probably just need to know what state it's in. This can be done by consulting the isChecked() method, which returns the value true in the event that is pressed and false otherwise.
commute
This control can simulate a switch very similar to how ToggleButton works, but with a different visual appearance.
Remember that depending on the Android version we are using, the visual appearance of our components can change, in this case the Switch controller for Android versions 5.0 and higher would look like this:
ImageButton
This type of button allows you to link an image to it to be shown to the user instead of a text as is usual, for this we can take the image from the /res/drawable folders and load it using the android:src property, in this case we will use an image directly from Android resources.
TextView
These correspond to the basic text labels that are shown to users, these in other languages are known as labels and allow displaying a text associated with the android:text property, these labels have other properties that allow you to manipulate their size, background color, color and font type, style, etc.
edit text
The Android EditText view is equivalent to ASP and C# Textbox or JAVA JTextField, it is a control that allows capturing the text typed by the user at runtime.
selection box
The checkbox control is used to check or uncheck options in an application. The way to define it in the interface and the properties available for its manipulation by code are analogous to those commented in the ToogleButton control.
This control inherits from the TextView control, so all the formatting options already mentioned for this control are also valid for the checkBox.
In the application code, you can check if this control is selected or not through the isChecked() method that returns the value of TRUE if you were selected or false otherwise, you can also use the setChecked(value) method to set a specific state for the control, where value TRUE would be for selected and false by not selected.
The event that is normally programmed for this control and that is executed every time its state changes (selected / not selected) is onCheckedChanged.
radio button
Like the CheckBox control, the RadioButton serves to check or uncheck a given option, the difference is in the type of selection you want to make. RadioButtons are normally used in groups to define a set of options from which you can only select one, i.e. each option is mutually exclusive, so when selecting an option the one that was previously selected will automatically be unchecked. These groups are defined by the RadioGroup element, which in turn will contain all the RadioButton elements that represent the options.
RadioGroups can set the android:orientation property to “Vertical” or “Horizontal” to determine how the RadioButtons it contains will be ordered.
The RadioButton, in turn, in addition to width and height, must define the android:text property to associate the text of the option represented and android:id to associate a code to the control so that it can be manipulated from the application's logic.
To manipulate the control from the application logic, different methods can be used, among which we find check(I would go) which is used to set the identified radiobutton with the id that is passed as a parameter as selected, the clearCheck() method is used to uncheck all the radiobuttons in the group and the getCheckedRadioButtonId() method is used to get the id of the radiobutton that is within the selected group or the value of -1 if no item is selected.
The most important event of this control is also the onCheckedChanged, which is triggered when an element of the group is selected (remember that the selection of an element of the group indicates the deselecting of another one).
And that's it, these are some of the basic graphic components that we will use throughout the course, in the next posts we will continue with other components or layouts.
It may also interest you.
Is there anything you want to add or comment about this entry? feel free to do….And if you liked it... I invite you to share y Subscribe by clicking on the “Join this site” button to hear more posts like this one 😉