All children of the a compose app's material theme...

# compose

[Mehdi Haghgoo]

All children of the a compose app's material theme must follow the typography defined in that theme, mustn't they?

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DraftNotebookTheme {
                Surface(color = MaterialTheme.colors.background) {
                    MyButton("Android")
                }
            }
        }
    }
}

@Composable
fun MyButton(label: String) {
    Button(onClick = {}) {
        Text(label)
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    DraftNotebookTheme {
        MyButton("سلام دنیا")
    }
}

When doing preview, the text shown on the button does not follow the font family I have set in the theme. Is this a bug?

[efemoney]

Whats the definition for DraftNotebookTheme

[Mehdi Haghgoo]

@efemoney

@Composable
fun DraftNotebookTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
            colors = colors,
            typography = typography,
            shapes = shapes,
            content = content
    )
}

val typography = Typography(
        body1 = TextStyle(
                fontFamily = fontFamily(font(R.font.iransans)),
                fontWeight = FontWeight.Normal,
                fontSize = 12.sp,
                textDirection = TextDirection.Rtl
        )
)

[efemoney]

You can look at the code for Button to confirm but thats correct behavior. You are setting fontFamily for only body1, meanwhile Button composable provides MaterialTheme.typography.button as textStyle. If you look at the constructor for Typography it has default values for the rest that uses the default font family passed. The fix is to set the defaultFontFamily while constructing your Typography

[efemoney]

This is mine: uses default material typography definitions but overrides the font family.

[Mehdi Haghgoo]

Actually this is not a bug. For some reason, different types of composables use different text styles (e.g. buttons vs. body text). In my theme, no custom font was defined for buttons. After adding a text style for the button parameter of typography, the button is following the theme font.

val myFont = fontFamily(font(R.font.iransans))

val typography = Typography(

        body1 = TextStyle(
                fontFamily = fontFamily(myFont),
                fontWeight = FontWeight.Normal,
                fontSize = 12.sp,
                textDirection = TextDirection.Rtl
        ),
override
    button = TextStyle(
        fontFamily = fontFamily(myFont),
        fontWeight = FontWeight.W500,
        fontSize = 14.sp
    ),
)

[efemoney]

That is what I explained above 🙂, apologies if I wasnt clear enough. I would recommend to also define the defaultFontFamily if not you’ll still use the system default for components that dont use body1 or button styles