T.Y.BSc(I.

T) SEM-VI Maharashtra College Advanced Mobile Programming

Practical 5
Programming UI elements
AppBar, Fragments, UI Components

a) Demonstration of Application Bar

 Create a new project

 Change the following lines in styles.xml
 To change styles.xml goto

ProjectName -> App -> Src -> Main -> Res -> values-> styles.xml

The default line is

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

Change to

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Go to, ProjectName -> App -> Src -> Main -> Res -> Layout
Right Click on layout and add a new file “toolbar.xml”
Go to toolbar.xml and Change the default layout with this line

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 1

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:elevation="4dp"
>
</androidx.appcompat.widget.Toolbar>

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 2

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

Now go to main_activity.xml and include the toolbar.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />

<include
android:id="@+id/toolbar"
layout="@layout/toolbar"

/>

</RelativeLayout>

Now go to MainActivity.java and write the following code

package com.example.profshahidansari;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar tbar=findViewById(R.id.toolbar);
setSupportActionBar(tbar);
}}

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 3

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

Output

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 4

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

b) Demonstration of UI Components(TextView,EditText,Button)

TextView :Label Field

In Android, TextView displays text to the user
and optionally allows them to edit it
programmatically. TextView is a complete text
editor, however basic class is configured to not
allow editing but we can edit it.

EditText: Input Field

In Android, EditText is a standard entry widget in
android apps. It is an overlay over TextView that
configures itself to be editable. EditText is a
subclass of TextView with text editing
operations. We often use EditText in our
applications in order to provide an input or text
field, especially in forms. The most simple
example of EditText is Login or Sign-in form.

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 5

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

Button
In Android, Button represents a push button. A
Push buttons can be clicked, or pressed by the
user to perform an action. There are different
types of buttons used in android such as
CompoundButton, ToggleButton, RadioButton.

Calculator Application

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:stretchColumns="1">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<EditText
android:id="@+id/et1"
android:layout_width="match_parent"
android:layout_height="70dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Input1" />

<EditText
android:id="@+id/et2"
android:layout_width="match_parent"
android:layout_height="64dp"
android:ems="10"
android:inputType="textPersonName"

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 6

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

android:text="Input2" />

<Button
android:id="@+id/btnAdd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Addition" />

<Button
android:id="@+id/btnSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtraction" />

<Button
android:id="@+id/btnMult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Multiplication" />

<Button
android:id="@+id/btnDiv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Division" />

<Button
android:id="@+id/btnClear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Clear" />

<TextView
android:id="@+id/tv1"
android:layout_width="match_parent"
android:layout_height="63dp"
android:text="Output"
android:textColor="@android:color/background_dark"
android:textSize="18sp"
android:textStyle="bold"
app:fontFamily="casual" />
</LinearLayout>
</LinearLayout>

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 7

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

Main_Activity.java

package MaharashtraCollege.example.profshahidansari;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.*;

import static android.view.View.*;

public class MainActivity extends AppCompatActivity {

EditText t1,t2;
Button b1,b2,b3,b4,b5;
TextView tv1;
int n1=0,n2=0;
String s1,s2;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

t1 = (EditText) findViewById(R.id.et1);
t2 = (EditText) findViewById(R.id.et2);

b1 = (Button) findViewById(R.id.btnAdd);
b2 = (Button) findViewById(R.id.btnSub);
b3 = (Button) findViewById(R.id.btnMult);
b4 = (Button) findViewById(R.id.btnDiv);
b5 = (Button) findViewById(R.id.btnClear);

tv1 = (TextView) findViewById(R.id.tv1);

b1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 8

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

try {
String s1 = t1.getText().toString();
String s2 = t2.getText().toString();
n1 = Integer.parseInt(s1);
n2 = Integer.parseInt(s1);
int sum = n1 + n2;
tv1.setText("Addition ="+sum);
}
catch (NumberFormatException e)
{

}
});

b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

try {
String s1 = t1.getText().toString();
String s2 = t2.getText().toString();
n1 = Integer.parseInt(s1);
n2 = Integer.parseInt(s1);
int sub = n1 - n2;
tv1.setText("Subtraction ="+sub);
}
catch (NumberFormatException e)
{

}
});
b3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

try {
String s1 = t1.getText().toString();
String s2 = t2.getText().toString();
n1 = Integer.parseInt(s1);
n2 = Integer.parseInt(s1);
int m = n1 * n2;
tv1.setText("Multiplication ="+m);

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 9

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

}
catch (NumberFormatException e)
{

}
});

b4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

try {
String s1 = t1.getText().toString();
String s2 = t2.getText().toString();
n1 = Integer.parseInt(s1);
n2 = Integer.parseInt(s1);
int d = n1 / n2;
tv1.setText("Division ="+d);
}
catch (NumberFormatException e)
{

}
});

b5.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {

t1.setText(" ");
t2.setText(" ");
tv1.setText(" ");

}
});
}
}

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 10

T.Y.BSc(I.T) SEM-VI Maharashtra College Advanced Mobile Programming

Prof. Ansari Mohd. Shahid(7977-079-345 / 9821-77-1054) Page 11