Google fonts android studio

Downloadable Fonts In Android Studio

Make your app more beautiful with downloadable font’s..

Mar 30, 2018 · 2 min read

A ndroid introduced a downloadable fonts. Android Support Library 26 introduce support for APIs to request fonts from a provider application instead of bundling files into the APK or letting the APK download fonts. The feature is available on devices running Android API versions 14 and higher through the Support Library 26.

Benefits:

• Reduces the APK size
• Increases the app installation success rate
• Improves the overall system health as multiple APKs can share the same font through a provider. This saves users cellular data, phone memory, and disk space. In this model, the font is fetched over the network when needed.

Using Downloadable Fonts via Android Studio:

In the Layout Editor, select a TextView, and then under Properties, select fontFamily > More Fonts.

1. The Resources window appears.
2. In the Source drop-down list, select Google Fonts.
3. In the Fonts box, select a font.
4. Select Create downloadable font and click OK.

That’s it run your application and see the result 🙂

If you want to learn more about downloadable font’s then check it out the official documentation below:

Downloadable Fonts | Android Developers

Android 8.0 (API level 26) lets you download fonts instead of bundling them in your APK.

Thanks for reading this article. Be sure to clap to recommend this article if you found it helpful. It means a lot to me.

Источник

Get Started with the Google Fonts for Android

Android O and Android Support Library 26 add support for Downloadable Fonts.

Google Fonts is shipping a Font Provider in Google Play Services. This means Google Fonts are available to native apps on Android devices!

Which fonts can I use?

The entire Google Fonts Open Source collection! Visit https://fonts.google.com to browse.

What versions of Android are supported?

Our provider supports Jelly Bean (API level 16) and up. This represents 95%+ of of Android devices in the wild (platform dashboard). It can be accessed using APIs in Android Support Library 26 or Android O (API level 26).

How can I get started!

• Check out the demo app.
• Try it in Android Studio 3.0 (walkthrough with screenshots)
• Use Google Fonts declaratively or programmatically as shown in Downloadable Fonts.

Query Format

To request a font from the Google Fonts provider use the following query format:

Parameter	Required?	Range	Data Type	Default value
name	Yes	Any family from fonts.google.com	string
width	No	> 0	float	100
weight	No	(0, 1000) exclusive	int	400
italic	No	[0, 1] inclusive	float	0
besteffort	No	true/false	boolean	true

If besteffort is true and your query specifies a valid family name but the requested width/weight/italic value is not supported we will return the best match we can find within the family. For example, a request for Oswald at weight 900 would return Oswald at weight 700.

Security

For security you must specify the signature of the application exposing the provider you want to request fonts from. Android Studio will add the correct signature for you. See adding certificates.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Источник

The Android Developer’s Guide to Better Typography

Typography can make a big difference in the attractiveness and usability of an app, and now Android developers can use typefaces from the Google Fonts catalog. It’s simple, efficient, and opens up a range of new typographic options.

Every developer knows that design plays a major role in user experience—it can be a critical factor in the success or failure of your app. Still, there’s always the temptation to use default fonts, whether to push ahead with a release, to sidestep the complexity of integrating custom fonts, or just to avoid the seemingly arcane art of type selection.

Luckily, Android Studio has made it easier to build an app with distinctive typography using the new “Downloadable Fonts” feature. This feature puts the full Google Fonts catalog at your fingertips and makes it easy to customize typography on JellyBean and later (SDK level 16+) with free, reliable, high-quality Google Fonts.

Beyond aesthetic improvements, using downloadable fonts can also reduce the overall size of APK files, and decrease memory usage, because downloaded fonts will be shared among all applications. Your APK will be smaller because it doesn’t need to bundle the fonts upfront. Once a font is downloaded from Google Fonts for one app, Android keeps it on disk so other apps can use it too without any additional storage. Just like our web API, which serves fonts directly to websites, the more that people use Google Fonts, the greater the latency gains from sharing.

In this tutorial, we’ll improve the typography of a sample application by switching out the standard font for something with a more distinctive and dynamic range of styles from the Google Fonts catalog. We’ll use a typeface called Alegreya, which is known as a “super family” because it offers a wide range of styles, weights, and variants. Using a super family means we will have plenty of typographic options to fine tune the appearance of our interface.

The app we’ll work with is Plaid, by Nick Butcher, which is a scrollable feed of Material Design related news articles. These are presented as full-bleed tiles, which you can tap or click to expand into a ‘dribble’ page with favoriting and stats for ‘likes’ and ‘views.’

This tutorial is intended for developers, but it also explains some of the “why” decisions behind the design, so hold on to both hats!

Before We Get Started

Install Android Studio 3.0, then clone the “Plaid” project from Github and checkout b76937, the version we’ll be using for this tutorial:

Now open the project in Android Studio 3.0.

In order to use the Google Fonts provider, you must have Google Play Services version 12+ installed. If you’re working with a device that’s set up to receive updates, you can skip ahead; but if you’re using an emulator launched through Android Studio, it might be using an older version of Google Play Services. To update the Android Virtual Device from Android Studio, follow these steps.

1. Create a virtual device (Tools > Android > AVD Manager) with Play Store, indicated by the icon in the Play Store column:

2. Start a virtual device in Android Studio. To open the “Extended Controls,” on the right side of the emulator screen, tap or click the final . icon at the bottom of the vertical button panel:

3. Select Google Play and check the version number. If you’re running 11.2 or lower, tap or click the Update button. This should take you to the Play Store, where you should then tap or click its green Update button:

4. Now that you’ve updated to version 11.2 or higher, the device will support downloadable fonts.

Update the About Page

First, let’s update the About page. The “body text” paragraph in the lower half of the page is currently set in Roboto Regular, a sans font, while the title (in the top half) is set in Roboto Mono Regular. Let’s switch it to the serif typeface Alegreya, an energetic, contemporary design with a dynamic and varied rhythm inspired by calligraphic letterforms. The Alegreya type system is a “super family,” originally intended for literature, and includes serif and sans-serif sister families.

The title text serves as a “hero image,” a large graphic that leads people into the page and sets an emotional tone. This uses the title’s letterforms as a “mask” that cuts out the mint green foreground so an image can peek through from behind. Switching from Roboto Mono Regular to Alegreya Black will provide a larger surface area for that image to shine through.

Style the “About Activity” text

Since the “About Activity” text currently calls for the “default” text style, Roboto Regular, we’ll have to set another one manually:

1. Open app/src/main/res/layout/about_plaid.xml
2. Select the Design tab
3. In the Component Tree panel, open about_description
4. In the Attributes panel, open the fontFamily dropdown and select More Fonts… (You may have to click View all attributes to see fontFamily )
5. Select family Alegreya
6. Select style Regular

Android Studio has configured our app to retrieve the font from the Google Fonts ‘provider.’ In order to do so, it made a number of changes to our source tree:

app/src/main/res/font/ (learn more)
This new directory contains XML files describing font resources. In this case, it gives instructions for loading a Typeface from the Google Fonts Provider.

app/src/main/res/values/font_certs.xml (learn more)
To ensure that font requests are only answered by trusted parties, this file specifies the signature of the font provider.

app/src/main/res/values/preloaded_fonts.xml (learn more)
This is a list of fonts to load early in application startup. Corrected 4/12/2018; previously erroneously indicated these fonts load at install time.

app/src/main/AndroidManifest.xml: :
This is a list of fonts the Google Fonts provider will try to load at app install (or update) time.

You can see a sample diff for this step in commit a1e711c.

Update the cutout text view

The text style is currently Roboto Mono Regular. Let’s change it by continuing where we left off in the previous step:

7. In the Design view, select “CutoutTextView”

8. Open the “fontFamily” dropdown and select “More Fonts…”

9. Select family “Alegreya”

10. Select style “Black”

11. (For step 11, see below)

If you tried this right now, the font would still be Roboto Regular, not Alegreya Black. The reason is that declarative fonts are fetched asynchronously by default (learn more.) On completion, the system will try to update the font of a TextView using setTypeface, but this will fail because CutoutTextView does not extend TextView.

However, CutoutTextView does implement the fontFamily property (here). If we mark the font fetch as blocking, then the fontFamily will be ready when we ask for it. If we don’t mark it as blocking, the value returned for fontFamily won’t be usable yet. (We could also code async fetch ourselves, but let’s save that for later.)

11. Open app/src/main/res/font/alegreya.xml and alegreya-black.xml , then append this attribute to the end of the elements:

Now try it out! (You can see a sample diff for this step at commit f1c997)

Update text-size

Take a look at the “About” text. It’s grey on a somewhat lighter grey background. Alegreya is a serif typeface with high ‘stroke modulation,’ meaning that its letterforms vary widely from their thickest to their thinnest points. Somewhat counterintuitively, this leads to lower visual contrast overall. Fine variations in a letterform can make it appear blurry, especially at small sizes.

To mitigate this issue, let’s increase the text-size of the paragraph from 16sp to 18sp . This will increase the apparent contrast of the text against its background.

The TextView for about_plaid.xml uses a style called TextAppearance.About . To change the text size from 16sp to 18sp , edit this section of app/src/main/res/values/styles.xml :

You can see a sample diff for this step at github.com/rsheeter/plaid/commit/4dda25

Update the App Title

Next, we’ll change the title of our app by fetching a font programmatically. The title is currently set in Roboto with the OpenType “small caps” feature applied. We’ve also used extra ‘tracking’ to space out the letters.

(This detail is borrowed from a convention of book typography, where chapter titles are often printed in small caps along the tops of pages. To learn more about typography, check out the book Shaping Text by Jan Middendorp.)

Async fetch will fail because Toolbar isn’t a TextView, just as CutoutTextView is not. Also, Toolbar doesn’t implement the fontFamily property, so we can’t just set blocking to fix it.

Instead, let’s try fetching and assigning the font programmatically. In app/src/main/java/io/plaidapp/ui/HomeActivity.java use FontsContractCompat (reference) to request the font by following these four steps.

1. We’ll need a thread to await arrival of the font. Declare a variable to hold it:

2. Add a method to manage the font handling thread:

3. Add a method to apply a Typeface (reference) to the Toolbar:

4. In onCreate , launch an async fetch from the font provider:

Switch to Alegreya Sans SC Black

Reviewing the main page, notice that the title looks a little too thin. Like many serif typefaces, Alegreya’s highly modulated strokes lead to lower visual contrast, especially when when compared to the average sans-serif.

Luckily, Alegreya is a “super family” with both serif and sans varieties in a range of weights. Pairing these two fonts and using different weights can give structure to an interface, delineating UI from content. Let’s try Alegreya Sans Small Caps (SC.)

The small caps variant of Alegreya is inherently smaller, but we can correct for this by increasing its weight. Let’s try the Black (900) weight.

1. Copy res/font/alegreya.xml to create res/font/font/alegreya_sans_sc_black.xml
2. Edit alegreya_sans_sc_black.xml to change app:fontProviderQuery to name=Alegreya Sans SC&weight=900
3. Edit res/values/preloaded_fonts.xml to add the new font:

4. Specify the new query in HomeActivity.java :

Change Alegreya Black to Bold

Take another look at the title on the main page

The Black weight is a little too strong here, so let’s dial it down to Bold (700.)

1. Rename alegreya_sans_sc_black.xml to alegreya_sans_sc_bold.xml and edit to change app:fontProviderQuery to name=Alegreya Sans SC&weight=700
2. In HomeActivity.java update the query:

You can see a sample diff for the final state of the app (using Alegreya Sans SC Bold) at commit ac55478. See how your project compares.

Update Dribble View

To get to the “dribble” view in the app, tap or click a card on the main screen. Again, let’s replace Roboto Mono Regular with Alegreya Black.

In app/src/main/res/layout/dribbble_shot_title.xml , notice that the title and description are styled using @style/TextAppearance.DribbbleShotTitle and @style/TextAppearance.DribbbleShotDescription . Find these in app/src/main/res/values/styles.xml (hint: Ctrl+Click.) Now change the font:

You can see a sample diff for this at commit 0e53b56.

Change Numeral Styles

There’s just one more thing to improve on the “dribble” view.

The “likes” and “views” buttons use what are called “old style” numerals. These are designed to blend in with lowercase latin letters in paragraphs of text. But on their own, old style numerals look out of place because their descenders sometimes hang below the baseline of the other text.

Instead, let’s use the lnum feature. This tells the app to use “lining” numerals, which are more familiar looking because they are designed to be the same height as capital letters. (Learn more from our friends at Typekit)

Looking at app/src/main/res/layout/dribbble_shot_description.xml we can see that the “likes” and “views” counters are styled by @style/Widget.Plaid.InlineActionButton .

Find @style/Widget.Plaid.InlineActionButton in app/src/main/res/values/styles.xml (hint: Ctrl+Click.)

Now add an instruction to use lining numbers for these counters:

You can see a sample diff for this at commit 4dda25.

Conclusion

After applying these simple changes, my fork of the Plaid app now has more striking and functional typography drawn from Google’s library of free, open-source fonts. With Android’s new Downloadable Fonts feature, you can use anything in the Google Fonts directory to customize typography in your app. As you’ve seen in this tutorial, just a few changes can make a real difference in legibility and user experience. We’re excited to see what you do!

Источник