instagram-profile-ui-compose

A sample Android app built with Jetpack Compose that recreates an Instagram-like profile screen UI.

Overview

This project demonstrates how to structure a fairly complete profile screen in Compose using reusable composables, static sample data, and local drawable assets.

The app launches directly into ProfileScreen() from MainActivity.

What the UI Includes

• Top app bar with back, notification, and menu actions.
• Profile header with avatar and account stats.
• Description section with styled text and followed-by metadata.
• Action button row (Following, Message, Email, and dropdown).
• Story highlight row with circular thumbnails.
• Tab row for Posts, Reels, IGTV, and Profile.
• Grid-style post gallery for the selected tab (currently implemented for Posts).

Tech Stack

• Kotlin
• Android Gradle Plugin 7.3.1
• Gradle Wrapper 7.4
• Jetpack Compose UI 1.1.1
• Compose Material 1.1.1
• Activity Compose 1.3.1
• Min SDK 21, Target SDK 32, Compile SDK 32

(Values taken from build.gradle, app/build.gradle, and gradle/wrapper/gradle-wrapper.properties.)

Project Structure

app/src/main/
  AndroidManifest.xml
  java/com/atliq/instagramprofileui/
    MainActivity.kt
    ProfileScreen.kt
    ImageWithText.kt
    ui/theme/
      Color.kt
      Shape.kt
      Theme.kt
      Type.kt
  res/
    drawable/
    drawable-v24/
    values/

Important Files

• app/src/main/java/com/atliq/instagramprofileui/MainActivity.kt: app entry point.
• app/src/main/java/com/atliq/instagramprofileui/ProfileScreen.kt: main screen + composables.
• app/src/main/java/com/atliq/instagramprofileui/ImageWithText.kt: simple model for icon/text items.
• app/src/main/java/com/atliq/instagramprofileui/ui/theme/Theme.kt: Material theme definition.

Prerequisites

• macOS, Linux, or Windows
• Android Studio (recent stable version)
• Android SDK installed with API level 32 available
• JDK compatible with Android Gradle Plugin 7.3.1

Getting Started

1. Clone this repository.
2. Open the project in Android Studio.
3. Let Gradle sync complete.
4. Run the app configuration on an emulator or physical device.

Run from Terminal (Optional)

From the project root:

./gradlew :app:assembleDebug

To install on a connected device/emulator:

./gradlew :app:installDebug

Useful Gradle Commands

./gradlew :app:assembleDebug
./gradlew :app:testDebugUnitTest
./gradlew :app:connectedDebugAndroidTest

Customization Guide

• Profile data: update hardcoded values inside ProfileSection() / ProfileDescription() in ProfileScreen.kt.
• Highlights: replace entries passed to HighlightSection(...) in ProfileScreen.kt.
• Tabs and icons: edit the PostTabView(...) input list in ProfileScreen.kt.
• Post grid images: change drawable references passed to PostSection(...).
• Theme styling: adjust colors/typography in app/src/main/java/com/atliq/instagramprofileui/ui/theme/.

Current Notes

• Screen content is static and intended for UI demonstration.
• Only the first tab (Posts) currently renders grid content.

Contributing

Contributions are welcome.

If you want to improve layout behavior, responsiveness, accessibility, or code organization:

1. Fork the repository.
2. Create a feature branch.
3. Make changes and test locally.
4. Open a pull request with a clear description.

License

This project is licensed under the MIT License.

Copyright (c) 2026 Rutvik Nabhoya

See the LICENSE file for full terms.