Simple Call Page

Simple Call Page is a small Jetpack Compose Android project that recreates a mobile in-call screen UI. It focuses on layout, spacing, local drawable assets, and a polished static call interface rather than real telephony behavior.

The app opens directly into a Compose call page with a gradient header, caller information, and a white action card containing common call controls.

Preview

Features

• Native Android app written in Kotlin
• Jetpack Compose UI
• Full-screen call page layout
• Vertical gradient background
• Caller status row with SIM icon and Calling... text
• Caller name and phone number display
• Rounded card containing call action controls
• Local PNG icons for call actions
• Simple reusable MyItemToShow composable for icon + label controls
• Material theme starter files
• Gradle wrapper included

Project Structure

.
+-- README.md
+-- images/
+|   +-- result.png
+-- build.gradle
+-- settings.gradle
+-- gradlew
+-- app/
+    +-- build.gradle
+    +-- src/main/
+        +-- AndroidManifest.xml
+        +-- java/com/alirahimi/callpage/
+        |   +-- MainActivity.kt
+        |   +-- CallPage.kt
+        |   +-- ui/theme/
+        +-- res/drawable/
+        +-- res/values/
+```

## Main Components

| File | Purpose |
| --- | --- |
| `MainActivity.kt` | App entry point. Applies `CallPageTheme` and renders `MyCallingView()`. |
| `CallPage.kt` | Contains the full call-page UI and the reusable call-control item composable. |
| `ui/theme/Theme.kt` | Compose theme setup generated from the Android template. |
| `app/src/main/res/drawable/` | Local call icons such as mic, speaker, phone, dial, pause, bluetooth, plus, and SIM. |
| `images/result.png` | Screenshot preview used in the README. |

## UI Layout

`MyCallingView()` builds the screen in three main parts:

1. A full-screen `Column` with a vertical gradient background.
2. A centered call status area showing the SIM icon, `Calling...`, caller name, and mobile number.
3. A rounded elevated card with six call controls and a phone/end-call icon.

The call controls are arranged in two rows:

| Row | Actions |
| --- | --- |
| First row | Add call, Hold call, Bluetooth |
| Second row | Speaker, Mute, Keypad |

## Assets

The UI uses these local drawable files:

- `sim.png`
- `plus.png`
- `pause.png`
- `bluetooth.png`
- `speaker.png`
- `mic.png`
- `dial.png`
- `phone.png`

## Tech Stack

- Kotlin
- Android
- Jetpack Compose
- Compose Material
- Gradle wrapper
- Android Gradle Plugin `7.3.0`
- Kotlin Android plugin `1.6.10`
- Compose UI `1.1.1`
- Compose compiler extension `1.1.1`

## Android Configuration

| Setting | Value |
| --- | --- |
| Namespace | `com.alirahimi.callpage` |
| Application ID | `com.alirahimi.callpage` |
| Min SDK | `21` |
| Target SDK | `32` |
| Compile SDK | `32` |
| Version | `1.0` |
| Main activity | `com.alirahimi.callpage.MainActivity` |

## How to Run

Open the repository root in Android Studio, sync Gradle, and run the `app` configuration on an emulator or Android device.

From the command line, with Android SDK configured:

```bash
./gradlew :app:assembleDebug

Notes

• This is a static UI sample, not a real phone-call or VoIP implementation.
• The call action buttons are visual only and do not contain click handling.
• The caller name and number are hard-coded in CallPage.kt.
• The screenshot in images/result.png shows the intended visual result.
• The default Android starter tests are still present and do not cover the Compose UI.

Possible Improvements

• Add IconButton or Button wrappers for the call actions
• Add click callbacks for mute, speaker, keypad, and end call
• Move caller data into parameters so the composable is reusable
• Add Compose previews for MyCallingView and MyItemToShow
• Add accessibility content descriptions for icons
• Make the layout more responsive across small and large screens
• Add UI tests for the static screen content