Creating a custom button with two lines of text, each with a different font

Question

I'm a little stuck here and could really use some help. It seems to me that it should be pretty easy to add two separate lines of text to a button. But it just isn't. There's a way to do it with html tags, but that doesn't let you specify the font or the text size beyond "large" and "small".

Here's my button, it's called 'clicky':

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/buttondown"
          android:state_pressed="true" />
    <item android:drawable="@drawable/buttonup" />
</selector>

And here's where it shows up in one of the layout files:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" 
 android:layout_width="fill_parent"
  android:layout_height="fill_parent">



<Button
        android:id="@+id/clicky"
        android:layout_width="137.5dip"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="2dip"
        android:layout_marginBottom="2dip"
        android:layout_marginRight="1dip"
        android:textSize="20dip"
        android:background="@drawable/clicky"
  />


  <ListView 
    android:id="@+id/ListView01" 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:divider="#000000"
    android:dividerHeight="2dip"
    android:layout_below="@+id/separator"/>

</RelativeLayout>

And here's what I have in the onCreate() method:

Typeface customFont = Typeface.createFromAsset(getAssets(),"fonts/zooper.ttf");
 Button mButton=(Button)findViewById(R.id.clicky);
        mButton.setText("Hi There");
        TextView clicky = (TextView)findViewById(R.id.clicky);
        clicky.setTypeface(customFont);

The text in the button is created dynamically so I have to do it from here (right now it's static, but later "Hi There" will be replaced with a variable). The other line of text will be much smaller, static and placed beneath "Hi There". I've gone through everything on Google that even remotely resembles my question but I just can't find an answer that I can adapt to my problem.

So once again, I need a single button with two separate lines of text, one above the other. The top line is large, dynamically created and uses a custom font. The lower line of text will be much smaller, static and can use a system font.

Is it really so hard just to nest a LinearLayout inside a button?

Any help would be much appreciated.

Sorry, can't give you an example, but try to search for the same problem with `EditText` or `TextView`. There should be solutions. — Dmitry Zaytsev, Aug 21 '12 at 05:59

Archie.bpgc · Accepted Answer · 2012-08-21T06:24:18.740

12

String s1;
String s2;
int n = s1.length();
int m = s2.length;

Typeface customFont = Typeface.createFromAsset(getAssets(),"fonts/zooper.ttf");
Spannable span = new SpannableString(s1 + "\n" +  s2);
//Big font till you find `\n`
span.setSpan(new CustomTypefaceSpan("", customFont), 0, n, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
//Small font from `\n` to the end
span.setSpan(new RelativeSizeSpan(0.8f), n, (n+m+1), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
yourButton.setText(span);

enter image description here

edited Aug 21 '12 at 06:24

answered Aug 21 '12 at 05:57

Archie.bpgc

23,812
38
150
226

It's ALMOST perfect. You still can't have different fonts on each line. – Doug Henning Aug 21 '12 at 06:15
My hope is to use a custom font (called zooper.ttf in my code example) for the big text, and just a regular system font for the small text. – Doug Henning Aug 21 '12 at 06:18
1

You sir are my hero and are now entitled to my first born. Works. One thing though, CustomtypeFaceSpan only works if you make your own class for it. I found and implemented [this](http://stackoverflow.com/questions/4819049/how-can-i-use-typefacespan-or-stylespan-with-custom-typeface) with your above code. Thanks again man! – Doug Henning Aug 21 '12 at 06:35

Creating a custom button with two lines of text, each with a different font

1 Answers1

Linked