{"id":320,"date":"2016-05-24T07:21:16","date_gmt":"2016-05-24T12:21:16","guid":{"rendered":"http:\/\/jebware.com\/blog\/?p=320"},"modified":"2020-06-05T11:13:13","modified_gmt":"2020-06-05T16:13:13","slug":"android-dev-tip-custom-fonts-for-textview","status":"publish","type":"post","link":"https:\/\/jebware.com\/blog\/?p=320","title":{"rendered":"Android dev tip: Custom fonts for TextView"},"content":{"rendered":"<p>So your designer friend is back and she drops you a hot new design. &nbsp;Due to a branding declaration from a highly-paid branding consultant, your whole app needs to use this new typeface.<\/p>\n<p><b><a href=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/Screen-Shot-2016-05-24-at-8.01.33-AM.png\" rel=\"attachment wp-att-337\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-337\" src=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/Screen-Shot-2016-05-24-at-8.01.33-AM.png\" alt=\"Screen Shot 2016-05-24 at 8.01.33 AM\" width=\"584\" height=\"304\" srcset=\"https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/Screen-Shot-2016-05-24-at-8.01.33-AM.png 584w, https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/Screen-Shot-2016-05-24-at-8.01.33-AM-300x156.png 300w\" sizes=\"(max-width: 584px) 85vw, 584px\" \/><\/a><\/b><span style=\"font-weight: 400;\"><small>Ok, probably not the whole app, just a few titles.<\/small><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s the catch though &#8212; Android doesn\u2019t ship with hot new typefaces like <a href=\"https:\/\/uptownsans.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Uptown Sans<\/a><\/span><span style=\"font-weight: 400;\">, so you have to figure out how to convince TextView to render with it. &nbsp;The goal is to make setting the font as easy as every other attribute on a TextView. &nbsp;<\/span><\/p>\n<p><b><a href=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/before-custom.png\" rel=\"attachment wp-att-323\"><img loading=\"lazy\" class=\"aligncenter wp-image-323 size-full\" src=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/before-custom.png\" alt=\"before-custom\" width=\"501\" height=\"172\" srcset=\"https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/before-custom.png 501w, https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/before-custom-300x103.png 300w\" sizes=\"(max-width: 501px) 85vw, 501px\" \/><\/a><\/b><span style=\"font-weight: 400;\">Yeah, lint is having none of that; see the highlight? &nbsp;And it\u2019s just going to be ignored by TextView. &nbsp;But hang with me for a couple minutes and you\u2019ll get there.<\/span><\/p>\n<p><b>Step 1. <\/b><span style=\"font-weight: 400;\">Copy your .otf into your assets folder<\/span><\/p>\n<p><b><a href=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/assets-folder.png\" rel=\"attachment wp-att-324\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-324\" src=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/assets-folder.png\" alt=\"assets-folder\" width=\"336\" height=\"114\" srcset=\"https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/assets-folder.png 336w, https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/assets-folder-300x102.png 300w\" sizes=\"(max-width: 336px) 85vw, 336px\" \/><\/a><\/b><b>Step 2. <\/b><span style=\"font-weight: 400;\">Copy this class into your project\u2026 Build\u2026 Breathe\u2026 we\u2019re almost there\u2026<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/jebware\/a85622a62e311882fff28f1999047118.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">We don\u2019t want to go to the effort of rewriting TextView from scratch, <a href=\"http:\/\/fragmentedpodcast.com\/episodes\/39\/\">it gives us so much<\/a>. &nbsp;We just want it to accept custom fonts from our layout XML. &nbsp;So we extend. &nbsp;Embrace, extend\u2026 embiggen? <\/span><small><span style=\"font-weight: 400;\"> It\u2019s something like that, I\u2019m pretty sure. &nbsp;Enfranchise? &nbsp;Embark? &nbsp;Empower? &nbsp;Yeah, empower, that has to be it. <\/span><\/small><\/p>\n<p><b>Step 3.<\/b><span style=\"font-weight: 400;\"> You need to add this to your attrs.xml, or create res\/values\/attrs.xml with this if you don\u2019t have one already<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/jebware\/2005d5b3000e8b2f112e43e387dbc4d8.js\"><\/script><\/p>\n<p><b>Step 4. <\/b><span style=\"font-weight: 400;\">Back to the layout file &#8211; but with two&nbsp;adjustments<\/span><\/p>\n<p><a href=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/layout-1.png\" rel=\"attachment wp-att-327\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-327\" src=\"http:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/layout-1.png\" alt=\"layout\" width=\"590\" height=\"337\" srcset=\"https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/layout-1.png 590w, https:\/\/jebware.com\/blog\/wp-content\/uploads\/2016\/05\/layout-1-300x171.png 300w\" sizes=\"(max-width: 590px) 85vw, 590px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s it. &nbsp;Build &amp; run, and you\u2019re done.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Extra Credit.<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">But wait, you say. &nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\">DRY that up<\/a>, right? &nbsp;Yeah, let\u2019s do. &nbsp;You don\u2019t want to have the type in the whole path to the font in every layout file, isn\u2019t that what auto-complete is for? &nbsp;So let&#8217;s kick it up a notch. &nbsp;Now I want two weights of that typeface, and the ability to easily reference one or the other.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We need to adjust your attribute to be an enum, instead of a string. &nbsp;Here\u2019s the new version:<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/jebware\/6e435d5dd123973a9adb02aa1599a53d.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">Then in the custom TextView, we can dereference those.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/jebware\/c4677144a532691473208ea31dd2161d.js\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">And we\u2019re there. &nbsp;See? &nbsp;Not that hard.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Yeah, so&#8230;<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u201cThere are other ways to do this!\u201d<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Agreed. &nbsp;There are others like it, but this one is mine. &nbsp;<a href=\"https:\/\/twitter.com\/jebstuart\">Tweet @ me<\/a> with better solutions.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u201cWhy not just use a TextView in the XML and use <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/TextView.html#setTypeface(android.graphics.Typeface)\">setTypeface()<\/a>&nbsp;to change the typeface?\u201d<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You totally could. &nbsp;I prefer to keep layout stuff in my layout files for code architecture reasons.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>What did I miss? &nbsp;Seriously, <a href=\"https:\/\/twitter.com\/jebstuart\">tweet @ me<\/a>. &nbsp;Half of the reason I wrote this article was because this feels like way too much work, so if you&#8217;ve got a better solution that I overlooked, I&#8217;d love to hear about it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So your designer friend is back and she drops you a hot new design. &nbsp;Due to a branding declaration from a highly-paid branding consultant, your whole app needs to use this new typeface. Ok, probably not the whole app, just a few titles. Here\u2019s the catch though &#8212; Android doesn\u2019t ship with hot new typefaces &hellip; <a href=\"https:\/\/jebware.com\/blog\/?p=320\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Android dev tip: Custom fonts for TextView&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"twitterCardType":"","cardImageID":0,"cardImage":"","cardTitle":"","cardDesc":"","cardImageAlt":"","cardPlayer":"","cardPlayerWidth":0,"cardPlayerHeight":0,"cardPlayerStream":"","cardPlayerCodec":""},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/320"}],"collection":[{"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320"}],"version-history":[{"count":11,"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/320\/revisions"}],"predecessor-version":[{"id":630,"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/320\/revisions\/630"}],"wp:attachment":[{"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jebware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}