Android Tips: How to Place Image or Logo at The Center of Actionbar

When building an Android application, sometimes we need to put  application logo at the center of Actionbar. Android doesn’t provide a straight method to place a logo image at the center of Actionbar so we have to make a custom layout contains the logo image and place it on Actionbar using custom view.

This sample code below demonstrates how to place a logo at the center of actionbar

<br />public class MainActivity extends Activity {<br /><br /><%%KEEPWHITESPACE%%>	@Override<br /><%%KEEPWHITESPACE%%>	protected void onCreate(Bundle savedInstanceState) {<br /><%%KEEPWHITESPACE%%>		super.onCreate(savedInstanceState);<br /><br /><%%KEEPWHITESPACE%%>		getActionBar().setDisplayHomeAsUpEnabled(false);<br /><%%KEEPWHITESPACE%%>		getActionBar().setDisplayShowTitleEnabled(false);<br /><br /><%%KEEPWHITESPACE%%>		if (findViewById(android.R.id.home) != null) {<br /><%%KEEPWHITESPACE%%>			findViewById(android.R.id.home).setVisibility(View.GONE);<br /><%%KEEPWHITESPACE%%>		}<br /><br /><%%KEEPWHITESPACE%%>		LayoutInflater inflator = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);<br /><br /><%%KEEPWHITESPACE%%>		View view = inflator.inflate(R.layout.view_ab, null);<br /><br /><%%KEEPWHITESPACE%%>		ActionBar.LayoutParams params = new ActionBar.LayoutParams(<br /><%%KEEPWHITESPACE%%>			     ActionBar.LayoutParams.WRAP_CONTENT,<br /><%%KEEPWHITESPACE%%>			     ActionBar.LayoutParams.WRAP_CONTENT, Gravity.CENTER );<br /><br /><%%KEEPWHITESPACE%%>		getActionBar().setDisplayShowCustomEnabled(true);<br /><%%KEEPWHITESPACE%%>		getActionBar().setCustomView(view, params);<br /><br /><%%KEEPWHITESPACE%%>		setContentView(R.layout.activity_main);<br /><%%KEEPWHITESPACE%%>	}<br />}<br />
How it works:
Disable the title text and up menu
<br />getActionBar().setDisplayHomeAsUpEnabled(false);<br />getActionBar().setDisplayShowTitleEnabled(false);<br />
Hide the default application logo on the left of actionbar
<br />if (findViewById(android.R.id.home) != null) {<br /><%%KEEPWHITESPACE%%>    findViewById(android.R.id.home).setVisibility(View.GONE);<br />}<br />
Inflate the custom view contains the logo image
<br />View view = inflator.inflate(R.layout.view_ab, null);<br />
Set the custom view at the center of actionbar
<br />ActionBar.LayoutParams params = new ActionBar.LayoutParams(<br /><%%KEEPWHITESPACE%%>			     ActionBar.LayoutParams.WRAP_CONTENT,<br /><%%KEEPWHITESPACE%%>			     ActionBar.LayoutParams.WRAP_CONTENT, Gravity.CENTER );<br />
Finally, set the custom view into actionbar
<br />getActionBar().setDisplayShowCustomEnabled(true);<br />getActionBar().setCustomView(view, params);<br />
Remember we have to call getActionBar().setDisplayShowCustomEnabled(true) to enable custom view
[ad]
Custom view (view_ab.xml)
 
<br />&lt;?xml version="1.0" encoding="utf-8"?&gt;<br />&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /><%%KEEPWHITESPACE%%>    android:layout_width="wrap_content"<br /><%%KEEPWHITESPACE%%>    android:layout_height="wrap_content"&gt;<br /><br /><%%KEEPWHITESPACE%%>    &lt;ImageView<br /><%%KEEPWHITESPACE%%>        android:id="@+id/iv_logo"<br /><%%KEEPWHITESPACE%%>        android:layout_width="wrap_content"<br /><%%KEEPWHITESPACE%%>        android:layout_height="wrap_content"<br /><%%KEEPWHITESPACE%%>        android:contentDescription="@string/app_name"<br /><%%KEEPWHITESPACE%%>        android:clickable="true"<br /><%%KEEPWHITESPACE%%>        android:src="@drawable/ab_logo" /&gt;<br /><br />&lt;/LinearLayout&gt;<br />
by 

Related posts:

How to Select and Crop Image on Android 
How to Create Custom Window Title in Android 
How to Create Android Image Picker 
Coding Tips: How to Use Custom Font in Android