Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,738,501 Members 46,550 Now Online
XDA Developers Android and Mobile Development Forum

[DETAILED GUIDE][CM11] Build your own Font app

Tip us?
 
codekidX
Old
(Last edited by codekidX; 30th June 2014 at 06:20 AM.)
#1  
codekidX's Avatar
Senior Member - OP
Thanks Meter 1547
Posts: 998
Join Date: Mar 2012
Location: Mumbai

 
DONATE TO ME
Default [DETAILED GUIDE][CM11] Build your own Font app

Hello guys, as everyone insisted me to write a guide on how to make CyanogenMod compatible fonts. I'll explain it in steps. I will be using Android Studio as the IDE for explaining, you can use Eclipse too. It will include the same procedure

STEP 1 : Initial Setup

*1* First we need to Create New Project
 


*2* Now follow the Image below

 


Add icon if you want.



STEP 2 : Editing Manifest File

*1* Now After the Project is set up you will see your font name above in top left corner. Now click on your fontname --> app --> src --> main --> AndroidManifest.xml. Replace everything with code given below.

Code:
Select Code
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="Your package name"
    android:versionCode="1"
    android:versionName="1.0" android:installLocation="internalOnly">
    <uses-sdk android:targetSdkVersion="19" android:minSdkVersion="19"></uses-sdk>
    <uses-feature android:name="org.cyanogenmod.theme" android:required="true" />
    <meta-data android:name="org.cyanogenmod.theme.name" android:value="fontname"/>
    <meta-data android:name="org.cyanogenmod.theme.author" android:value="Your/Author name" />
    <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:hasCode="false" android:allowBackup="false">
    </application>
</manifest>
Now replace your details in red line of above code.

STEP 3 : Adding Font and creating xml

Let's add font to the app. Double click on the fontname(top left). Now you'll see a hierarchical view like this :


Right click on the main folder and click on "Show in Explorer". You need to go inside main folder create assets folder and create fonts folder inside it and place your font there. Follow Image below :
 






Lets go back to Android Studio. Click on fonts folder and go to New --> File as shown in image below.

Name the file as fonts.xml and place the below code inside it:

 





Code:
Select Code
<?xml version="1.0" encoding="utf-8"?>
<familyset>
    <family>
        <nameset>
            <name>sans-serif</name>
            <name>arial</name>
            <name>helvetica</name>
            <name>tahoma</name>
            <name>verdana</name>
        </nameset>
        <fileset>
            <file>Crayon-Regular.ttf</file>
        </fileset>

    </family>
</familyset>
Replace red text with your font name and save it.[ CTRL + S ]

STEP 4 : Build app

Go to Build --> Make Project or CTRL + F9. At bottom there will be a text saying " Gradle invocation successfull" That means your app compiled well.
Now you need to find the app. See the image below :

 


EXTRA STEP : Font Family

Credits :

djdarkknight96 for creating template and teaching me how to do this on my own

Additional Links :

The Following 27 Users Say Thank You to codekidX For This Useful Post: [ Click to Expand ]
 
codekidX
Old
(Last edited by codekidX; 1st July 2014 at 10:30 AM.)
#2  
codekidX's Avatar
Senior Member - OP
Thanks Meter 1547
Posts: 998
Join Date: Mar 2012
Location: Mumbai

 
DONATE TO ME
Extra Step :

This is to know about font family. Let's say you have a thin or light version of your font ! You add it to the fonts folder inside assets folder like always, but now you need to make some changes to the fonts.xml now.

Changes :

You have to make a new family for that. Let's say you have a Roboto light font. To make a new family do this
Code:
Select Code
<family>
        <nameset>
            <name>sans-serif-light</name>
        </nameset>
        <fileset>
            <file>Roboto-Light.ttf</file>
            <file>Roboto-LightItalic.ttf</file>
        </fileset>
    </family>
See the workflow :

family --> nameset tag --> name(family name. in this case light)
fileset tag --> file(the font name)

Let me explain it with one more example. This is for thin fonts :

Code:
Select Code
<family> //Declare a new family
        <nameset> 
            <name>sans-serif-thin</name> //family name
        </nameset>
        <fileset>
            <file>Roboto-Thin.ttf</file> //file name
            <file>Roboto-ThinItalic.ttf</file>
        </fileset>
    </family> //End of this family
Families :

sans-serif family has the following types of fonts
Regular
Bold
Italic and
BoldItalic

And the thin and light families has the above types explained in extra step.

Now you say what is the default family set of android, here you go :

 
Code:
Select Code
<?xml version="1.0" encoding="utf-8"?>
<familyset>
    <family>
        <nameset>
            <name>sans-serif</name>
            <name>arial</name>
            <name>helvetica</name>
            <name>tahoma</name>
            <name>verdana</name>
        </nameset>
        <fileset>
            <file>Roboto-Regular.ttf</file>
            <file>Roboto-Bold.ttf</file>
            <file>Roboto-Italic.ttf</file>
            <file>Roboto-BoldtItalic.ttf</file>
        </fileset>
    </family>
    
    <family>
        <nameset>
            <name>sans-serif-light</name>
        </nameset>
        <fileset>
            <file>Roboto-Light.ttf</file>
            <file>Roboto-LightItalic.ttf</file>
        </fileset>
    </family>
    
    <family>
        <nameset>
            <name>sans-serif-thin</name>
        </nameset>
        <fileset>
            <file>Roboto-Thin.ttf</file>
            <file>Roboto-ThinItalic.ttf</file>
        </fileset>
    </family>
    
   <family>
        <nameset>
            <name>sans-serif-condensed</name>
        </nameset>
        <fileset>
            <file>RobotoCondensed-Regular.ttf</file>
            <file>RobotoCondensed-Bold.ttf</file>
            <file>RobotoCondensed-Italic.ttf</file>
            <file>RobotoCondensed-BoldItalic.ttf</file>
        </fileset>
    </family>
</familyset>

The Following 6 Users Say Thank You to codekidX For This Useful Post: [ Click to Expand ]
 
gewuerzwiesel1977
Old
#3  
gewuerzwiesel1977's Avatar
Senior Member
Thanks Meter 205
Posts: 1,261
Join Date: Jan 2009
Location: Weaslhausen
Very nice! 2 thumbs up!!
Note 3/N9005 - running AOSP
The Following User Says Thank You to gewuerzwiesel1977 For This Useful Post: [ Click to Expand ]
 
tflogic
Old
(Last edited by tflogic; 30th June 2014 at 04:11 AM.)
#4  
tflogic's Avatar
Senior Member
Thanks Meter 32
Posts: 191
Join Date: Apr 2011
Hi, codekidX. So I tried to make a font on my own but ran into a problem. I followed your tutorial all the way to Step 4: Build app.

When I got here, after pressing "Build > Make Project", I don't get a "Gradle Invocation successful" message nor an apk for my font. Instead, I get a "Gradle build finished" and when I go into my "package > app > build" folder, I don't see an "apk" folder but "generated" and "intermediates."

Any clue on how to fix this? Thanks!

edit: I figured it out! Apparently, Make Project doesn't build APKs on the newest versions of Android Studio, so you have to build from command line. Here's the link to input the correct commands to build the APK.
The Following User Says Thank You to tflogic For This Useful Post: [ Click to Expand ]
 
codekidX
Old
#5  
codekidX's Avatar
Senior Member - OP
Thanks Meter 1547
Posts: 998
Join Date: Mar 2012
Location: Mumbai

 
DONATE TO ME
Quote:
Originally Posted by tflogic View Post
Hi, codekidX. So I tried to make a font on my own but ran into a problem. I followed your tutorial all the way to Step 4: Build app.

When I got here, after pressing "Build > Make Project", I don't get a "Gradle Invocation successful" message nor an apk for my font. Instead, I get a "Gradle build finished" and when I go into my "package > app > build" folder, I don't see an "apk" folder but "generated" and "intermediates."

Any clue on how to fix this? Thanks!

edit: I figured it out! Apparently, Make Project doesn't build APKs on the newest versions of Android Studio, so you have to build from command line. Here's the link to input the correct commands to build the APK.
Ohh I will update the guide and Android Studio , did the font work good?
thank you for pointing out the error

I will update the guide with font-family tutorial soon
The Following User Says Thank You to codekidX For This Useful Post: [ Click to Expand ]
 
tflogic
Old
#6  
tflogic's Avatar
Senior Member
Thanks Meter 32
Posts: 191
Join Date: Apr 2011
Quote:
Originally Posted by codekidX View Post
Ohh I will update the guide and Android Studio , did the font work good?
thank you for pointing out the error

I will update the guide with font-family tutorial soon
Oh it wasn't an error at all, just a difference in versions apparently. Here's the discussion I found about Make Project and building apks.

Unfortunately, I got a package parsing error: "There is a problem parsing the package" when I tried to run the apk on my phone. Since this is past my own understanding in Android, I quit and just went ahead and installed the Android L font from your Project Sparky :P
 
codekidX
Old
#7  
codekidX's Avatar
Senior Member - OP
Thanks Meter 1547
Posts: 998
Join Date: Mar 2012
Location: Mumbai

 
DONATE TO ME
Quote:
Originally Posted by tflogic View Post
Oh it wasn't an error at all, just a difference in versions apparently. Here's the discussion I found about Make Project and building apks.

Unfortunately, I got a package parsing error: "There is a problem parsing the package" when I tried to run the apk on my phone. Since this is past my own understanding in Android, I quit and just went ahead and installed the Android L font from your Project Sparky :P
parsing error because you might have not set minimum required sdk to 4.4 and target sdk 4.4
 
tysonraylee
Old
(Last edited by tysonraylee; 30th June 2014 at 10:20 PM.)
#8  
tysonraylee's Avatar
Senior Member
Thanks Meter 248
Posts: 361
Join Date: Mar 2012
Location: London
does writing regular or thin or condensed in fonts.xml make any difference??
for example I have a regular style font but i don't write regular in fonts.xml and just write the font name
for example in guide it says crayon-regular.ttf
but I don't write regular I just write crayon.ttf
will this make any difference??
and if I have a thin style font but I don't mention abc-thin.ttf and only write abc.ttf will it not display the font in thin style??
please explain

edit : here is one of my fonts.xml which i am using without any problems. and every pack that I made is in the same way i.e only font name and no suffix of regular/thin/condensed etc

 


REVENGE SOLVES EVERYTHING
REVENGE SOLVES EVERYTHING
http://forum.xda-developers.com/signaturepics/sigpic4546806_1.gif
 
codekidX
Old
#9  
codekidX's Avatar
Senior Member - OP
Thanks Meter 1547
Posts: 998
Join Date: Mar 2012
Location: Mumbai

 
DONATE TO ME
Quote:
Originally Posted by tysonraylee View Post
does writing regular or thin or condensed in fonts.xml make any difference??
for example I have a regular style font but i don't write regular in fonts.xml and just write the font name
for example in guide it says crayon-regular.ttf
but I don't write regular I just write crayon.ttf
will this make any difference??
and if I have a thin style font but I don't mention abc-thin.ttf and only write abc.ttf will it not display the font in thin style??
please explain

edit : here is one of my fonts.xml which i am using without any problems. and every pack that I made is in the same way i.e only font name and no suffix of regular/thin/condensed etc

 


REVENGE SOLVES EVERYTHING
Hello, I have explained it in the 2nd post. so you need to name it regular so that it replaces the regular font of the system
ie: Roboto-Regular.ttf inside android system
 
tysonraylee
Old
#10  
tysonraylee's Avatar
Senior Member
Thanks Meter 248
Posts: 361
Join Date: Mar 2012
Location: London
Quote:
Originally Posted by codekidX View Post
Hello, I have explained it in the 2nd post. so you need to name it regular so that it replaces the regular font of the system
ie: Roboto-Regular.ttf inside android system
I am sorry but I don't understand the need to do so. I am not writing any suffix like thin/regular etc to the font name and they show up perfectly in the device.

do you mean by adding such suffixes the font adapts accordingly??
like let's say that there is a text
Heading
Sub Heading
Text
so if I include the thin,regular,light and condensed fonts the font will adapt the text accordingly
Heading (bold)
Sub heading (regular)
Text (light)
and if I don't add the thin,regular,light fonts then only the included font is applied everywhere??

I know this is confusing but please tell me why should we be adding a family set while a single font (as mentioned in the first post) was doing the job perfectly??

REVENGE SOLVES EVERYTHING
REVENGE SOLVES EVERYTHING
http://forum.xda-developers.com/signaturepics/sigpic4546806_1.gif
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes