Convert Figma logo to code with AI

android logonowinandroid

A fully functional Android app built entirely with Kotlin and Jetpack Compose

16,442
2,949
16,442
240

Top Related Projects

21,774

The Google I/O Android App

Official Jetpack Compose samples.

A collection of samples to discuss and showcase different architectural tools and patterns for Android apps.

17,635

A gardening app illustrating Android development best practices with migrating a View-based app to Jetpack Compose.

13,082

A sample audio app for Android

Quick Overview

Now in Android is a fully functional Android app built entirely with Kotlin and Jetpack Compose. It follows Android design and development best practices and is intended to be a resource for developers to learn from and build upon. The app showcases the latest Android development tools and techniques.

Pros

  • Demonstrates modern Android development practices and architecture
  • Fully built with Kotlin and Jetpack Compose
  • Comprehensive test coverage, including unit and UI tests
  • Modular architecture for better scalability and maintainability

Cons

  • May be overwhelming for beginners due to its complexity
  • Requires a good understanding of Kotlin and Compose
  • Some features might be overkill for simpler app projects
  • Frequent updates may require developers to constantly adapt their understanding

Code Examples

Here are a few code examples from the project:

  1. Defining a Composable function for a news card:
@Composable
fun NewsResourceCardExpanded(
    newsResource: NewsResource,
    isBookmarked: Boolean,
    onToggleBookmark: () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onClick,
        shape = MaterialTheme.shapes.medium,
        modifier = modifier,
    ) {
        Column {
            Box {
                NewsResourceHeaderImage(newsResource)
                BookmarkButton(
                    isBookmarked = isBookmarked,
                    onClick = onToggleBookmark,
                    modifier = Modifier
                        .padding(16.dp)
                        .align(Alignment.TopEnd),
                )
            }
            NewsResourceTitle(
                newsResource.title,
                modifier = Modifier.padding(horizontal = 16.dp)
            )
            NewsResourceMetaData(
                newsResource.publishDate,
                newsResource.type,
                modifier = Modifier.padding(horizontal = 16.dp)
            )
            NewsResourceShortDescription(
                newsResource.content,
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}
  1. Implementing a ViewModel for the For You screen:
@HiltViewModel
class ForYouViewModel @Inject constructor(
    private val userDataRepository: UserDataRepository,
    private val newsRepository: NewsRepository,
    private val topicRepository: TopicRepository
) : ViewModel() {

    val uiState: StateFlow<ForYouUiState> = combine(
        userDataRepository.userData,
        newsRepository.getNewsResources(),
        topicRepository.getTopics()
    ) { userData, newsResources, topics ->
        ForYouUiState.Success(
            feed = newsResources
                .filter { newsResource -> newsResource.topics.intersect(userData.followedTopics).isNotEmpty() }
                .map { newsResource ->
                    NewsResourceCardExpanded(
                        newsResource = newsResource,
                        isBookmarked = userData.bookmarkedNewsResources.contains(newsResource.id),
                        topics = topics.filter { topic -> newsResource.topics.contains(topic.id) }
                    )
                },
            followedTopics = topics.filter { topic -> userData.followedTopics.contains(topic.id) }
        )
    }
    .stateIn(
        scope = viewModelScope,
        started = SharingStarted.WhileSubscribed(5_000),
        initialValue = ForYouUiState.Loading
    )

    fun toggleBookmark(newsResourceId: String) {
        viewModelScope.launch {
            userDataRepository.toggleNewsResourceBookmark(newsResourceId)
        }
    }
}
  1. Writing a UI test for the For You screen:
@RunWith(AndroidJUnit4::class)
@HiltAndroidTest
class ForYouScreenTest {

    @get:Rule(order = 0)
    val hiltRule = HiltAndroidRule(this)

    @get:Rule(order = 1)
    val composeTestRule = createAndroidComposeRule<ComponentActivity>()

    @Test
    fun forYouScreen_when

Competitor Comparisons

21,774

The Google I/O Android App

Pros of iosched

  • More established project with longer history and larger community
  • Includes iOS-specific features and optimizations
  • Demonstrates Google I/O app development practices

Cons of iosched

  • Less frequent updates compared to Now in Android
  • Focused solely on iOS, limiting cross-platform applicability
  • May contain legacy code due to its longer history

Code Comparison

iosched (Kotlin):

class SessionDetailViewModel @Inject constructor(
    private val loadSessionUseCase: LoadSessionUseCase,
    private val loadRelatedSessionsUseCase: LoadRelatedSessionsUseCase,
    private val starEventUseCase: StarEventUseCase,
    private val getUserEventUseCase: GetUserEventUseCase
) : ViewModel() {
    // ...
}

Now in Android (Kotlin):

@HiltViewModel
class NewsViewModel @Inject constructor(
    private val userDataRepository: UserDataRepository,
    private val newsRepository: NewsRepository,
) : ViewModel() {
    // ...
}

Both projects use Kotlin and follow MVVM architecture. iosched demonstrates more complex dependency injection, while Now in Android showcases a simpler, more modern approach with Hilt annotations.

Official Jetpack Compose samples.

Pros of compose-samples

  • Offers a wider variety of sample apps, showcasing different Compose use cases
  • Includes more complex UI examples and animations
  • Provides standalone samples that are easier to understand in isolation

Cons of compose-samples

  • Less focus on architecture and best practices for large-scale apps
  • May not demonstrate real-world app complexity and integration patterns
  • Lacks comprehensive testing examples compared to nowinandroid

Code Comparison

nowinandroid:

@Composable
fun NewsScreen(
    uiState: NewsUiState,
    onTopicClick: (String) -> Unit,
    onNewsResourcesCheckedChanged: (String, Boolean) -> Unit,
    modifier: Modifier = Modifier
) {
    // ...
}

compose-samples (Jetchat):

@Composable
fun ConversationContent(
    uiState: ConversationUiState,
    navigateToProfile: (String) -> Unit,
    modifier: Modifier = Modifier,
    onNavIconPressed: () -> Unit = { }
) {
    // ...
}

Both examples show similar patterns for composable functions with UI state and event handlers, but nowinandroid tends to have more complex state management and architecture throughout the app.

A collection of samples to discuss and showcase different architectural tools and patterns for Android apps.

Pros of architecture-samples

  • More focused on demonstrating various architecture patterns (MVI, MVVM, MVP)
  • Simpler codebase, easier for beginners to understand
  • Includes unit tests and UI tests, showcasing testing practices

Cons of architecture-samples

  • Less up-to-date with the latest Android development practices
  • Smaller scope, doesn't cover as many real-world app scenarios
  • Limited use of Jetpack Compose for UI

Code Comparison

architecture-samples (MVVM pattern):

class TasksViewModel(
    private val tasksRepository: TasksRepository
) : ViewModel() {
    private val _items = MutableLiveData<List<Task>>().apply { value = emptyList() }
    val items: LiveData<List<Task>> = _items
}

nowinandroid (MVI pattern with Compose):

@HiltViewModel
class NewsViewModel @Inject constructor(
    private val newsRepository: NewsRepository
) : ViewModel() {
    val newsUiState: StateFlow<NewsUiState> =
        newsRepository.getNewsResourcesStream()
            .map { NewsUiState.Success(it) }
            .stateIn(
                scope = viewModelScope,
                started = SharingStarted.WhileSubscribed(5_000),
                initialValue = NewsUiState.Loading
            )
}
17,635

A gardening app illustrating Android development best practices with migrating a View-based app to Jetpack Compose.

Pros of Sunflower

  • Simpler architecture, making it easier for beginners to understand
  • Focuses on a single domain (gardening), allowing for more in-depth exploration of specific features
  • Includes UI tests, providing a good example of testing practices

Cons of Sunflower

  • Less comprehensive in terms of modern Android development practices
  • Doesn't showcase as many Jetpack libraries as Now in Android
  • May not be as representative of real-world, complex applications

Code Comparison

Sunflower (ViewModel):

class PlantDetailViewModel(
    savedStateHandle: SavedStateHandle,
    plantRepository: PlantRepository,
    private val gardenPlantingRepository: GardenPlantingRepository
) : ViewModel() {
    val plantId: String = savedStateHandle.get<String>(PLANT_ID_SAVED_STATE_KEY)!!
    val plant = plantRepository.getPlant(plantId).asLiveData()
    val isPlanted = gardenPlantingRepository.isPlanted(plantId).asLiveData()
}

Now in Android (ViewModel):

class NewsViewModel @Inject constructor(
    private val userDataRepository: UserDataRepository,
    newsRepository: NewsRepository,
) : ViewModel() {
    val userDataUiState: StateFlow<UserDataUiState> =
        userDataRepository.userData.map { userData ->
            UserDataUiState.Success(userData)
        }.stateIn(
            scope = viewModelScope,
            started = SharingStarted.WhileSubscribed(5_000),
            initialValue = UserDataUiState.Loading,
        )
}
13,082

A sample audio app for Android

Pros of uamp

  • Focuses specifically on audio playback, providing a more specialized example for media apps
  • Includes examples of Android Auto integration
  • Demonstrates usage of ExoPlayer for advanced media playback features

Cons of uamp

  • Less comprehensive in terms of overall app architecture compared to Now in Android
  • Not as up-to-date with the latest Android development practices and libraries
  • Smaller scope, focusing mainly on media playback rather than a full-featured app

Code Comparison

uamp (MediaItemTree.kt):

override fun getChildren(parentId: String, page: Int, pageSize: Int, callbacks: Result<List<MediaItem>>) {
    val children = when (parentId) {
        UAMP_BROWSABLE_ROOT -> listOf(buildBrowsableMediaItem(UAMP_ALBUMS_ROOT, "Albums", R.drawable.ic_album))
        UAMP_ALBUMS_ROOT -> albumList.map { album -> buildBrowsableMediaItem(album.id, album.title, R.drawable.ic_album) }
        else -> emptyList()
    }
    callbacks.sendResult(children)
}

Now in Android (NewsRepository.kt):

suspend fun getNewsResources(
    query: NewsResourceQuery = NewsResourceQuery(
        filterTopicIds = userDataRepository.getFollowedTopicIds()
    )
): List<NewsResource> = withContext(ioDispatcher) {
    val topicIds = query.filterTopicIds
    val newsResources = newsResourceDao.getNewsResources(
        useFilterTopicIds = topicIds.isNotEmpty(),
        filterTopicIds = topicIds,
        query.filterNewsIds
    )
    newsResources.map(NewsResourceEntity::asExternalModel)
}

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Now in Android

Now in Android App

Learn how this app was designed and built in the design case study, architecture learning journey and modularization learning journey.

This is the repository for the Now in Android app. It is a work in progress 🚧.

Now in Android is a fully functional Android app built entirely with Kotlin and Jetpack Compose. It follows Android design and development best practices and is intended to be a useful reference for developers. As a running app, it's intended to help developers keep up-to-date with the world of Android development by providing regular news updates.

The app is currently in development. The prodRelease variant is available on the Play Store.

Features

Now in Android displays content from the Now in Android series. Users can browse for links to recent videos, articles and other content. Users can also follow topics they are interested in, and be notified when new content is published which matches interests they are following.

Screenshots

Screenshot showing For You screen, Interests screen and Topic detail screen

Development Environment

Now in Android uses the Gradle build system and can be imported directly into Android Studio (make sure you are using the latest stable version available here).

Change the run configuration to app.

image

The demoDebug and demoRelease build variants can be built and run (the prod variants use a backend server which is not currently publicly available).

image

Once you're up and running, you can refer to the learning journeys below to get a better understanding of which libraries and tools are being used, the reasoning behind the approaches to UI, testing, architecture and more, and how all of these different pieces of the project fit together to create a complete app.

Architecture

The Now in Android app follows the official architecture guidance and is described in detail in the architecture learning journey.

Modularization

The Now in Android app has been fully modularized and you can find the detailed guidance and description of the modularization strategy used in modularization learning journey.

Build

The app contains the usual debug and release build variants.

In addition, the benchmark variant of app is used to test startup performance and generate a baseline profile (see below for more information).

app-nia-catalog is a standalone app that displays the list of components that are stylized for Now in Android.

The app also uses product flavors to control where content for the app should be loaded from.

The demo flavor uses static local data to allow immediate building and exploring of the UI.

The prod flavor makes real network calls to a backend server, providing up-to-date content. At this time, there is not a public backend available.

For normal development use the demoDebug variant. For UI performance testing use the demoRelease variant.

Testing

To facilitate testing of components, Now in Android uses dependency injection with Hilt.

Most data layer components are defined as interfaces. Then, concrete implementations (with various dependencies) are bound to provide those interfaces to other components in the app. In tests, Now in Android notably does not use any mocking libraries. Instead, the production implementations can be replaced with test doubles using Hilt's testing APIs (or via manual constructor injection for ViewModel tests).

These test doubles implement the same interface as the production implementations and generally provide a simplified (but still realistic) implementation with additional testing hooks. This results in less brittle tests that may exercise more production code, instead of just verifying specific calls against mocks.

Examples:

  • In instrumentation tests, a temporary folder is used to store the user's preferences, which is wiped after each test. This allows using the real DataStore and exercising all related code, instead of mocking the flow of data updates.

  • There are Test implementations of each repository, which implement the normal, full repository interface and also provide test-only hooks. ViewModel tests use these Test repositories, and thus can use the test-only hooks to manipulate the state of the Test repository and verify the resulting behavior, instead of checking that specific repository methods were called.

To run the tests execute the following gradle tasks:

  • testDemoDebug run all local tests against the demoDebug variant. Screenshot tests will fail (see below for explanation). To avoid this, run recordRoborazziDemoDebug prior to running unit tests.
  • connectedDemoDebugAndroidTest run all instrumented tests against the demoDebug variant.

Note: You should not run ./gradlew test or ./gradlew connectedAndroidTest as this will execute tests against all build variants which is both unecessary and will result in failures as only the demoDebug variant is supported. No other variants have any tests (although this might change in future).

Screenshot tests

A screenshot test takes a screenshot of a screen or a UI component within the app, and compares it with a previously recorded screenshot which is known to be rendered correctly.

For example, Now in Android has screenshot tests to verify that the navigation is displayed correctly on different screen sizes (known correct screenshots).

Now In Android uses Roborazzi to run screenshot tests of certain screens and UI components. When working with screenshot tests the following gradle tasks are useful:

  • verifyRoborazziDemoDebug run all screenshot tests, verifying the screenshots against the known correct screenshots.
  • recordRoborazziDemoDebug record new "known correct" screenshots. Use this command when you have made changes to the UI and manually verified that they are rendered correctly. Screenshots will be stored in modulename/src/test/screenshots.
  • compareRoborazziDemoDebug create comparison images between failed tests and the known correct images. These can also be found in modulename/src/test/screenshots.

Note on failing screenshot tests: The known correct screenshots stored in this repository are recorded on CI using Linux. Other platforms may (and probably will) generate slightly different images, making the screenshot tests fail. When working on a non-Linux platform, a workaround to this is to run recordRoborazziDemoDebug on the main branch before starting work. After making changes, verifyRoborazziDemoDebug will identify only legitimate changes.

For more information about screenshot testing check out this talk.

UI

The app was designed using Material 3 guidelines. Learn more about the design process and obtain the design files in the Now in Android Material 3 Case Study (design assets also available as a PDF).

The Screens and UI elements are built entirely using Jetpack Compose.

The app has two themes:

  • Dynamic color - uses colors based on the user's current color theme (if supported)
  • Default theme - uses predefined colors when dynamic color is not supported

Each theme also supports dark mode.

The app uses adaptive layouts to support different screen sizes.

Find out more about the UI architecture here.

Performance

Benchmarks

Find all tests written using Macrobenchmark in the benchmarks module. This module also contains the test to generate the Baseline profile.

Baseline profiles

The baseline profile for this app is located at app/src/main/baseline-prof.txt. It contains rules that enable AOT compilation of the critical user path taken during app launch. For more information on baseline profiles, read this document.

[!NOTE] The baseline profile needs to be re-generated for release builds that touch code which changes app startup.

To generate the baseline profile, select the benchmark build variant and run the BaselineProfileGenerator benchmark test on an AOSP Android Emulator. Then copy the resulting baseline profile from the emulator to app/src/main/baseline-prof.txt.

Compose compiler metrics

Run the following command to get and analyse compose compiler metrics:

./gradlew assembleRelease -PenableComposeCompilerMetrics=true -PenableComposeCompilerReports=true

The reports files will be added to build/compose-reports. The metrics files will also be added to build/compose-metrics.

For more information on Compose compiler metrics, see this blog post.

License

Now in Android is distributed under the terms of the Apache License (Version 2.0). See the license for more information.