Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP codekidX

28th June 2014, 07:13 PM   |  #1  
codekidX's Avatar
OP Senior Member
Flag Mumbai
Thanks Meter: 1,691
 
1,075 posts
Join Date:Joined: Mar 2012
Donate to Me
More


Video Tutorial :



Android Studio :
This is my first video for XDA :P comment if you dont understand something



Eclipse Tutorial :






-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


Written Guide :
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:
<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:
<?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 :

Last edited by codekidX; 4th August 2014 at 02:47 PM.
The Following 30 Users Say Thank You to codekidX For This Useful Post: [ View ]
28th June 2014, 07:13 PM   |  #2  
codekidX's Avatar
OP Senior Member
Flag Mumbai
Thanks Meter: 1,691
 
1,075 posts
Join Date:Joined: Mar 2012
Donate to Me
More
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:
<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:
<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:
<?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>

Last edited by codekidX; 1st July 2014 at 11:30 AM.
The Following 8 Users Say Thank You to codekidX For This Useful Post: [ View ]
28th June 2014, 07:28 PM   |  #3  
gewuerzwiesel1977's Avatar
Senior Member
Flag Weaslhausen
Thanks Meter: 212
 
1,295 posts
Join Date:Joined: Jan 2009
More
Very nice! 2 thumbs up!!
The Following User Says Thank You to gewuerzwiesel1977 For This Useful Post: [ View ]
30th June 2014, 04:53 AM   |  #4  
tflogic's Avatar
Senior Member
Thanks Meter: 35
 
232 posts
Join Date:Joined: 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.
Last edited by tflogic; 30th June 2014 at 05:11 AM.
The Following 2 Users Say Thank You to tflogic For This Useful Post: [ View ]
30th June 2014, 07:06 AM   |  #5  
codekidX's Avatar
OP Senior Member
Flag Mumbai
Thanks Meter: 1,691
 
1,075 posts
Join Date:Joined: Mar 2012
Donate to Me
More
Quote:
Originally Posted by tflogic

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 2 Users Say Thank You to codekidX For This Useful Post: [ View ]
30th June 2014, 09:12 AM   |  #6  
tflogic's Avatar
Senior Member
Thanks Meter: 35
 
232 posts
Join Date:Joined: Apr 2011
Quote:
Originally Posted by codekidX

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
30th June 2014, 10:30 AM   |  #7  
codekidX's Avatar
OP Senior Member
Flag Mumbai
Thanks Meter: 1,691
 
1,075 posts
Join Date:Joined: Mar 2012
Donate to Me
More
Quote:
Originally Posted by tflogic

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
30th June 2014, 08:59 PM   |  #8  
tysonraylee's Avatar
Senior Member
Flag Gotham
Thanks Meter: 609
 
546 posts
Join Date:Joined: Mar 2012
More
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
Last edited by tysonraylee; 30th June 2014 at 11:20 PM.
1st July 2014, 11:34 AM   |  #9  
codekidX's Avatar
OP Senior Member
Flag Mumbai
Thanks Meter: 1,691
 
1,075 posts
Join Date:Joined: Mar 2012
Donate to Me
More
Quote:
Originally Posted by tysonraylee

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
1st July 2014, 12:31 PM   |  #10  
tysonraylee's Avatar
Senior Member
Flag Gotham
Thanks Meter: 609
 
546 posts
Join Date:Joined: Mar 2012
More
Quote:
Originally Posted by codekidX

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

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes