Mehdi Haghgoo

    Mehdi Haghgoo

    2 years ago
    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?
    e

    efemoney

    2 years ago
    Whats the definition for
    DraftNotebookTheme
    Mehdi Haghgoo

    Mehdi Haghgoo

    2 years ago
    @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
            )
    )
    e

    efemoney

    2 years ago
    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
    This is mine: uses default material typography definitions but overrides the font family.
    Mehdi Haghgoo

    Mehdi Haghgoo

    2 years ago
    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
        ),
    )
    e

    efemoney

    2 years ago
    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