CODEWITHSUNDEEP
androidapache-flexfontsflex4embedded-fonts
Alexander Farber
Alexander Farber

Reputation: 22988

Embedded fonts still shown in iOS app, but disappeared in Android app

There is a card game written in Apache Flex, which I am trying to keep alive and while the iOS version still works ok, the Android app has developed several visual problems:

  1. The card suit symbols are not displayed correctly (my main problem!)
  2. The ActionBar text color sometimes is black
  3. The BusyIndicator does not rotate anymore

Here are the Android-screenshots demonstrating my problem:

screenshot 1

screenshot 2

Here is my complete CSS file:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|ActionBar {
    chromeColor: #0066CC;
    color: #FFFFFF;   /* BUT WHY IS IT BLACK SOMETIMES? */
    titleAlign: center;
    textShadowColor: #000000;
    fontFamily: embFont;
}

@font-face { 
    src: url("/assets/fonts/arial.ttf"); 
    fontFamily: embFont;
    embedAsCFF: false; /* required for StyleableTextField */
    unicodeRange:
        U+0020-U+0040, /* Punctuation, Numbers */
        U+2660-U+2666, /* Card suits - BUT THEY STOPPED WORKING */
        U+0041-U+005A, /* Upper-Case A-Z */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0410-U+0451; /* Cyrillic */   
}

s|LabelItemRenderer {
    fontFamily: embFont;
}

And here is the excerpt of MXML code displaying card suits and the busy indicator:

<s:titleContent>
    <s:Label id="_titleTxt" 
             fontWeight="bold" 
             color="#FFFFFF" 
             width="100%" />

    <s:BusyIndicator id="_busy" 
                     includeInLayout="false"
                     visible="false" />
</s:titleContent>

<s:actionContent>
    <s:CalloutButton id="_leftBtn"
                     icon="{VIP}"
                     verticalPosition="after"
                     includeInLayout="false"
                     visible="false">
        <s:VGroup width="100%">
            <s:Label id="_left0" fontSize="{Preferans.FONT_SIZE}" />            
            <s:Label id="_left1" fontSize="{Preferans.FONT_SIZE}" color="#FF0000" />            
            <s:Label id="_left2" fontSize="{Preferans.FONT_SIZE}" />            
            <s:Label id="_left3" fontSize="{Preferans.FONT_SIZE}" color="#FF0000" />
        </s:VGroup>
    </s:CalloutButton>
...
</s:actionContent>

Adding following CSS code specifically for Label does not help:

s|Label {
    fontFamily: embFont;
}

Also I keep installing and recompiling my app with every new Apache Flex release and make sure, that I don't forget to install the optional flex-fontkit.jar but that does not help:

screenshot 3

screenshot 4

Please help, what have changed in Apache Flex 4 over the past few years that it has broken my Android app?

Here is an old picture of my app, when it worked properly:

screenshot 5

Upvotes: 1

Views: 178

Answers (1)

Clintm
Clintm

Reputation: 4877

Maybe this? https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=50856172

With the release of Apache Flex 4.14, we introduced new mobile skins targeting iOS7+ and Android 4+ versions. No code change is required to use these new skins.

But:

If you want to continue using the old legacy mobile theme/skins, add this compiler directive:

-includes=mx.utils.LegacyMobileThemeOverride

Upvotes: 2

Related Questions