How to develop a Graphical User Interface ( GUI ) application for an Android

Hello Friends,

Welcome you all in the Android Tutorial.

Today we will learn how we can develop a GUI application for an Android.

            To develop a GUI app for an android is very easy.

            There are two main things we need to think before creating any GUI application.

            1)        User Interface

            2)        Layout

           

            1) User Interface:-

                        What are the interfaces you are providing to the user as a part of your GUI application?

                        These UI (user interface) interacts with user directly.

                        User Interfaces are like buttons, text fields, list, radio-button etc.

                       

            2) Layout:-

                        The second important thing is how we are positioning the UI in our GUI app.

                        Like you want to put all the UIs in a linear format, vertical format or grid format etc.

                       

            In our Fist GUI application, we are going to use two UIs. They are text field and button.

            And layout we are going to use is Linear Layout.

           

                       

            To build a GUI application for an android we use View and ViewGroup Objects.

            Views are like UI widgets. Example button, textbox, radio button etc.

            ViewGroup are invisible containers. This defines how the views are laid out. Example in grid format or in a linear format, or like vertical format.

           

            Let's start with creating a new Project:-

           

            Step 1: Create a New Project

           

                        File --> New --> Android Application Project

                       Give "FirstGUI" as your application name.

                        and Press Finish.

           

Your "FistGUI" application has been created with default “BlankActivity".

                       

            Step 2: Create a Layout

           

                        Open the activity_main.xml file from the layout directory.

                        Replace the Relativelayout with the LinearLayout.

                        Add the "vertical" orientation.

                        Delete the TextView from the activity_main.xml file. We do not need    this in our current project.

                        So the modified activity_main.xml file will be looking like as follows:-

           Step 3:  Add User Interface widgets

           

                        Add a TextField. We will use it for “FirstName”.

                       

                        To create a user editable text field we use will use <EditText> element.

                        Add the following code into your activity_main.xml inside the LinearLayout.

  
                      Add another TextField. We will use it for “LastName”.

                        

            Let’s have a brief info of some contents:-

           

            a)        android:id: This provides a unique identifier for the view, which we can use to reference the object from the code. Example to read and manipulate the object.

           

                        @ sign is required when we are referring to any resource object from XML.

                        + sign before the resource type is needed only when we are defining a resource ID for a first time.

                       

                        When we compile the app, the SDK use the ID name to create a new resource ID in your project's gen/R.java.

                       

            b)        android:layout_width and android:layout_height:

                        We are not specifying any size for the width and height. We are using the "wrap_content".

                        So the textfield size only as big as needed to fit the contents.

                       

            c)         android:hint

                        We can put the default string to display when the text field is empty.

                        We can hardcode the default value or we can use “@string/first_name" value refers to a string resource defined in a separate file.

                       

       

        Step 4: Add the default string

       

            Open the strings.xml file from the /res/values directory

           Add the following string name, so that we can access it from the other files:-           

First Name
Last Name
Send

                       

            Step 5: Add a Button

           

                      Copy the following code int the activity_main.xml. The following code will add a button into your application.

                       

           

           

 Your final activity_main.xml /res/layout will look like as follows:-

           
Your final strings.xml /res/values will look like as follows:-

    FirstGUI
    Hello world!
    Settings
    First Name
     Last Name
    Send

           
Your "FirstGUI" application is ready, run it and enjoy it ...
Your application will look like as follows :---

              
Do not forgot to share !!!