CODEWITHSUNDEEP
androidandroid-jetpack-compose
MakiX
MakiX

Reputation: 466

How to display font familly on jetpack compose preview

How can I display font familly on jetpack compose preview ?

I have my font in path : res/font resource directory as .ttf type on then I'm using MaterialTheme.typography theme file to display them.. on emulator only.

ScreenShot

There is my Theme.kt:

private val DarkColorPalette = darkColors(
    primary = Green,
    secondary = Blue,
    background = Dark
)

private val LightColorPalette = lightColors(
    primary = Green,
    secondary = Blue,
    background = Dark
)

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

    CompositionLocalProvider(LocalSpacing provides Spacing()) {

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

}

Then there is my Type.kt file:

val Typography = Typography(
    body1 = TextStyle(
        fontFamily = PoppinsFont,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp,
        color = GreyMediumDark
    ),  
    body2 = ...
)

val Typography.textInput: TextStyle
    @Composable @ReadOnlyComposable
    get() = TextStyle(
        fontFamily = PoppinsFont,
        color = GreyVeryLight,
        fontWeight = FontWeight.Normal,
        fontSize = 15.sp
    )

Upvotes: 3

Views: 2226

Answers (2)

FRIST_008
FRIST_008

Reputation: 144

To solve this problem on Windows, you must copy fonts with the same name from the res/font folder to Control Panel > Fonts.

After restarting IDE/OS.

Upvotes: 3

maamar farouk benbada
maamar farouk benbada

Reputation: 11

After being stuck on this problem for an hour or two and banging my head once or twice, The solution turned out stupidly simple

the reply above already mentioned it but since you didn't include your mainAcitivty file ill have to give simple code examples

when you make a project your MainActivity function will looke something like this

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            'YourAppName'Theme {
                some default code
            }
        }
    }
}

the 'YourAppName'Theme is what applies the fontStyling but I and probably you deleted it from the DefaultPreview function since I dont use a theme usually and didn't add it all together in other UI composable functions.. anyway when you creat a new composable function, lets say

@Preview(showBackground = true)
@Composable
fun ShowText(){
    Text("This is an example text",style = MaterialTheme.typography.h1)
}

and try to preview it, the "This is an example text" won't have the theme style applied to it instead you have to wrap it in a theme block, aka

@Preview(showBackground = true)
@Composable
fun ShowText(){
    'YourAppName'Theme {
        Text("This is an example text",style = MaterialTheme.typography.h1)
    }
}

now the Text will have the custom font and wtver you want applied to it in the preview and do the same way in the default preview function if you want to preview everything

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    'YourAppName'Theme { //<- important!
        code you want to preview 
    }
}

hope this helps

Upvotes: 1

Related Questions