Introduction

Hope you all are doing well, first of all, thank you so much for reading my previous blog:
Today we will learn about the development of UI (user interface) for android applications using components provided by Android itself.
For the development of UI Android provides “Widgets” for developing the desired interface.
All the widgets created by XML files and we can use them in the Android User Interface.
Here I am explaining how many types of widgets provided by android and how to use them in android layout or XML file.
Widgets
  1. Palin text view
  2. Large text
  3. Medium text
  4. Small text
  5. Button
  6. Small button
  7. Radio button
  8. Checkbox
  9. Switch
  10. Toggle button
  11. Image button
  12. Image view
  13. Progress bar(Large)
  14. Progress bar(Normal)
  15. Progress bar(Small)
  16. Progress bar(Horizontal)
  17. Seek bar
  18. Rating bar
  19. Spinner
  20. Web view
Here are some other layouts and widgets provided by Android for use in the application
  • Layouts and widgets.
    text fields
  • So using these widgets we can make our UI more user friendly and can make amazing applications.
  • Today we will learn how to use these widgets in XML file and how to work with them.
XML files are basically used for designing UI in Android and XML files have some predefined tags.
With the help of these tags, we have to first create a layout for placing our widgets on it and types of layouts are given in the images.
Here I am using a linear layout,
Linear layout: it is a layout which places one after another, it places objects or widgets either in a row or in the column and places them horizontal or in a vertical manner.
Here I am creating a login page with the help of linear layout,
I will use two text fields and one-two buttons for creating the attractive UI. We can also use Background images.
Start here,
  1. In your Layout folder create an XML file named activity_main.xml.
  2. We have already MainActivity.java file in our JAVA folder.
  3. Start placing this code in activity_main.xml.
  4. Every layout should have a unique id so that we can access them.
  5. All the strings should be defined in “\MyApplication\app\src\main\res\values” path having an XML file named Strings.xml.
Code is here
  1. <RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:id="@+id/container"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:background="@color/red"
  8. android:gravity="center_horizontal"
  9. tools:context="com.madhuram.loginapplication.MainActivity"
  10. tools:ignore="MergeRootFrame" >
  11. <TextView
  12. android:id="@+id/login_text"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:layout_marginLeft="60dp"
  16. android:text="@string/login"
  17. android:textSize="20sp"
  18. android:textStyle="bold" />
  19. <LinearLayout
  20. android:id="@+id/layoutlogin"
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:layout_below="@id/login_text"
  24. android:orientation="horizontal" >
  25. <TextView
  26. android:layout_width="74dp"
  27. android:layout_height="wrap_content"
  28. android:text="@string/username" />
  29. <EditText
  30. android:id="@+id/login"
  31. android:layout_width="148dp"
  32. android:layout_height="wrap_content"
  33. android:inputType="text" />
  34. </LinearLayout>
  35. <LinearLayout
  36. android:id="@+id/layoutpassword"
  37. android:layout_width="wrap_content"
  38. android:layout_height="wrap_content"
  39. android:layout_below="@+id/layoutlogin"
  40. android:orientation="horizontal" >
  41. <TextView
  42. android:layout_width="74dp"
  43. android:layout_height="wrap_content"
  44. android:text="@string/password" />
  45. <EditText
  46. android:id="@+id/password"
  47. android:layout_width="148dp"
  48. android:layout_height="wrap_content"
  49. android:inputType="textPassword" />
  50. </LinearLayout>
  51. <LinearLayout
  52. android:id="@+id/layoutbutton"
  53. android:layout_width="wrap_content"
  54. android:layout_height="wrap_content"
  55. android:layout_below="@+id/layoutpassword"
  56. android:orientation="horizontal" >
  57. <Button
  58. android:id="@+id/login_button"
  59. android:layout_width="wrap_content"
  60. android:layout_height="wrap_content"
  61. android:layout_marginTop="46dp"
  62. android:text="@string/login" />
  63. </LinearLayout>
  64. </RelativeLayout>
This code will create a UI for the Login page and now we have to implement the functionality of buttons and text fields in our java file or code.
The JAVA code for the functionality of buttons and text fields is given in the MainActivity.java file.
Strings.xml file
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <string name="app_name">Login Application</string>
  4. <string name="login">Log IN</string>
  5. <string name="username">User name</string>
  6. <string name="password">Password</string>
  7. </resources>
    MainActivity.java
    1. import android.app.Activity;
    2. import android.content.Intent;
    3. import android.os.Bundle;
    4. import android.view.View;
    5. import android.widget.Button;
    6. import android.widget.EditText;
    7. public class MainActivity extends Activity
    8. {
    9. Button b1;
    10. EditText ed1;@
    11. Override
    12. protected void onCreate(Bundle savedInstanceState)
    13. {
    14. super.onCreate(savedInstanceState);
    15. setContentView(R.layout.activity_main);
    16. b1 = (Button) findViewById(R.id.signup_button);
    17. b1.setOnClickListener(new View.OnClickListener()
    18. {@
    19. Override
    20. public void onClick(View v)
    21. {
    22. Intent intent = new Intent(MainActivity.this, Login.class);
    23. startActivity(intent);
    24. }
    25. });
    26. }
    27. }
    So this is the whole code which will create an attractive login page for your android application,
    You can also use background images. Just place them into the resources folder and then you can access by applying this simple code, suppose you have “bg.jpg” file -
    android:background="@drawable/bg"

    Summary

    Thank you for reading. Hope you enjoyed learning android. Next time, I will be back with something new about Android.
    Keep learning. Happy coding!