sunflower
A gardening app illustrating Android development best practices with migrating a View-based app to Jetpack Compose.
Top Related Projects
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:
- 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>)
}
- 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
}
- 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:
-
Clone the repository:
git clone https://github.com/android/sunflower.git
-
Open the project in Android Studio.
-
Build and run the app on an emulator or physical device.
-
Explore the codebase to learn about Android Jetpack implementation and best practices.
Competitor Comparisons
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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. TheAndroidViewBinding
API is used to embed aTextView
in Compose. See thePlantDescription
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):
-
Close Android Studio if it's open
-
Download ktlint using these installation instructions
-
Apply ktlint settings to Android Studio using these instructions
-
Start Android Studio
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
).
Top Related Projects
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot