Skip to content

πŸ€– Android app built with jetpack πŸš€ compose follows new revamped guide to app architecture. Implemented with State, Coroutines ➰, ViewModels, Repository pattern, Light/Dark theme 🌈 MD3, Animations, Draw on canvas, Custom layouts, UI state handling, πŸŒ€ Image loading with coil, Palette 🎨 usage and dynamic theming etc.

License

Notifications You must be signed in to change notification settings

RajashekarRaju/compose-actors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Compose Actors πŸ’ƒ

AppBanner

Download the APK

Access the latest APK for Compose Actors from the link below.

Get APK

Current Roadmap v0.4.0

  • Move material design components and dependencies to separate design-system module
  • Extend Konsist tests for all design system component usages.
  • Introduce common preview annotations for composables.
  • Add new feature seasons or series information to app.
  • Include seasons in home tabs navigation.
  • Allow adding seasons to favorites.
  • Move favorites section from home tab to new place (Restructure all screen flows).
  • Collapsable TopBars, BottomBars, Scroll effects, new animations.
  • Write tests for app navigation for all composable destinations.

V3 Previews

Home Tabs

Actors Movies Favorites

Modal bottom sheets

Actor Movie

Movie details & Add to favorites

Add to favorites Favorites Details

Voice search actors

Search capabilities

Inspired from

JetCaster JetNews JetSnack

More compose content

πŸ—Ό Architecture

Follows new architecture guide updated on 14 December 2021 from revamped guide to app architecture.

🎹 Layer of this app.

Network Repository ViewModels Screens
Data
🎁🎁
🎁🎁
---> Source
🎁
--->
Suspend
Coroutines
➰➰
--->
State
Composables
πŸ“±πŸ“±
πŸ“±πŸ“±

ArchitectureLayer

🍑 App Overview Compose Blog

Android app built with Jetpack Compose shows actors information fetched from Tmdb Api. You may install and try to understand the code better, but make sure you provide your own Tmdb api key for data to show up in directory /utils/ApiKey.kt.

πŸ” Search Animation

Offline Dark

πŸ“΄ No TMDB_API_KEY provided state

Dark Light
Offline Dark Offline Light

πŸ”¨ Structure

root
β”œβ”€β”€ core
β”‚   β”œβ”€β”€ cache
β”‚   β”œβ”€β”€ database
β”‚   └── network
β”œβ”€β”€ data
β”‚   β”œβ”€β”€ datasource
β”‚   β”‚   β”œβ”€β”€ database
β”‚   β”‚   └── mocks
β”‚   β”œβ”€β”€ feature_1
β”‚   β”‚   β”œβ”€β”€ model
β”‚   β”‚   β”œβ”€β”€ paging
β”‚   β”‚   β”œβ”€β”€ remote
β”‚   β”‚   └── repository
β”‚   β”œβ”€β”€ feature_n
β”‚   β”‚   β”œβ”€β”€ model
β”‚   β”‚   β”œβ”€β”€ remote
β”‚   β”‚   └── repository
β”œβ”€β”€ di
β”‚   β”œβ”€β”€ module_1 
β”‚   └── module_n 
β”œβ”€β”€ ui
β”‚   β”œβ”€β”€ animation
β”‚   β”œβ”€β”€ navigation
β”‚   β”œβ”€β”€ screen
β”‚   β”‚   β”œβ”€β”€ feature_1
β”‚   β”‚   └── feature_n
β”‚   β”œβ”€β”€ components
β”‚   └── theme
β”œβ”€β”€ utils
β”œβ”€β”€ domain
|   β”œβ”€β”€ feature_1
|   └── feature_n
β”œβ”€β”€ MainActivity.kt
└── Application.kt

🎨 App Theme

🌈 Material Design 2.

Followed theming and color practices from Material Theme Builder Web Tool. Learn more here

Color.kt

// Light theme colors
val light_primary = Color(0xFFaa370c)
val light_onPrimary = Color(0xFFffffff)
val light_background = Color(0xFFFFFAF9)
val light_onBackground = Color(0xFF211a18)
val light_surface = Color(0xFFFFE6DB)
val light_onSurface = Color(0xFF211a18)

// Dark theme colors
val dark_primary = Color(0xFFffb59c)
val dark_onPrimary = Color(0xFF5f1600)
val dark_background = Color(0xFF211a18)
val dark_onBackground = Color(0xFFede0dc)
val dark_surface = Color(0xFF302522)
val dark_onSurface = Color(0xFFede0dc)

Theme.kt

val LightColorPalette = lightColors(
    primary = light_primary,
    onPrimary = light_onPrimary,
    background = light_background,
    onBackground = light_onBackground,
    surface = light_surface,
    onSurface = light_onSurface,
)

val DarkColorPalette = darkColors(
    primary = dark_primary,
    onPrimary = dark_onPrimary,
    background = dark_background,
    onBackground = dark_onBackground,
    surface = dark_surface,
    onSurface = dark_onSurface
)

βšͺ⚫ Light/Dark theme screenshots

Home Search Detail
Home Dark
Home Light
Search Dark
Search Light
Detail Dark
Detail Light

πŸ“ Blog

Article banner
Reveal effect animations in compose jetpack android
Read article
Article banner
Compose and build android app with new architecture principles
Read article
Article banner
Custom shape animations pulsating circles on canvas in compose android
Read article
Article banner
Search with TextField in list Compose Android Jetpack
Read article

AppPreview

πŸ’‘ Motivation and Context

Jetpack Compose is Android’s modern toolkit for building native UI. It enables you to quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Understanding to implement own Theme Shape Typography Color has became bit easier by referring to lot of official jetpack compose samples which are available in GitHub.

Best of all we got to do this in Kotlin way. Excited and long way to go from here.

πŸ† Credits

πŸš€ JetCaster

Check the official JetCaster example from Android Team, I have used their code to generate Swatch with Palette Api in my Detail screen.

πŸ”‘ Tmdb Api

Images and all information in app belongs to and taken from Tmdb Api. I do not own any of it and only made use of it for this app demonstration purpose.

Obtain your own Tmdb Api Key from here

License

Copyright 2021 Rajasekhar K E

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

πŸ€– Android app built with jetpack πŸš€ compose follows new revamped guide to app architecture. Implemented with State, Coroutines ➰, ViewModels, Repository pattern, Light/Dark theme 🌈 MD3, Animations, Draw on canvas, Custom layouts, UI state handling, πŸŒ€ Image loading with coil, Palette 🎨 usage and dynamic theming etc.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages