Archdiocese of Tuguegarao The College of Information and Computing

LYCEUM OF APARRI SciencesBS Computer Science (Level 3 Accredited)

BS Information Technology
Aparri, Cagayan

COLLEGE OF INFORMATION AND COMPUTING SCIENCES

ACTIVITY SHEET FRM-
Course: Code IT 214- APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES CICS-002
WEEK 9: Getting to Know the Android User Interface
- Understanding The Components Of A Screen

Activity 1: Creating Basic UI Components

Step 1: Create a Python class for each of the following components: TextView, EditText,
and Button.
TextView
Attributes: text text_size text_style

Method: display() which prints the text as it would appear on the screen.

EditText
Attributes: text (initially empty)hint is _editable (default True)
Method: enter_text(new_text) which sets the text to new_text if is_editable is True.
Method: display() which shows either the text or hint if text is empty.

Button:
Attribute: text (e.g."Save")

Method: click() which prints a message simulating an action when the button is pressed.

Activity 2: Creating an Interface for QuickNotes

Step 1: Initialize objects based on the classes from Activity 1 to create a simulated
"QuickNotes" screen.
a. TextView for the title ("QuickNotes").
b. EditText for entering a note (hint: "Type your note here…").
c. Button to save the note.
Step 2: Write code that simulates typing in the EditText, clicking the Button, and
displaying the text from the TextView.
 Activity 3: Saving Notes and Displaying a List
Goal: Simulate a list of saved notes.
1. Write a function save_note() that stores each note entered by the user into a list.
2. Display the list of saved notes each time a new note is added.

Questions for Reflection

1. What similarities did you notice between these Python classes and actual
Android UI components?
2. How would you change the design if you wanted to add a feature for deleting
notes?
3. What other components might you add to improve the "QuickNotes" interface
(e.g., a "Clear Note" button)?

Laxate Retia

Archdiocese of Tuguegarao The College of Information and Computing

LYCEUM OF Sciences
BS Computer Science (Level 3 Accredited)
BS Information Technology
Aparri, Cagayan
APARRI

COLLEGE OF INFORMATION AND COMPUTING SCIENCES

ACTIVITY SHEET FRM-
 Course: Code/ Course Title: IT 214- Application Development and Emerging Technologies CICS-002

WEEK 10: Adapting To Display Orientation

Activity 1: Adapting to Display Orientation

Instructions:
Complete each step below to create a Python simulation where the layout of UI components changes
based on orientation.

Scenario:
You are designing a simple UI for a mock "WeatherApp" screen with two orientations:

Portrait Mode: Shows the weather summary in a single column layout.

Landscape Mode: Shows the weather summary in a two-column layout to make better use of
the horizontal space.
The components of the screen are:

1. TextView: Displays the current temperature.

2. TextView: Displays a weather description.
3. ImageView: Displays an icon representing the weather (e.g., sunny, rainy).

Activity Task 2 : Creating a Responsive Grid Layout

Scenario:
Imagine you're creating a "Photo Gallery" screen for an app. The screen displays a list of
images that should be shown in a single column in portrait mode and in a two-column grid in
landscape mode.

Instructions:
1. Define the ImageView Class:
 Create a Python class ImageView to represent each image. Each ImageView should have
an image_name attribute and a display() method that prints a placeholder for the image.

2. Create the GalleryScreen Class

 Define a GalleryScreen class that holds a list of ImageView objects.
 Add a method set_orientation() that accepts "portrait" or "landscape" and changes the display
mode accordingly.
Create a display() method that:
 Shows all images in a single column if the orientation is portrait.
 Shows images in a two-column grid if the orientation is landscape.
3. Test the Layout:

 Initialize the GalleryScreen with at least 4 images.

 Display the gallery in portrait mode, then switch to landscape mode and display it again.

Activity Task 3: Implementing Dynamic Orientation Switching

Scenario:

You are developing a "NewsFeed" screen for an app. The news feed contains TextView
components for headlines that adapt their layout based on screen orientation. Each headline
should display in a single column in portrait mode and in two columns in landscape mode.

Instructions:

1. Define the TextView Class: Create a TextView class with an attribute text for the
headline and a display() method to print it.
2. Create the NewsFeedScreen Class:
o Define a NewsFeedScreen class with a list of TextView components
representing different headlines.
o Add a method toggle_orientation() that automatically switches between
portrait and landscape each time it is called.
o Create a display() method that arranges headlines in a single column for
portrait and in two columns for landscape.
3. Test the Orientation Toggle:
o Initialize the NewsFeedScreen with 5 or more headlines.
o Toggle the orientation multiple times and display the layout to see how it
changes dynamically.

Reflection Questions

1. How does adapting the layout for different orientations improve the user
experience?
2. What other components or changes might you add to make the layouts even more
responsive?
3. How could you extend the toggle_orientation() method to support additional
orientations or screen sizes?

Archdiocese of Tuguegarao The College of Information and

LYCEUM OF BS Computer
Computing Science (Level 3 Accredited)
Sciences
BS Information Technology
Aparri,
APARRI
Cagayan

COLLEGE OF INFORMATION AND COMPUTING SCIENCES

ACTIVITY SHEET FRM-
Course: Code/ Course Title: IT 214- Application Development and Emerging Technologies CICS-002
 WEEK 11: Managing Changes To Screen Orientation

Activity Task: Managing Changes to Screen Orientation

Scenario:

You are designing a "Note-taking" app where users can type notes and view a list of saved
notes. When the orientation changes (from portrait to landscape or vice versa), the app should:

1. Preserve the note content that the user has typed but not yet saved.
2. Re-display the saved notes in an orientation-specific layout.

The app will:

 Display saved notes in a single column in portrait mode.

 Display saved notes in two columns in landscape mode.

Step 1: Define the Components

 Define a TextView class for displaying saved notes and an EditText class for the note
input.

Step 2: Create the NoteAppScreen Class

Define a NoteAppScreen class that holds:

1. An EditText for typing a new note.

2. A list of saved TextView notes.
3. A method to manage screen orientation changes.

Step 3: Simulate Adding Notes and Changing Orientation

1. Create an instance of NoteAppScreen.

2. Simulate typing a note, saving it, and displaying the list in portrait mode.
3. Switch to landscape mode, ensuring that saved notes are displayed in a two-column
layout while preserving any unsaved text in the EditText.

Reflection Questions

1. Why is it important to preserve unsaved user input during orientation changes?

2. What challenges might you face when managing orientation changes in a real app
with more complex data?
3. How might you extend this code to handle more orientations or different screen
sizes?
Laxate Retia
 Archdiocese of Tuguegarao The College of Information and Computing
LYCEUM OF BS Computer Science (Level 3 Accredited)
Sciences
BS Information Technology
Aparri,
APARRI
Cagayan

COLLEGE OF INFORMATION AND COMPUTING SCIENCES

ACTIVITY SHEET FRM-
Course: Code IT 214 CICS-002
WEEK 12: Utilizing The Action Bar

Activity Task:

Creating an Action Bar for a Library App

Scenario:

You are developing a "LibraryApp" where users can view a list of books, search for a book by
title, and add new books to the library. The app’s action bar will contain:

1. Title: Displayed as the name of the app, “LibraryApp.”

2. Menu Options:
o A "Search" action to allow users to search for a book by title.
o An "Add" action to add a new book to the list.
o A "Home" action to return to the main screen.

Step-by-Step Instructions

Step 1: Define the Components

Define a Book class to represent each book in the library and an ActionBar class to represent
the action bar.

Step 2: Create the LibraryApp Class

Define a LibraryApp class to:

1. Display the action bar.

2. Handle the action bar options (search, add, and home).
3. Store and display a list of books.

4. Run and Test the Application

5. Create an instance of LibraryApp and start the program using the run() method. Test
each action in the action bar to ensure it functions as expected.
Expected Flow

1. Home Option - Displays all books in the library. If no books are added, it should
indicate the library is empty.
2. Add Option- Prompts the user to enter a book title and author, adds it to the library,
and confirms the addition.
3. Search Option- Prompts the user for a title keyword and displays all matching books.
If no match is found, displays a “No books found” message.

Reflection Questions

1. Why is an action bar useful for navigating within an app?

2. How could you enhance the action bar to support more features or options?
3. What might be the benefits of adding icons to the action bar items in a graphical
interface?