Android Screen Design Document Template

Example of a Prompt

Agent: Document Agent

Using the @Member Information Update use case document as a reference, design the necessary screens and output them in accordance with the @Android Screen Design Template format.

</aside>

Template

# Android App Screen Design Specification

## 1. Basic Information

- Screen ID:
- Screen Name:
- Function Overview:
- Supported OS Version:
- Supported Devices:

## 2. Screen Layout

### 2.1 Layout Structure

Create the structure of the screen using Mermaid according to the following legend. Analyze dependencies by file name and create objects for each file name.

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'arial', 'fontSize': '16px'}}}%%
flowchart TD
    A["Screen/Page"] 
    B>"Component"]
    C{"Conditional Branch"}
    D[["Form Element"]]
    E[("Data Display")]
    F(["Action/Button"])

    classDef page fill:#d0d1ff,stroke:#333,stroke-width:2px,color:#000
    classDef component fill:#ffe680,stroke:#333,stroke-width:2px,color:#000
    classDef condition fill:#c2e0c2,stroke:#333,stroke-width:2px,color:#000
    classDef form fill:#ffcce0,stroke:#333,stroke-width:2px,color:#000
    classDef data fill:#c6c6ff,stroke:#333,stroke-width:2px,color:#000
    classDef action fill:#ffb3b3,stroke:#333,stroke-width:2px,color:#000

    class A page
    class B component
    class C condition
    class D form
    class E data
    class F action

    %% Apply styles to each node to center the text
    style A text-align:center
    style B text-align:center
    style C text-align:center
    style D text-align:center
    style E text-align:center
    style F text-align:center

Line Type	Notation	Meaning
-->	Solid Arrow	Screen transition, parent-child relationship, direct relationship
-.->	Dotted Arrow	Event trigger, action execution
---	Text	---	Labeled Line	Explanation of relationship (transition, inclusion, display, etc.)
--o	White Circle End	Association (weak coupling)
--\*	Black Circle End	Aggregation (strong coupling)

2.2 Screen Orientation

Portrait Support:
Landscape Support:
Fixed Orientation:

2.3 Layout Resources

Layout XML File Name:
Use of Fragment:
Use of Custom View:

2.4 Device Support

Standard Size (5-6 inches):
Large Screen Devices (7 inches or more):
Low Resolution Devices:
High Resolution Devices:

3. UI Components

3.1 Component List

No	Component ID	Type	Display Text	Display Condition	Layout Position

3.2 Input Item Definition

No	Item ID	Display Name	Input Type	Input Restriction	Max Length	Required	Initial Value	IME Type

3.3 Input Validation Rules

3.3.1 Text Input

Allowed Characters:
Pattern Validation:
Validation on Focus Loss:
Validation on Submission:

3.3.2 Numeric Input

Minimum Value:
Maximum Value:
Decimal Places:
Digit Grouping Display:

3.3.3 Selection Input

Selection Display Method:
Selection Data Source:
Multiple Selection Allowed:
Default Selection:

3.4 List Display Definition

3.4.1 List Structure

Used Component:
Number of Items Displayed:
Scroll Method:
Paging Enabled:

3.4.2 List Item

Layout Resource:
Display Items:
Action:

3.5 Animation & Transition

Screen Display Animation:
Screen Exit Animation:
Component Display Animation:
State Change Animation:

4. Action Definition

4.1 User Action List

Action ID	Trigger	Target Component	Display Condition	Enable Condition

4.2 Click Action Definition

4.2.1 Button 1

onClick Implementation:
Processing Details: 1. 2. 3.
Transition Destination:
Transition Parameters:

4.3 Touch Action Definition

4.3.1 Swipe

onSwipe Implementation:
Direction:
Processing Details:
Constraint Conditions:

4.3.2 Long Press

onLongClick Implementation:
Processing Details:
Display Action:

4.4 System Action Definition

4.4.1 Back Key

Processing Details:
Confirmation Dialog Display:

4.4.2 Menu Key

Menu Items:
Processing Details:

5. Data Binding

5.1 Data Model

Model Class Name:
Main Attributes:
Use of Data Binding:

5.2 Binding Method

One-way/Two-way:
Update Timing:
Custom Binding:

5.3 LiveData Definition

LiveData Variable:
Observed Target:
Observation Event:

6. Communication & Data Integration

6.1 API Integration

Endpoint:
Request Header:

  [Header Information]

Request Parameters:

  [Parameter Format]

Request Body:

  [Request Format]

Communication Method:
Timeout Setting:

6.2 Response Specification

Response Format:

  [Response Format]

Parsing Method:
Error Response:

  [Error Response Format]

Error Handling:

6.3 Local Data

Use of SharedPreferences:
Use of Room DB:
Table Definition:
Cache Strategy:

7. Error & Message Definition

7.1 Validation Error

Code	Message	Display Method	Display Position

7.2 System Error

Code	Message	Display Method	Retry Allowed

7.3 Communication Error

Scenario	Message	Display Method	Recovery Method

7.4 Message Display Method

Scene for Toast Use:
Scene for Snackbar Use:
Scene for AlertDialog Use:
Scene for Custom View Use:

8. Performance Optimization

8.1 UI Rendering Optimization

Use of ViewHolder:
Layout Hierarchy:
Rendering Cache:

8.2 Memory Management

Handling Large Bitmaps:
Leak Check:
Memory Limit:

8.3 Battery Efficiency

Background Processing:
Use of Location Information:
Use of Sensors:

9. Security Requirements

9.1 Data Security

Confidential Information Storage Method:
Encryption Method:
Communication Encryption:

9.2 Input Value Validation

Injection Countermeasures:
Input Sanitization:
Implementation Location:

9.3 Access Control

Authentication Required:
Authentication Implementation Method:
Permission Control:

10. Accessibility Support

10.1 Content Description

ContentDescription Setting:
Focus Order:
Color Contrast:

10.2 Input Assistance

Voice Input Support:
Gesture Support:
Keyboard Operation Support:

10.3 TalkBack Support

Screen Reader Support:
Custom Readout Text:

11. Screen Transition & State Management

11.1 Source Screen

Screen Name:
Transition Trigger:
Passed Parameters:

11.2 Destination Screen

Screen Name:
Transition Method:
Sent Parameters:

11.3 State Saving

Data to Save:
onSaveInstanceState Implementation:
Process Recreation Support:

11.4 Lifecycle Processing

onCreate:
onResume:
onPause:
onDestroy:


## Output Image

```markdown
# Android App Screen Design Document: Member Information Update Screen

## 1. Basic Information

- Screen ID: member\\_profile\\_update
- Screen Name: Member Information Update Screen
- Function Overview: An update interface that allows members to safely change "Email Address," "Password," and "Profile Image"
- Supported OS Version: Android 8.0 or higher
- Supported Devices: Standard smartphones, tablets

## 2. Screen Layout

### 2.1 Layout Structure

```mermaid
flowchart TD
    A["Member Information Update Screen"] 
    B[["Email Address Input Form"]]
    C[["Password Change Form"]]
    D[["Profile Image Upload"]]
    E(["Validation Message Display"])
    F(["Save Button"])
    G(["Cancel Button"])
    H(["Processing Result Message Area"])

    A --> B
    A --> C
    A --> D
    B -.-> E
    C -.-> E
    D -.-> E
    A --> F
    A --> G
    A -.-> H