10/28/2014 How to customize / change ActionBar font, text, color, icon, layout and so on with Android | Java Code

Geeks
http://www.javacodegeeks.com/2014/08/how-to-customize-change-actionbar-font-text-color-icon-layout-and-so-on-with-android.html 1/4
Search this site...
You are here: Home Android Core How to customize / change ActionBar font, text, color, icon, layout and so on with Android
About Ricardo Ferreira
How to customize / change ActionBar font, text, color, icon,
layout and so on with Android
by Ricardo Ferreira on August 14th, 2014 | Filed in: Android Core
Hi there!
Today im gonna share a very common task with you. How to customize an ActionBar on Android. We will change layout, font, textsize,
textcolor, add listener to it, navigate back, hide title and home icon.
At the end we will have something like this:





Well, lets start by changing some API provided settings.
Downloading Font
First of all, go to 1001freefonts and donwload a font you want to apply to your text. It is free!
After downloading, create a folder called font into the folder assets in your projetcts root. (create it, if not exists already) It looks like
this: projectname>assets>font>yourfont.fft
Creating custom colors
We want to change the color of our font also. So for this reason, create two colors in your strings.xml file like this:
Creating custom ActionBar Layout
Newsletter
45573 insiders are already enjoying weekly
updates and complimentary whitepapers!
Join them now to gain exclusive access
to the latest news in the Java world, as well as
insights about Android, Scala, Groovy and other
related technologies.
Email address:
Your email address
Sign up
Join Us
With 819,138
unique visitors and over
authors we are placed among
the top Java related sites
around. Constantly being on
the lookout for partners; we
encourage you to join us. So
If you have a blog with unique and interesting
content then you should check out our
partners program. You can also be a
for Java Code Geeks and hone your writing skills!
Carrer Opportunities
Tags
Akka Apache Camel Apache Hadoop
Apache Maven Apache Tomcat
Cloud Concurrency
Design Patterns Eclipse
Gradle Grails IDE Java 7 Java 8
JavaFX JAXB JBoss Hibernate
JSF JSON JUnit JVM
1 <color name="selected">#824986</color>
2 <color name="unselected">#E4DFEC</color>
Director of Engineering ( FULL-TIME )
25th, 2014
Senior Application Developer ( FULL-TIME )
October 24th, 2014
Programmer III-IV ( FULL-TIME )
2014
Director of Engineering ( FULL-TIME )
24th, 2014
Machine Learning Principal Architect Job ( FULL-
TIME ) October 24th, 2014
Home Tutorials Join Us About Resources Examples Job Board Whitepapers Academy
Java Android JVM Languages Software Development Agile DevOps Communications Career Misc Meta JCG
10/28/2014 How to customize / change ActionBar font, text, color, icon, layout and so on with Android | Java Code Geeks
http://www.javacodegeeks.com/2014/08/how-to-customize-change-actionbar-font-text-color-icon-layout-and-so-on-with-android.html 2/4
As we want to customize our actionBar, we will need to create a customized layout for it. So in your layout folder, create a new
layout.xml file called custom_action_bar.xml like this:
Create createCutomActionBarTitle() in your Activity
Create this method and enable setDisplayShowCustomEnable to true and setDisplayShowTitleEnable to false. Then inflate the above
created custom_action_bar.xml file. Read your new downloaded font and set it to the textviews. At least add it to the actionBar. Done
with the layout.
Adding behaviors and navigate back funcions
A disavantage of customized actionBars is that you have to worry about everything. Including default behaviors like navigating back and
enabling actions on the new inserted TextViews. We will do this now. Normally you navigate from activity to activity and after doing
something youd like to give the possibility to the users to navigate back over touching the actionBars title. To do so, enhance the
method createCustomActionBarTitle like this:
MongoDB News NoSQL
Play Framework Project Management
RESTful Web Services
Spring Spring Data Spring MVC
Spring Security SQL Testing
01 < ?xml version="1.0" encoding="utf-8"? >
02 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03 android:id="@+id/actionBar"
04 android:layout_width="match_parent"
05 android:layout_height="match_parent"
06 android:gravity="center"
07 android:paddingLeft="5dp"
08 android:paddingTop="7dp"
09 android:orientation="horizontal" >
10 < TextView
11 android:id="@+id/titleFragment1"
12 android:layout_width="wrap_content"
13 android:layout_height="wrap_content"
14 android:text="Syntax"
15 android:textSize="20sp"
16 android:textColor="@color/selected" / >
17
18 < TextView
19 android:id="@+id/titleFragment2"
20 android:layout_width="wrap_content"
21 android:layout_height="wrap_content"
22 android:textSize="20sp"
23 android:text="ionary" / >
24 < / LinearLayout>
01 private void createCutomActionBarTitle(){
02 this.getActionBar().setDisplayShowCustomEnabled(true);
03 this.getActionBar().setDisplayShowTitleEnabled(false);
04
05 LayoutInflater inflator = LayoutInflater.from(this);
06 View v = inflator.inflate(R.layout.custom_action_bar, null);
07
08 Typeface tf = Typeface.createFromAsset(getAssets(),"font/yourfont.ttf");
09 ((TextView)v.findViewById(R.id.titleFragment1)).setTypeface(tf);
10 ((TextView)v.findViewById(R.id.titleFragment2)).setTypeface(tf);
11
12 //assign the view to the actionbar
13 this.getActionBar().setCustomView(v);
14 }
01 private void createCutomActionBarTitle(){
02 this.getActionBar().setDisplayShowCustomEnabled(true);
03 this.getActionBar().setDisplayShowTitleEnabled(false);
04
05 LayoutInflater inflator = LayoutInflater.from(this);
06 View v = inflator.inflate(R.layout.action_bar_contribution, null);
07
08 Typeface tf = Typeface.createFromAsset(getAssets(),"font/fat_tats.ttf");
09 TextView frag1 = (TextView)v.findViewById(R.id.titleFragment1);
10 frag1.setTypeface(tf);
11 TextView frag2 = (TextView)v.findViewById(R.id.titleFragment2);
12 frag2.setTypeface(tf);
13
14 frag1.setOnClickListener(new OnClickListener() {
15 @Override
16 public void onClick(View v) {
17 startActivity(new Intent(YourCurrentActivity.this, YourTargetActivity.class));
18 finish();
19 }
20 });
21 frag2.setOnClickListener(new OnClickListener() {
22 @Override
23 public void onClick(View v) {
24 startActivity(new Intent(YourCurrentActivity.this, YourTargetActivity.class));
25 finish();
26 }
27 });
28
29 //assign the view to the actionbar
30 this.getActionBar().setCustomView(v);
31 }
10/28/2014 How to customize / change ActionBar font, text, color, icon, layout and so on with Android | Java Code Geeks
http://www.javacodegeeks.com/2014/08/how-to-customize-change-actionbar-font-text-color-icon-layout-and-so-on-with-android.html 3/4
Adding MetaData to the Manifest file
We are almost done. To be able to navigate back, we need to write an entry in the manifest file. The YourTargetActivity is the activity
that will be called, wenn we press the actionBars title. In our case it would look like this:
Thats all! hope you like it! The application to download is here:
Reference: How to customize / change ActionBar font, text, color, icon, layout and so on with Android from our JCG partner
Ricardo Ferreira at the Clean Code Development Quality Seal blog.
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you two of our best selling eBooks for FREE!
JPA Mini Book
Learn how to leverage the power of JPA in order to create robust and flexible Java applications.
With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced
concepts.
JVM Troubleshooting Guide
The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it
with this advanced guide!
Email address: Your email address Sign up!
01 < activity android:label="yourActivityLabelName"
02 android:name="your.package.YourActivity"
03 android:parentactivityname="your.package.YourTargetActivity"
04 android:screenorientation="landscape"
05 android:windowsoftinputmode="stateHidden" >
06
07
08 < meta-data android:name="android.support.PARENT_ACTIVITY"
09 android:value="your.package.YourTargetActivity" >
10 < / meta-data>
11 < / activity>
Leave a Reply
Name (Required)
Mail (will not be published) (Required)
Website
10/28/2014 How to customize / change ActionBar font, text, color, icon, layout and so on with Android | Java Code Geeks
http://www.javacodegeeks.com/2014/08/how-to-customize-change-actionbar-font-text-color-icon-layout-and-so-on-with-android.html 4/4
Knowledge Base Partners
The Code Geeks Network
Hall Of Fame About Java Code Geeks
JCGs (Java Code Geeks) is an independent online community focused on
creating the ultimate Java to Java developers resource center; targeted at the
technical architect, technical team lead (senior developer), project manager and
junior developers alike. JCGs serve the Java, SOA, Agile and Telecom
communities with daily news written by domain experts, articles, tutorials,
reviews, announcements, code snippets and open source projects.
Java Code Geeks and all content copyright 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
six = 1
Notify me of followup comments via e-mail. You can also subscribe without commenting.
Sign me up for the newsletter!
Submit Comment
Academy
Examples
Resources
Tutorials
Whitepapers
Mkyong
Java Code Geeks
.NET Code Geeks
Web Code Geeks
Android Full Application Tutorial series
GWT 2 Spring 3 JPA 2 Hibernate 3.5 Tutorial
Android Game Development Tutorials
Android Google Maps Tutorial
Android Location Based Services Application
GPS location
Funny Source Code Comments
Java Best Practices Vector vs ArrayList vs
HashSet
Android JSON Parsing with Gson Tutorial
Android Quick Preferences Tutorial