How to customize / change ActionBar font, text, color, icon, layout and so on with Android
Hi there!
Today i’m 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 projetct’s 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:
<color name="selected">#824986</color> <color name="unselected">#E4DFEC</color>
Creating custom ActionBar Layout
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:
< ?xml version="1.0" encoding="utf-8"? >
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/actionBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:paddingLeft="5dp"
android:paddingTop="7dp"
android:orientation="horizontal" >
< TextView
android:id="@+id/titleFragment1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Syntax"
android:textSize="20sp"
android:textColor="@color/selected" / >
< TextView
android:id="@+id/titleFragment2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="ionary" / >
< / LinearLayout>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.
private void createCutomActionBarTitle(){
this.getActionBar().setDisplayShowCustomEnabled(true);
this.getActionBar().setDisplayShowTitleEnabled(false);
LayoutInflater inflator = LayoutInflater.from(this);
View v = inflator.inflate(R.layout.custom_action_bar, null);
Typeface tf = Typeface.createFromAsset(getAssets(),"font/yourfont.ttf");
((TextView)v.findViewById(R.id.titleFragment1)).setTypeface(tf);
((TextView)v.findViewById(R.id.titleFragment2)).setTypeface(tf);
//assign the view to the actionbar
this.getActionBar().setCustomView(v);
}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 you’d 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:
private void createCutomActionBarTitle(){
this.getActionBar().setDisplayShowCustomEnabled(true);
this.getActionBar().setDisplayShowTitleEnabled(false);
LayoutInflater inflator = LayoutInflater.from(this);
View v = inflator.inflate(R.layout.action_bar_contribution, null);
Typeface tf = Typeface.createFromAsset(getAssets(),"font/fat_tats.ttf");
TextView frag1 = (TextView)v.findViewById(R.id.titleFragment1);
frag1.setTypeface(tf);
TextView frag2 = (TextView)v.findViewById(R.id.titleFragment2);
frag2.setTypeface(tf);
frag1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(YourCurrentActivity.this, YourTargetActivity.class));
finish();
}
});
frag2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(YourCurrentActivity.this, YourTargetActivity.class));
finish();
}
});
//assign the view to the actionbar
this.getActionBar().setCustomView(v);
}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:
< activity android:label="yourActivityLabelName"
android:name="your.package.YourActivity"
android:parentactivityname="your.package.YourTargetActivity"
android:screenorientation="landscape"
android:windowsoftinputmode="stateHidden" >
< meta-data android:name="android.support.PARENT_ACTIVITY"
android:value="your.package.YourTargetActivity" >
< / meta-data>
< / activity>That’s 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. |
I don’t understand… Where did you call method createCutomActionBarTitle? You described it (by the way, in which file?), but didn’t call… Very poor manual…