Android application that uses GUI components, font and colors - 01

Summary

This script offers a step-by-step guide to developing a basic Android application using Android Studio. It covers creating a new project, selecting an 'Empty Activity', setting the app name, package name, and choosing Java as the programming language. The tutorial then delves into designing the GUI with components like TextView and Buttons, adjusting font size and color. It also explains writing Java code for button actions, such as changing text size and color, and concludes with running the application on an emulator, showcasing the dynamic text resizing and color-changing features.

Takeaways

• 📱 The script is a tutorial on developing an Android application using GUI components for font and color customization.
• 💻 The process begins by opening Android Studio and creating a new project with an 'Empty Activity'.
• 🔍 The user is guided to name the application, set a package name, and choose Java as the programming language.
• 📍 The tutorial specifies selecting the minimum SDK version, which is API 16 for Android 4.1 Jelly Bean.
• 📁 The script explains the structure of an Android application, highlighting the importance of Java files and XML files.
• 📝 It details the anatomy of the 'activity_main.xml' file, where the layout design of the application is created.
• 🔄 The tutorial demonstrates adding a TextView and two Buttons to the layout for changing font size and color.
• 🖌️ The script describes how to modify the TextView content and the purpose of each button in the application.
• 🔧 The Java file 'MainActivity.java' is where the functionality for the buttons is implemented, including changing font size and color.
• 🔄 The 'setOnCLickListener' is used to define actions for button clicks, cycling through font sizes and colors.
• 🎥 The final part of the script shows the execution of the application in an emulator, demonstrating the dynamic changes in font size and color.

Q & A

What is the first step in developing an Android application using Android Studio?

The first step is to open Android Studio and wait for it to load completely.

How do you create a new project in Android Studio?

You create a new project by clicking on the 'File' menu, then selecting 'New' and 'New Project'.

What types of activities can be selected when creating a new Android project?

Activities such as Basic Activity, Bottom Navigation Activity, Empty Activity, and Google AdMob Ads Activity can be selected.

What is the name of the application created in the script?

The application is named 'ShwApp'.

What is the package name automatically created for the 'ShwApp' project?

The package name created is 'com.example.shwap1'.

What programming language is used to develop the application in the script?

The application is developed using Java.

What is the minimum SDK version selected for the application in the script?

The minimum SDK version selected is API 16, which corresponds to Android 4.1 Jelly Bean.

What are the two main types of files involved in an Android application according to the script?

The two main types of files are Java files and XML files.

How does the script describe changing the font size of a TextView in an Android application?

The script describes using a button with an OnClickListener that increments a font size variable and applies the new size to the TextView.

How is the font color of a TextView changed in the application developed in the script?

The font color is changed by using another button with an OnClickListener that cycles through different color values stored in a variable.

What is the purpose of the 'setOnCLickListener' in the context of the Android application developed in the script?

The 'setOnCLickListener' is used to define actions that occur when a user clicks on the buttons, such as changing the font size or color of the TextView.

How does the application handle the maximum font size before resetting?

The application sets an initial font size of 30 and increases it by 5 with each button click until it reaches 50, at which point it resets back to 30.

What happens when the user clicks the 'Change Font Color' button in the application?

Clicking the 'Change Font Color' button cycles through a sequence of colors (red, green, blue, etc.) for the TextView based on the value of a variable that is incremented with each click.

How can the user execute the Android application program developed in the script?

The user can execute the program by selecting a device and clicking the 'Run' button in Android Studio, which opens an emulator to display the application.

Outlines

00:00

🛠️ Setting Up Android Studio and Creating a New Project

The script begins by introducing the process of developing an Android application using GUI components, font, and color customizations. It instructs the user to open Android Studio and wait for it to load. Once open, the user is guided to create a new project by selecting 'File' and then 'New Project'. The project setup includes choosing an activity type, in this case, an 'Empty Activity', and naming the application 'ShwApp'. The script also covers setting the package name, choosing the development language (Java in this instance), and selecting the minimum SDK version required for the app. The user is advised to wait for the project to build completely before proceeding.

05:00

📱 Designing the User Interface with GUI Components

This paragraph delves into the design aspect of the Android application. It explains how to navigate the Android Studio interface to include GUI components such as a TextView and Buttons. The user is shown how to drag and drop a TextView onto the layout and how to modify its content. Additionally, it details the process of adding two buttons to the application, one for increasing font size and another for changing font color. The paragraph emphasizes the importance of the design layout and how to switch between code and design views in Android Studio.

10:02

✍️ Writing Java Code for GUI Interaction

The third paragraph focuses on writing the Java code that will handle the functionality of the GUI components. It starts by outlining the necessary package imports and the creation of a class named 'MainActivity'. The class extends the 'Activity' class and initializes variables for font size and color. The 'onCreate' method is discussed, which sets up the layout of the application. The paragraph then describes how to create objects for the TextView and Buttons, and how to set up 'OnClickListeners' for the buttons to change the font size and color when clicked. The code snippet provided demonstrates the logic for incrementing font size up to a maximum value before resetting it, and cycling through a predefined set of colors for the text.

15:02

🎬 Executing and Testing the Android Application

The final paragraph of the script describes the execution and testing process of the Android application. It instructs the user to select an emulator and run the application. The user is shown how the application will respond to button clicks, changing the font size up to a maximum and then resetting it, as well as cycling through different text colors. The paragraph concludes by demonstrating the successful execution of the program, with the text 'PEACE' dynamically changing its font size and color as the user interacts with the buttons.

Keywords

💡Android Studio

Android Studio is the official integrated development environment (IDE) for Android app development, based on IntelliJ IDEA. It provides a range of tools for developers to design, code, debug, and test their applications. In the video's context, Android Studio is used to initiate the creation of a new Android application project, emphasizing its role as the foundational tool for app development.

💡GUI Components

GUI stands for Graphical User Interface, and components refer to the visual elements that make up the interface, such as buttons, text fields, and labels. In the script, GUI components are essential for designing the user interface of the Android application, allowing users to interact with the app through visual elements like buttons to change font size and color.

💡Font and Colors

Font refers to the typeface and size used in text, while colors pertain to the hues used in the graphical elements of a design. The video script discusses how to change these attributes within an Android app to customize the appearance of text. For instance, it explains how to increase the font size and change the font color through buttons, which are GUI components.

💡New Project

In Android Studio, a 'New Project' is the starting point for creating an Android application. It involves setting up the initial configuration for the app, including the name, package name, and other preferences. The script describes the process of creating a new project named 'shw app' as an example of starting an Android application development.

💡Activity

In Android app development, an 'Activity' represents a single screen with a user interface. The script mentions selecting an 'Empty Activity' during the project creation process, which is a basic template for starting an app without any predefined UI elements, allowing developers to build the interface from scratch.

💡XML

XML, or Extensible Markup Language, is used in Android development to define the layout and UI elements of an application. The script refers to 'activity_main.xml', which is an XML file where the layout for the main screen of the app is designed, including the placement of a TextView and Buttons.

💡Java

Java is a programming language used in Android development for writing the app's logic and functionality. The script specifies that the application will be developed using Java, and it outlines the process of writing Java code to handle button clicks and change the font size and color in the app.

💡Minimum SDK

The 'Minimum SDK' version indicates the lowest version of the Android operating system that the app is compatible with. The script mentions setting the minimum SDK to API 16, which corresponds to Android 4.1 Jelly Bean, determining the app's accessibility to older Android devices.

💡TextView

A 'TextView' is a GUI component in Android used to display text on the screen. In the script, a TextView is added to the app's layout to show the string 'peace', and its font size and color can be dynamically changed using buttons, demonstrating the app's interactive capabilities.

💡Button

A 'Button' in Android is a GUI component that users can tap to trigger actions or events within the app. The script describes adding two buttons to the app's layout, one for changing the font size and another for changing the font color, showing how to assign functionality to UI elements.

Highlights

Introduction to developing the first Android application using GUI components, font, and colors in Android Studio.

Opening Android Studio and waiting for it to load to start a new project.

Creating a new project and selecting an 'Empty Activity' for the application.

Naming the application 'Shw App' and automatically generating the package name.

Choosing Java as the programming language for the Android application development.

Setting the minimum SDK to API 16, Android 4.1 Jelly Bean, for application compatibility.

Exploring the anatomy of an Android application with its folders and files.

Understanding the role of 'AndroidManifest.xml' and 'activity_main.xml' in the application structure.

Designing the application layout using 'activity_main.xml' to include GUI components.

Inserting a TextView and setting its content to 'PEACE' in the application interface.

Adding two buttons for changing font size and color within the application.

Customizing button names to 'Change Font Size' and 'Change Font Color' for clarity.

Writing Java code to handle button clicks and update TextView properties.

Using 'setOnCLickListener' to define actions for the 'Change Font Size' button.

Implementing logic to cycle through font sizes upon button clicks.

Using a switch statement to change the font color based on the button click count.

Resetting the font size and color to default values after reaching maximum values.

Executing the Android application to demonstrate the dynamic change of font size and color.

Closing remarks and acknowledgment of the completed Android application demonstration.

Transcripts

the first android application program

is develop an application that uses

gui components font and colors

i'll show how to develop this android

application

for this first we need to open the

android studio

wait for few minutes until this android

studio window were opened

in this android studio first we have to

create a

new project for that click on

file menu in that select new

and new project click on this new

project an activity window is

opened this activity window contains

many activities like basic activities

bottom navigation activity empty

activity

and google admob ads activity

google map activity like this there are

many different types of

activities are they among these

activities

i'll select empty activity so

click on this empty activity then click

on

next button

and name window is opened and thus

first we need to specify the name of the

application i'll give the application

name

as shw app

one okay so after this automatically the

package name is created

so the package name is

com.example.shwap1

if you want to store this application in

a different location you can change this

location

otherwise you have to use this default

location

and the next one is the language so we

can develop the

android application using java language

or kotlin language

here i want to develop my application in

java

so i have selected java

next one is minimum sdk which indicates

minimum version of android that is

required for our

android application for the execution

here

minimum version that i have selected is

api

16 android 4.1 jdb

next you just click on finish

so now wait till the project gets

completely

built here it is still it is

loading so you should wait till this

project

gets completely built

just maximize this new project screen

now in this window on left panel

so we have see so many folders so

like manifest folder right

so which contains androidmanifest.xml

file

and java folder so this java folder

which contains the

java java files right and then resource

which contains drawab drawable for

folder

and layout folder which contains

activity main.xml

and right so then like that so there are

so many folders you can see on this

left panel so this is the

anatomy of your android application

your android application contains two

files

one is java file another one is xml file

see

this java file which is actually stored

in the folder

java within that so we have a project

name as

com.example.shwf1

under this where so this main

activity.java file is

get stored and another file so the other

file is

activity main dot xml file so this is

the

layout file this layout file which is

stored under the directory

stored under the directory layout so

here this is

activity main dot xml file

in this activity main xml file

we will do all our design part

on right hand side corner you can see

code split

and design see so this is the design

layout

so if you want to just see only the

design layout

you just click on the design layout you

can see the design layout

along with this palette panel

in case if you want to see that code

activity main xml code

and also the palette panel and also this

design so you just click on split if you

just want to see the code of this

activity main.xml you just click on

quote next i'll show

how to include or how to embed that gui

components

and also how to change the font size and

also

font color so for that i just

click on this design so here so i

for this i'll just include our insert

two buttons

okay so one button it used to increase

the font size

okay another button which is used to

change the font color of the

text mean so first

i want to insert a textview so

i'll just select this textview

okay so then i just drag and drop that

textview okay so here if you want to

change the content in the text view

okay so you just click on this

split see here and text wave is

added right

here a text weep is added see

where so this text is which indicates

the

the text that should be displayed on our

application i'll just change this text

view or the

message or the string that i want to be

displayed on the

application as free sc

i'll just change it like this okay so

now you can see it in the application

i'll just maximize this

okay just minimize this palette button

or you just click on

design see okay you can see pac

here okay

i'll just maximize this okay

see pac is displayed here

now i'll just minimize it to normal size

next i want to add two buttons

okay see initially

you are the activity main xml which

contains only the text view

so now i want to insert two buttons to

my

application so for that click on design

and here see here in the palette panel

text

buttons widget layouts are there you

just click on buttons and then

just to drag the button this is the

first button

and drag i want to use one more button

so that is the

second button okay so now

now i want to change this button name so

one button is used to change the font

size

another button is used to change the

font

color for that we just click on split

right see here so button one

so this is the button where its id is

button here this is the name of this

button is button only

i'll just change this to

change

font size i want to use

this button to change the font size

next second button words id

okay i want to use this button to change

the

color

okay so now see here the button name is

changed to change

font size and also the change color

next see this is the design part

now the design part is over have

included or inserted a textview

and over its name as or the textview

contains the string p-e-a-c-e

and i have inserted two buttons the

first button for changing the font size

either its id is button only and the

second button

is used to change the color the of the

string that is displayed in the

text b now

next we will move on to the java file

here we need to write the code for

the buttons and also the text field

means what

on clicking the button what should be

the next action

or on clicking the button first button

what is the next action

the next action should be that change

the string that is displayed in the text

field

that change the font size of the string

that is displayed in the text field

what's the action when i click on the

second button button too

so that will change the text color that

is displayed in the

text beam next

i will show how to write the java file

so for that click on this activity

main activity dot java file

have already written a program i just

copied that program to this

java okay see

here so initially so the first statement

in your java file must be the package

you already know the package name of our

android application

that is com.example.shwf1

here i have imported many packages like

activity packages

graphics bundle bu button and also

textview packages

that are need required to develop our

android application

to create this android application so

first

create a class okay where the class name

is main activity

so that's why your java file name should

be main activity dot

java here if you have changed the name

so this

name is also changed so here the main

your java file

which extends the predefined class

activity

and here have taken two

variables one is of type integer either

one is of type

float here the integer variable is

choice that is ch it is initialized to 1

and have taken one more variable font so

it is initialized to

the value 30. so here the choice

variable is used to

change the font color of the text that

is displayed in the text view

and this fourth variable is used to

change the

font size of the text that is displayed

in the

textview when we run the application

so first this oncreate method is called

automatically

so this oncreate method which in turn

called the

setcontentview method so which actually

create the

layout for our application

our application which contains one text

feed and

two buttons so that's why see here first

you have to create the

object for the text field and also the

button here

so t is an object of the class text wave

and then i have created an object b1

of the class button and also b2 for the

class

button right because here so this

because now our application it has one

text field

and also two buttons see this t which

refers to the

text view of our application the button

b1

which refers to the button see here what

is the button id

button id is button itself see here now

so b1 button so the button id is

this button right so therefore b1 which

refers to the

button change font size button similarly

i have created another object b2 which

refers to the button

where its id is button to see the button

id

is button2 so this is nothing but the

button

that is used to change the color so

therefore

so here in our application i have used

one text sweep

and two buttons b1 and b2

next you are going to learn so what

happens when i click on these

buttons when i click on the button

change font size button and i click on

this change font size button

so what i do it change the font size of

the text

that is displayed in the text view or if

you click on the

button change the color what do you do

it just

change the color of the text that is

displayed in the

text view so now

i'll show the code java code see here

set on click listener interface this is

used

see here when you click on the button

one

so that is change font size button so

when you click on that

button the font size will be changed so

here

have taken initial font size as 30 when

you

click on that font size button right it

changes this font size button

of the sorry it changes the font size of

the text

initially the font size is 30 next time

it becomes 35

because 5 is added to this variable font

again you click on the same button font

says that

in again increase the font size to 40 45

like that see when the font says is

reached the

value 50 means what when the font size

of the text

becomes 50 again it is reset to 30

again if you click on the same button

change font size button

again so the font size will change to 35

40

45 50. when it reaches 50 again this

font size will be reset to 30.

similarly i have used one more button

what is that change

font color so here initial for that have

chicken the variable

ch is equal to one see here so again

on the b2 button you just call set on

click listener when i click on that

button

change font color right so if initial

value for ch is one means initially the

text color should be

right again if we click on that see

again so if ch is equal to one the font

color should be

red again cutter almost out of switch

next ch will be incremented by

one right means what again if you click

on

the same button change font color button

so then the text ch value becomes to

means what font color will be changed to

green

again the ch value is incremented by one

means ch becomes three

again if you click on the same button

again ch value is

three so therefore the third choice is

the

font color will be set to the blue color

so like this if you again click on the

same button the font color will change

to see on

again if you click on that button the

font color is changed to yellow

next magenta when the value reaches

seven

again the ch value reaches reset it to

one means what if you again click on the

same button

again the falses will be changed to red

again if you click on the same button

green

like that it goes on

now i'll show how to execute this

program

okay so for that say here so

you have to select the device here i

have selected

so this fixed the api 27 next

so click on this run button so

when i click on this run button okay

an emulator would be opened see

here an emulator is open when i click on

this

change font size button the font size of

the text

will be changed see when i reach its

maximum size right this is size 50

it is reset to the initial size

30. next the other button is

change the color of the text when i

click on this button

the color of the text peac will be

changed

see right like this the color of the

text will be

changed again it will be reset to the

red

color so like this we execute the

android application program

thank you