✨ Material Android For Developers (MAFD)

Material Android For Developers (MAFD) allows you to explore all components currently supported by Compose Material 3, side by side with the code. Additionally, you can generate color schemes based on a given image.

📸 Screenshot

👉 Download the App

Download it on this page.

✨ Features

• Browse all components currently supported by Compose Material 3.
• View source code with syntax highlighting.
• Copy the code.
• Generate Material 3 color schemes based on a given image.
• Customization options:
  • Dark theme support
  • Change theme
  • Modify shape
  • Change font family
• Support for other languages
• Survive configuration changes
• Apply a theme to the app using a color scheme generated from any given image.

🛠️ Tech Stack

• Kotlin - The Kotlin Programming Language.
• Jetpack Compose - Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
• Data Store - Jetpack DataStore is a data storage solution that allows you to store key-value pairs.
• Material Kolor - 🎨 A Compose multiplatform library for generating dynamic Material3 color schemes from a seed color.
• Landscript - 🌻 A pluggable, highly optimized Jetpack Compose and Kotlin Multiplatform image loading library that fetches and displays network images with Glide, Coil, and Fresco.
• Kotlinx Serialization - Kotlin multiplatform / multi-format serialization .
• Kotlinx Collections Immutable - Immutable persistent collections for Kotlin.
• AboutLibraries - AboutLibraries automatically collects all dependencies and licenses of any gradle project (Kotlin MultiPlatform), and provides easy to integrate UI components for Android and Compose-jb environments.
• Dagger-hilt - A fast dependency injector for Android and Java.
• Timber - A logger with a small, extensible API which provides utility on top of Android's normal Log class.
• Firebase.
• CodeView - Android Library to make it easy to create an Code editor or IDE that support any languages and themes, with auto complete, auto indenting, snippets and more features

👷🏽Building

First, you need Android Studio Jellyfish or a higher version. You can download Android Studio here.

Clone this repository or download it as a zip file, then open it in Android Studio.

Baseline Profiles

The project uses Baseline profiles - Baseline Profiles improve code execution speed by about 30% from the first launch by avoiding interpretation and just-in-time (JIT) compilation steps for included code paths.

To generate baseline profiles, you need to change the build type to nonMinifiedRelease in the :app module.

Then, run the following Gradle script in the terminal: ./gradlew app:generateReleaseBaselineProfile.

The output file from generating baseline profiles can be found at /app/src/release/generated/baselineProfiles.

Source code generator

To generate Material 3 component source as a String, you need to install NodeJS - NodeJS is a JavaScript runtime that allows you to run JavaScript code outside the browser. You can download Node here, or if you are using a Mac, you can easily install NodeJS by running brew install node in the terminal.

Then, to check that NodeJS is installed, run this script: node --version.

To generate source code as a String, run the following script: node source_code_generator.js.

Example

Input

/* region */
@Composable
fun FilledButtonContent(
    modifier: Modifier = Modifier,
) {
    Button(onClick = { /*TODO*/ }) {
        Text(text = "Button")
    }
}
/* endregion */

Output

object FilledButtonContentSourceCode {
 
     val code get() = """
@Composable
fun FilledButtonContent(
    modifier: Modifier = Modifier,
) {
  Button(onClick = { /*TODO*/ }) {
    Text(text = "Button")
  }
}
     """.trimIndent()
}