Android - apply different fonts to text of the button

In some cases, you might want to display text on the Button with different fonts. For example, the first part of the text is an icon (created by an icon font) and the second part is a pure text. In Android, you cannot apply different font styles to parts of text of the Button widget. However, this problem still can be solved. The solution is creating a LinearLayout or RelativeLayout that will be used as a button. In the layout, you need to add two TextViews. One TextView is for icon part and another TextFiew shows the text part of the Button.


To implement this solution, you will create a new project using Eclipse ADT. Then modify the Activity_Main.xml layout file to include a RelativeLayout and its elements as shown below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >

  
<RelativeLayout
   android:id="@+id/button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:minWidth="300dip"
   android:padding="8dip"
   android:layout_marginBottom="10dip"
   android:background="#0B6121"
  
   >
    <TextView
     android:id="@+id/btview1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="30sp"
     android:textColor="#ffffff"
     />
  
<TextView
     android:id="@+id/btview2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="30sp"
     android:textColor="#ffffff"
     android:layout_alignParentRight="true"
     />
  
   </RelativeLayout>


</RelativeLayout>


The layout above defines a custom button that has two parts: text and icon. Next, open the MainActivity.java file and add onStart method to the MainActivity class. This method shows the text �Search� and a search icon (created by heydings icon font stored in assets folder) on the custom button. Here is the content of the onStart method:

public void onStart(){
   super.onStart();
   RelativeLayout buttonlayout= (RelativeLayout)findViewById(R.id.button);
TextView view1=(TextView)buttonlayout.findViewById(R.id.btview1);
view1.setText("Search");
TextView view2=(TextView)buttonlayout.findViewById(R.id.btview2);
Typeface font= Typeface.createFromAsset(this.getAssets(), "heydings_icons.ttf");
view2.setTypeface(font);
view2.setText("\u004D");
buttonlayout.setOnClickListener(new OnClickListener() {

     @Override
     public void onClick(View v) {
        // TODO DO whatever you want to do here

     }
   });
   }

Now run the project. You will see the output as shown below.

Apply-different-fonts-to-text-of-the-button

Posted by: Dara | post date: 05-07-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.