Convert Figma logo to code with AI

android logosunflower

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

17,635
4,688
17,635
76

Top Related Projects

21,774

The Google I/O Android App

Samples for Android Architecture Components.

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

Official Jetpack Compose samples.

A collection of extension libraries for Jetpack Compose

Quick Overview

Android Sunflower is a gardening app demonstrating Android development best practices with Android Jetpack. It showcases modern Android app architecture, Material Design implementation, and Jetpack libraries usage. The app helps users manage their garden, providing information about plants and their care.

Pros

  • Demonstrates best practices in Android app development
  • Utilizes latest Android Jetpack libraries and components
  • Implements Material Design principles for a modern UI
  • Serves as an excellent learning resource for Android developers

Cons

  • May be overwhelming for beginners due to its comprehensive nature
  • Focuses primarily on demonstrating architecture and libraries, rather than being a fully-featured gardening app
  • Regular updates required to keep up with rapidly evolving Android ecosystem

Code Examples

Here are a few code examples from the Sunflower project:

  1. Using Kotlin Coroutines for database operations:
@Dao
interface PlantDao {
    @Query("SELECT * FROM plants ORDER BY name")
    fun getPlants() = flow { emit(getPlantList()) }

    @Query("SELECT * FROM plants WHERE growZoneNumber = :growZoneNumber ORDER BY name")
    fun getPlantsWithGrowZoneNumber(growZoneNumber: Int) = flow { emit(getPlantListWithGrowZoneNumber(growZoneNumber)) }

    @Query("SELECT * FROM plants WHERE id = :plantId")
    fun getPlant(plantId: String): Flow<Plant>

    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertAll(plants: List<Plant>)
}
  1. Implementing a ViewModel with LiveData:
class PlantListViewModel @ViewModelInject internal constructor(
    plantRepository: PlantRepository,
    private val savedStateHandle: SavedStateHandle
) : ViewModel() {

    val plants: LiveData<List<Plant>> = getSavedGrowZoneNumber().switchMap { growZone ->
        if (growZone == NO_GROW_ZONE) {
            plantRepository.getPlants()
        } else {
            plantRepository.getPlantsWithGrowZoneNumber(growZone)
        }
    }

    // ... other methods
}
  1. Using Data Binding in XML layouts:
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="com.google.samples.apps.sunflower.viewmodels.PlantDetailViewModel" />
    </data>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:background="?attr/colorSurface"
        tools:context="com.google.samples.apps.sunflower.GardenActivity"
        tools:ignore="MergeRootFrame">

        <!-- Layout content -->

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

Getting Started

To get started with Android Sunflower:

  1. Clone the repository:

    git clone https://github.com/android/sunflower.git
    
  2. Open the project in Android Studio.

  3. Build and run the app on an emulator or physical device.

  4. Explore the codebase to learn about Android Jetpack implementation and best practices.

Competitor Comparisons

21,774

The Google I/O Android App

Pros of iosched

  • Larger, more comprehensive project showcasing a full-featured conference app
  • Demonstrates integration with Firebase and other Google services
  • Includes more advanced UI components and animations

Cons of iosched

  • More complex codebase, potentially harder for beginners to navigate
  • Specific to conference apps, less generalizable for other app types
  • Requires more setup and configuration due to its larger scope

Code Comparison

Sunflower (Kotlin):

class PlantDetailFragment : Fragment() {
    private val args: PlantDetailFragmentArgs by navArgs()
    private val plantDetailViewModel: PlantDetailViewModel by viewModels {
        InjectorUtils.providePlantDetailViewModelFactory(requireActivity(), args.plantId)
    }
}

iosched (Kotlin):

class ScheduleFragment : DaggerFragment() {
    @Inject lateinit var viewModelFactory: ViewModelProvider.Factory
    private val viewModel: ScheduleViewModel by viewModels { viewModelFactory }
    private val args: ScheduleFragmentArgs by navArgs()
}

Both projects use Kotlin and follow MVVM architecture. iosched uses Dagger for dependency injection, while Sunflower uses a custom InjectorUtils class. iosched's codebase is generally more complex, reflecting its larger scope and feature set.

Samples for Android Architecture Components.

Pros of architecture-components-samples

  • More comprehensive, covering a wider range of Android Architecture Components
  • Includes multiple sample apps demonstrating different use cases
  • Regularly updated with new features and best practices

Cons of architecture-components-samples

  • Can be overwhelming for beginners due to its breadth
  • Less focused on a single, cohesive app experience
  • May require more time to understand and navigate through various samples

Code Comparison

architecture-components-samples (BasicSample):

@Dao
interface UserDao {
    @Query("SELECT * FROM user WHERE id = :userId")
    fun getUser(userId: String): LiveData<User>

    @Insert(onConflict = OnConflictStrategy.REPLACE)
    fun insert(user: User)
}

Sunflower:

@Dao
interface PlantDao {
    @Query("SELECT * FROM plants ORDER BY name")
    fun getPlants(): Flow<List<Plant>>

    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertAll(plants: List<Plant>)
}

Both repositories demonstrate similar DAO (Data Access Object) implementations, but Sunflower uses Kotlin Flow for asynchronous data streams, while architecture-components-samples uses LiveData in this example.

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

Pros of architecture-samples

  • More comprehensive, covering a wider range of architectural patterns and components
  • Includes multiple sample apps demonstrating different approaches
  • Provides examples of testing strategies for various architecture components

Cons of architecture-samples

  • May be overwhelming for beginners due to its complexity
  • Less focused on a single, cohesive app experience
  • Potentially harder to maintain and keep up-to-date with latest best practices

Code Comparison

architecture-samples (TodoViewModel.kt):

@HiltViewModel
class TasksViewModel @Inject constructor(
    private val tasksRepository: TasksRepository,
    private val savedStateHandle: SavedStateHandle
) : ViewModel() {
    // ...
}

Sunflower (PlantListViewModel.kt):

class PlantListViewModel @AssistedInject constructor(
    plantRepository: PlantRepository,
    @Assisted private val savedStateHandle: SavedStateHandle
) : ViewModel() {
    // ...
}

Both examples demonstrate the use of dependency injection and SavedStateHandle, but architecture-samples uses Hilt while Sunflower uses Dagger with AssistedInject.

Official Jetpack Compose samples.

Pros of compose-samples

  • Showcases modern Jetpack Compose UI toolkit
  • Offers a wider variety of sample apps and use cases
  • Demonstrates integration with other Jetpack libraries in a Compose context

Cons of compose-samples

  • May be more complex for beginners due to the new paradigm of Compose
  • Potentially less stable as Compose is still evolving
  • Might not cover some traditional Android UI patterns

Code Comparison

Sunflower (XML-based UI):

<TextView
    android:id="@+id/plant_detail_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{viewModel.plant.name}"
    android:textAppearance="@style/TextAppearance.MaterialComponents.Headline5" />

compose-samples (Jetpack Compose):

@Composable
fun PlantName(name: String) {
    Text(
        text = name,
        style = MaterialTheme.typography.h5
    )
}

Summary

Sunflower focuses on traditional Android development practices using XML layouts and the MVVM architecture. It's an excellent resource for learning best practices in Android app architecture.

compose-samples, on the other hand, demonstrates the use of Jetpack Compose for building modern Android UIs. It offers a wider range of examples but may be more challenging for developers new to declarative UI paradigms.

Both repositories are valuable learning resources, with Sunflower being more suitable for traditional Android development and compose-samples for those looking to adopt Jetpack Compose.

A collection of extension libraries for Jetpack Compose

Pros of Accompanist

  • Broader scope: Offers a collection of libraries for Jetpack Compose, covering various UI components and utilities
  • More frequent updates: Actively maintained with regular releases and improvements
  • Extensive documentation: Provides detailed guides and API references for each library

Cons of Accompanist

  • Steeper learning curve: Requires familiarity with Jetpack Compose and its ecosystem
  • Potentially larger app size: Including multiple libraries may increase the overall app size
  • Less focus on architecture: Primarily concentrates on UI components rather than app architecture

Code Comparison

Sunflower (Plant Detail Screen):

@Composable
fun PlantDetailDescription(
    plantDescription: String,
    modifier: Modifier = Modifier
) {
    // Plant description section
    Surface(modifier = modifier.padding(horizontal = dimensionResource(R.dimen.margin_small))) {
        Text(plantDescription)
    }
}

Accompanist (Insets):

@Composable
fun MyScreen() {
    val insets = rememberInsetsPaddingValues(
        insets = LocalWindowInsets.current.systemBars,
        applyTop = true,
        applyBottom = true
    )
    Box(Modifier.padding(insets)) {
        // Screen content
    }
}

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

Android Sunflower with Compose

Warning: The Sunflower repository is no longer under maintenance, We are prioritizing https://github.com/android/compose-samples as the up-to-date source of truth for Compose best practises. Please use that repository and sample set to continue learning about Jetpack Compose. If you'd like to continue using Sunflower, we encourage you to maintain your own fork of the sample.

A gardening app illustrating Android development best practices with migrating a View-based app to Jetpack Compose. To learn about how Sunflower was migrated to Compose, see the migration journey document.

[!Note] To see the original View implementation of Sunflower, checkout the views branch.

Screenshots

Features

This sample showcases how to migrate an existing View-based app (Material 2) to Compose (Material 3). See the linked migration journey doc above to learn more.

[!Note] As Compose cannot render HTML code in Text yet. The AndroidViewBinding API is used to embed a TextView in Compose. See the PlantDescription composable in the PlantDetailView file.

Requirements

Unsplash API key

Sunflower uses the Unsplash API to load pictures on the gallery screen. To use the API, you will need to obtain a free developer API key. See the Unsplash API Documentation for instructions.

Once you have the key, add this line to the gradle.properties file, either in your user home directory (usually ~/.gradle/gradle.properties on Linux and Mac) or in the project's root folder:

unsplash_access_key=<your Unsplash access key>

The app is still usable without an API key, though you won't be able to navigate to the gallery screen.

Android Studio IDE setup

For development, the latest version of Android Studio is required. The latest version can be downloaded from here.

Sunflower uses ktlint to enforce Kotlin coding styles. Here's how to configure it for use with Android Studio (instructions adapted from the ktlint README):

Additional resources

Check out these Wiki pages to learn more about Android Sunflower:

Non-Goals

Previously, this sample app was focused on demonstrating best practices for multiple Jetpack libraries. However, this is no longer the case and development will instead be focused on how to adopt Compose in an existing View-based app. So, there are no plans to implement features outside of this scope. Keep this in mind when making contributions to this library.

Support

If you've found an error in this sample, please file an issue: https://github.com/android/sunflower/issues

Patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub.

Third Party Content

Select text used for describing the plants (in plants.json) are used from Wikipedia via CC BY-SA 3.0 US (license in ASSETS_LICENSE).

"seed" by Aisyah is licensed under CC BY 3.0