Styling

This SDK lets you adjust the components styling so they can be naturally inserted in your app without confusing the end user.

Components styling can be customized by either:

• Passing a whole template and mapping it to the controller inputs/outputs
• Overriding the style properties

tip

A combination of both ways can be used. Note that in this case, the default style variables won't be taken into account

Overriding style properties

You can globally customize styles by overiding some classes it will be applied to all components. There severale type of properi that can be override Colors, Wording, Typography, Icons / Images and Dimentions

note

• Component styling overrides global styling
• Properties that aren't overriden will keep their default values defined by Miam in the SDK

info

Components injected using Jetpack or XML can both have their styling customized the same way

Colors

Here is how to override a color variable globally:

import com.miam.kmm_miam_sdk.android.theme.Colors

// Colors object is defined in SDK
Colors.primary = Color(0xFF44D6B3)

tip

0x means hexa , FF stands for opacity , 44D6B3 is the color code

List of colors you can override:

Name	Default value
primary	#037E92
secondary	#209B8F
ternary	#E61845
success	#44D6B3
info	#44D6B3
warning	#FFDAA3
danger	#F47F7A
grey	#676767
white	#FAFCFE
unpureWhite	#FEFEFE
black	#252525

Wording

All wordings are injected using Miam Text objects, which can be overriden globally as follows:

import com.miam.kmm_miam_sdk.android.ressource.Text

Text.alreadyInCart = "ajoutée"

info

The full list of customizable wordings can be found in file: androidSDK/src/main/ressource/text.kt

Typography

All font use across SDK are defined here they can be override globaly in androidSDK/src/main/theme/typography.kt or in lower level Our typography are of type TextStyle

import com.miam.kmm_miam_sdk.android.theme.Typography

typography.h1 = TextStyle(
    color = Color.Red,
    fontSize = 16.sp,
    fontFamily = FontFamily.Monospace,
    fontWeight = FontWeight.W800,
    fontStyle = FontStyle.Italic,
    letterSpacing = 0.5.em,
    background = Color.LightGray,
    textDecoration = TextDecoration.Underline
)

Icons / Images

All icons and images are injected using Miam Image objects, which can be overriden globally or component by component as follows:

import com.miam.kmm_miam_sdk.android.ressource.Image

Image.basketIcon = R.drawable.your_basket_icon

Dimensions

All padding, width or height are injected using Miam Dimension object, which can be overriden globally or component by component as follows:

import com.miam.kmm_miam_sdk.android.theme.Dimension

Dimension.xlPadding = 40.dp

Templating

All components avalaible for template customization can be found in theme/template.kt

In there you'll find a unique object with overridable property. You'll only have to pass a new value to one of those property to override a view.

tip

Our components are statefull: for example :

• recipeCardTemplate when view is succesfully loaded
• recipeLoaderTemplate when view is loading

That means that you can also overring only a state

Here is an example of overriding recipeCardTemplate :

  // def of your new template
private val recipeFunctionTemplateVariable: @Composable (recipe: Recipe, vmRecipe: RecipeViewModel, look: () -> Unit, buy: () -> Unit) -> Unit =
    { recipe: Recipe, vmRecipe: RecipeViewModel, look: () -> Unit, buy: () -> Unit ->
        Column {
            Clickable(onClick = look) {
                    Image(
                        painter = rememberImagePainter(recipe.attributes.mediaUrl),
                        contentDescription = null,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier
                            .height(150.dp)
                            .clip(RoundedCornerShape(10.dp))
                    )
              }
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                Icon(
                    tint = Color.Gray,
                    imageVector = Icons.Default.Schedule,
                    contentDescription = "time"
                )
                Text(text = recipe.totalTime)
                Icon(
                    tint = Color.Gray,
                    imageVector = Icons.Default.Person,
                    contentDescription = "person"
                )
                Text(text = recipe.attributes.numberOfGuests.toString())
                Icon(
                    tint = Color.Gray,
                    imageVector = Icons.Default.School,
                    contentDescription = "hat"
                )
                Text(text = "Difficulté  ${recipe.difficultyLabel}")
            }
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                Text(
                    text = recipe.attributes.title,
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }

You'll have to map in you view implementation property that you'll have in @Compose function signature

note

You can use what of the exposed poperty that will depend on your special needs

Then You just need to pass this val into our template holder :

Template.recipeCardTemplate = recipeFunctionTemplateVariable

info

As Compose doesn't support yet passing reference of a @Compose function we have to pass it through a variable