Learning Android Application Development - Day 2

Hope you all are doing well, first of all thank you so much for reading my previous blog:

• Learning Android Application Development - Day 1

Today we will learn about the development of UI (user interface) for android applications using components provided by Android itself.

For 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 application:

• Layouts and widgets.
  
  
  
  
• 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 linear layout,

Linear layout: it is a layout which places one after other, it places objects or widgets either in row or in column and place them horizontal or in 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 a 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

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red"
    android:gravity="center_horizontal"
    tools:context="com.madhuram.loginapplication.MainActivity"
    tools:ignore="MergeRootFrame" >
    <TextView
        android:id="@+id/login_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="60dp"
        android:text="@string/login"
        android:textSize="20sp"
        android:textStyle="bold" />
    <LinearLayout
        android:id="@+id/layoutlogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_text"
        android:orientation="horizontal" >
        <TextView
            android:layout_width="74dp"
            android:layout_height="wrap_content"
            android:text="@string/username" />
        <EditText
             android:id="@+id/login"
             android:layout_width="148dp"
             android:layout_height="wrap_content"
             android:inputType="text" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/layoutpassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/layoutlogin"
        android:orientation="horizontal" >
        <TextView
            android:layout_width="74dp"
            android:layout_height="wrap_content"
            android:text="@string/password" />
        <EditText
            android:id="@+id/password"
            android:layout_width="148dp"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/layoutbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/layoutpassword"
        android:orientation="horizontal" >
        <Button
            android:id="@+id/login_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="46dp"
            android:text="@string/login" />
    </LinearLayout>
</RelativeLayout>

This code will create a UI for Login page and now we have to implement functionality of buttons and text fields in our java file or code.

The JAVA code for functionality of buttons and text fields is given in MainActivity.java file.

Strings.xml file:

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="app_name">Login Application</string>
        <string name="login">Log IN</string>
        <string name="username">User name</string>
        <string name="password">Password</string>
    </resources>

MainActivity.java

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity
{
    Button b1;
    EditText ed1;@
    Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        b1 = (Button) findViewById(R.id.signup_button);
        b1.setOnClickListener(new View.OnClickListener()
        {@
            Override
            public void onClick(View v)
            {
                Intent intent = new Intent(MainActivity.this, Login.class);
                startActivity(intent);
            }
        });
    }
}

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"

 

 

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