In the entry about creating the first project on Android, then we saw how to create our basic application, we reviewed the structure of the project and different concepts like SDK, Manifest and the activities and their lifecycle, now we will continue modifying the current project in order to Go deeper into app creation.
As mentioned, we are going to modify the application created in this entry where we built the first Android project, we will stay there on this screen
there we can see that the default application creates a TextView component with the text “Hello World”, from the Split view. (If at this point you don't know how to build the app, I recommend that you review the entry mentioned above.)
being here, we are going to modify this view by adding new components, if then we go to the design view, we can modify the screen to our liking, in this case we are going to create the following interface.
As we can see, we have added a PlainText component that actually corresponds to an edit field or that can have properties such as plain text, password, Phone, Mail among others, in the same way the defined Layout allows us to modify the size of the components and assign a relative position, in this case the text field has a position relative to the title's textView.
If we go to the Split view we will see the generated xml code and from here we can modify the properties manually, in this case we have added a color to the title and a size of 25sp, note that each component has an id property, as well as properties for control the placement of the component on the screen.
We found other components like tip which corresponds to a placeHolder which is displayed while the field is empty, other properties can be added in the same way to style the component.
Now a component of type is added which also has the id property which is relative to the text field component, for this case we modify the identifier.
Application Logic.
To carry out the logical and information processing, we go to the MainActivity.kt class, from there we get the graphic components through their id using the findViewById() method.
We added the button's click event and created a function called onClick() (Can be called in any way)
In this function, logic is added to capture the value of the text field, which is referenced in the same way as the button, but in this case, creating a component of type EditText that references the id of the text field.
Subsequently, the field value is obtained and added to a String variable that is then presented in a Toast type component that allows the display of a temporary message on the screen.
When we run the application, the emulator starts and we can test the system by adding the username and pressing the “enter” button, we see how the Toast is displayed, which lasts for a few seconds.
After that, we modify the screen by adding another TextView component without text, which will serve to display the information of the typed name but now directly on the screen.
To carry out this logic, we go back to the MainActivity.kt class and in the function we reference the EditText component with the assigned id and then send the message we want to display.
Later we launch the application again and we get the following result.
Another alternative to capture the data is to declare the components globally, thus avoiding having to declare them in each function:
Important to use!! to prevent you from having null references.
Observation:
In lines 11 and 12 nullsafety is used, this is a kotlin feature that allows controlling null values within the application, preventing it from loading the popular NullPointerException, we cannot assign null values directly, but this way when we indicate EditText? we are telling the compiler that this field can have a null reference and allow it to be processed.
in lines 26 and 27 use !! to tell the compiler not to check if the value is null and therefore it can compile without problems, but if it is null, throw the exception in the console, in case we know that a null value can arrive and we still want to process
Another recommended alternative would be to make safe calls, so when you try to call the object, if it is null, the exception will not be thrown, but the null value will be stored without terminating the process, that's why the variable must be nullable for it to compile correctly .
And that's it, with that we have our first functional application with data capture and button events.
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 😉