Search code examples
androidfacebooklithofacebook-litho

FB Litho: How to set custom font for Text

My question is how to set a custom font for Text component in Facebook's UI framework Litho?

The following is my Text component:

 Text.create(componentContext)
                .flexGrow(1f)
                .verticalGravity(VerticalGravity.CENTER)
                .text("MY APP")
                .textSizeDip(25)
                .textAlignment(Layout.Alignment.ALIGN_CENTER)
Solution

  • To use the typeface prop, you must first obtain a Typeface object, which is significantly easier if you can use Support Library v26, which introduces Fonts in XML ... it's pretty simple to do so from a ComponentContext even inside your onCreateLayout method (though presumably you may wish to cache the Typeface):

    Text.create(c)
    .typeface(ResourcesCompat.getFont(
        c.getApplicationContext, R.font.my_cool_font)
    .text("Check out my cool font")
    .build()

    There is also a Typeface.Builder class available if you do not have access to Support v26, which gives you a few options about how to specify the desired font.