Skip to main content
Version: 4.0

Components injection

There are two ways to inject Mealz components into the host app:

  1. Jetpack Compose (preferred as nothing has to be changed on the component itself, except styling adjustments)
  2. your own full XML version of the component (a bit more complex, but gives full flexibility of changing every aspect of the component)

For the sake of the example, we will inject a component showing a recipe card in the host app. In Mealz, recipe cards can either be "fixed" (= fetched by on a predefined ID) or "suggested" (= fetched based on the user navigation context)

With Jetpack Compose (preferred)​

Initialize a RecipeView object, passing your current context:

val recipe = RecipeCard(context)
import com.miam.sdk.model.SuggestionsCriteria

// Implemented in Mealz SDK
data class SuggestionsCriteria(
    // Ids of products displayed in the search results, right before and after the recipe card
    val shelfIngredientsIds: List<String>? = null,
    // Ids of products displayed on a product details page (optional)
    val currentIngredientsIds: List<String>? = null,
    // Ids of products already in app basket (optional)
    val basketIngredientsIds: List<String>? = null,
    // (optional)
    val groupId: String? = null
)

val recipe1 = RecipeCard(this@MainActivity)
val recipe2 = RecipeCard(this@MainActivity)

// Instanciate a fixed recipe card
recipe1.bind(recipeId = 305)

// Instanciate a suggested recipe card
recipe2.bind(
    criteria = SuggestionsCriteria(
        shelfIngredientsIds = listOf(
            PRODUCT_ID_IN_APP,
            PRODUCT_ID_IN_APP
        )
    )
)

// Inject in the page using Compose
setContent {
    Column {
        recipe1.Content()
        recipe2.Content()
    }
}
info

All injectable components definitions can be found in the /androidSDK folder => have a look at each View file to discover which attributes must be passed to instantiate the view.