CODEWITHSUNDEEP
androidandroid-layout
Doug Henning
Doug Henning

Reputation: 33

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

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.

Upvotes: 3

Views: 6430

Answers (1)

Archie.bpgc
Archie.bpgc

Reputation: 24012

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

Upvotes: 12

Related Questions