How to center align the ActionBar title in Android

Question

I am trying to use the following code to center the text in the ActionBar  but it aligns itself to the left    How do you make it appear in the center   ActionBar actionBar   getActionBar    actionBar setDisplayShowTitleEnabled true   actionBar setTitle  Canteen Home    actionBar setHomeButtonEnabled true   actionBar setIcon R drawable back

User · Answer

After a lot of research  This actually works    getActionBar   setDisplayOptions ActionBar DISPLAY SHOW CUSTOM    getActionBar   setCustomView R layout custom actionbar     ActionBar LayoutParams p   new ActionBar LayoutParams ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams MATCH PARENT           p gravity   Gravity CENTER    You have to define custom actionbar xml layout which is as per your requirement e g      lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  50dp      android background   2e2e2e      android orientation  vertical      android gravity  center      android layout gravity  center  gt        lt ImageView         android id    id imageView1          android layout width  wrap content          android layout height  wrap content          android src   drawable top banner          android layout gravity  center            gt   lt  LinearLayout gt

User · Answer

To have a centered title in ABS  if you want to have this in the default ActionBar  just remove the  support  in the method names   you could just do this   In your Activity  in your onCreate   method   getSupportActionBar   setDisplayOptions ActionBar DISPLAY SHOW CUSTOM    getSupportActionBar   setCustomView R layout abs layout     abs layout    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  wrap content      android layout height  wrap content          android layout gravity  center      android orientation  vertical  gt        lt android support v7 widget AppCompatTextView         android id    id tvTitle          style   style TextAppearance AppCompat Widget ActionBar Title          android layout width  wrap content          android layout height  wrap content          android gravity  center          android textColor   FFFFFF    gt    lt  LinearLayout gt    Now you should have an Actionbar with just a title  If you want to set a custom background  set it in the Layout above  but then don t forget to set android layout height  match parent     or with   getSupportActionBar   setBackgroundDrawable getResources   getDrawable R drawable yourimage

User · Answer

Here s a quick tip to center align the action  android label  quot                      YourTitle quot  Assuming that you have Actionbar Enable  You can add this in your activity with some space  Can be adjusted  to place the title at the center  However  This is just diddly and unreliable method  You probably shouldn t do that  So  The best thing to do is to create a custom ActionBar  So  What you wanna do is remove the default Actionbar and use this to replace it as an ActionBar   lt androidx constraintlayout widget ConstraintLayout         android elevation  quot 30dp quot          android id  quot   id customAction quot          android layout width  quot match parent quot          android layout height  quot 56dp quot          android background  quot  color colorOnMain quot          android orientation  quot horizontal quot  gt                     lt TextView             android layout width  quot wrap content quot              android layout height  quot wrap content quot              android text  quot  string app name quot              android textAllCaps  quot true quot              android textColor  quot  FFF quot              android textSize  quot 18sp quot              android textStyle  quot bold quot              app layout constraintBottom toBottomOf  quot parent quot              app layout constraintEnd toEndOf  quot parent quot              app layout constraintStart toStartOf  quot parent quot              app layout constraintTop toTopOf  quot parent quot    gt        lt  androidx constraintlayout widget ConstraintLayout gt   I have used Constraint Layout to center the textView and used 10dp elevation with 56dp height so that it looks as same as the default ActionBar

User · Answer

A Kotlin-only solution that does not require to have changes in the XML Layouts     Function to call in onResume   of your activity private fun centerToolbarText         val mTitleTextView   AppCompatTextView this      mTitleTextView text   title     mTitleTextView setSingleLine    Remove it if you want to allow multiple lines in the toolbar     mTitleTextView textSize   25f     val layoutParams   android support v7 app ActionBar LayoutParams          ActionBar LayoutParams WRAP CONTENT          ActionBar LayoutParams WRAP CONTENT           layoutParams gravity   Gravity CENTER     supportActionBar  setCustomView mTitleTextView layoutParams      supportActionBar  displayOptions   ActionBar DISPLAY SHOW CUSTOM

User · Answer

without customview its able to center actionbar title  its perfectly working for navigation drawer as well      int titleId   getResources   getIdentifier  action bar title    id    android        TextView abTitle    TextView  findViewById titleId       abTitle setTextColor getResources   getColor R color white         DisplayMetrics metrics   new DisplayMetrics        getWindowManager   getDefaultDisplay   getMetrics metrics        abTitle setGravity Gravity CENTER       abTitle setWidth metrics widthPixels       getActionBar   setTitle  I am center now      Happy coding  thank you

User · Answer

This code will not hide back button  Same time will align the title in centre   call this method in oncreate   centerActionBarTitle       getSupportActionBar   setDisplayHomeAsUpEnabled true   myActionBar setIcon new ColorDrawable Color TRANSPARENT     private void centerActionBarTitle         int titleId   0      if  Build VERSION SDK INT  gt   Build VERSION CODES HONEYCOMB            titleId   getResources   getIdentifier  action bar title    id    android          else              This is the id is from your app s generated R class when             ActionBarActivity is used for SupportActionBar         titleId   R id action bar title                Final check for non-zero invalid id     if  titleId  gt  0            TextView titleTextView    TextView  findViewById titleId           DisplayMetrics metrics   getResources   getDisplayMetrics                Fetch layout parameters of titleTextView              LinearLayout LayoutParams   Info from HierarchyViewer          LinearLayout LayoutParams txvPars    LayoutParams  titleTextView getLayoutParams            txvPars gravity   Gravity CENTER HORIZONTAL          txvPars width   metrics widthPixels          titleTextView setLayoutParams txvPars           titleTextView setGravity Gravity CENTER

User · Answer

Best and easiest way  specifically for those who just want text view with gravity center without any xml layout   AppCompatTextView mTitleTextView   new AppCompatTextView getApplicationContext             mTitleTextView setSingleLine            ActionBar LayoutParams layoutParams   new ActionBar LayoutParams ActionBar LayoutParams WRAP CONTENT  ActionBar LayoutParams WRAP CONTENT           layoutParams gravity   Gravity CENTER          actionBar setCustomView mTitleTextView  layoutParams           actionBar setDisplayOptions ActionBar DISPLAY SHOW CUSTOM   ActionBar DISPLAY HOME AS UP           mTitleTextView setText text           mTitleTextView setTextAppearance getApplicationContext    android R style TextAppearance Medium

User · Answer

The other tutorials I ve seen override the whole action bar layout hiding the MenuItems  I ve got it worked just doing the following steps   Create a xml file as following    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent   gt        lt TextView         android id    id title          android layout width  wrap content          android layout height  wrap content          android layout centerInParent  true          android ellipsize  end          android maxLines  1          android text   string app name          android textAppearance   android attr textAppearanceMedium          android textColor   android color white    gt    lt  RelativeLayout gt    And in the classe do it   LayoutInflater inflator    LayoutInflater  this getSystemService Context LAYOUT INFLATER SERVICE   View v   inflator inflate R layout action bar title  null    ActionBar LayoutParams params   new ActionBar LayoutParams ActionBar LayoutParams WRAP CONTENT  ActionBar LayoutParams MATCH PARENT  Gravity CENTER    TextView titleTV    TextView  v findViewById R id title   titleTV setText  Test

User · Answer

Define your own custom view with title text  then pass LayoutParams to setCustomView    as Sergii says   ActionBar actionBar   getSupportActionBar   actionBar setDisplayShowCustomEnabled true   actionBar setDisplayOptions ActionBar DISPLAY SHOW CUSTOM    actionBar setCustomView getLayoutInflater   inflate R layout action bar home  null           new ActionBar LayoutParams                  ActionBar LayoutParams WRAP CONTENT                  ActionBar LayoutParams MATCH PARENT                  Gravity CENTER                EDITED  At least for width  you should use WRAP CONTENT or your navigation drawer  app icon  etc  WON T BE SHOWN  custom view shown on top of other views on action bar   This will occur especially when no action button is shown   EDITED  Equivalent in xml layout    lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  wrap content      android layout height  match parent      android layout gravity  center horizontal      android orientation  vertical  gt    This doesn t require LayoutParams to be specified   actionBar setCustomView getLayoutInflater   inflate R layout action bar home  null

User · Answer

Here is a complete Kotlin   androidx solution  building upon the answer from  Stanislas Heili  I hope it may be useful to others  It s for the case when you have an activity that hosts multiple fragments  with only one fragment active at the same time    In your activity   private lateinit var customTitle  AppCompatTextView  override fun onCreate savedInstanceState  Bundle         super onCreate savedInstanceState         stuff here     customTitle   createCustomTitleTextView          other stuff here    private fun createCustomTitleTextView    AppCompatTextView       val mTitleTextView   AppCompatTextView this      TextViewCompat setTextAppearance mTitleTextView  R style your style or null        val layoutParams   ActionBar LayoutParams          ActionBar LayoutParams WRAP CONTENT          ActionBar LayoutParams WRAP CONTENT           layoutParams gravity   Gravity CENTER     supportActionBar  setCustomView mTitleTextView  layoutParams      supportActionBar  displayOptions   ActionBar DISPLAY SHOW CUSTOM      return mTitleTextView    override fun setTitle title  CharSequence         customTitle text   title    override fun setTitle titleId  Int        customTitle text   getString titleId      In your fragments   override fun onViewCreated view  View  savedInstanceState  Bundle         super onViewCreated view  savedInstanceState       activity  title    some title for fragment

User · Answer

Code here working for me          Activity   public void setTitle String title       getSupportActionBar   setHomeButtonEnabled true       getSupportActionBar   setDisplayHomeAsUpEnabled true       TextView textView   new TextView this       textView setText title       textView setTextSize 20       textView setTypeface null  Typeface BOLD       textView setLayoutParams new LinearLayout LayoutParams LinearLayout LayoutParams FILL PARENT  LinearLayout LayoutParams WRAP CONTENT        textView setGravity Gravity CENTER       textView setTextColor getResources   getColor R color white        getSupportActionBar   setDisplayOptions ActionBar DISPLAY SHOW CUSTOM       getSupportActionBar   setCustomView textView          Fragment public void setTitle String title         AppCompatActivity getActivity    getSupportActionBar   setHomeButtonEnabled true         AppCompatActivity getActivity    getSupportActionBar   setDisplayHomeAsUpEnabled true       TextView textView   new TextView getActivity         textView setText title       textView setTextSize 20       textView setTypeface null  Typeface BOLD       textView setLayoutParams new LinearLayout LayoutParams LinearLayout LayoutParams FILL PARENT  LinearLayout LayoutParams WRAP CONTENT        textView setGravity Gravity CENTER       textView setTextColor getResources   getColor R color white          AppCompatActivity getActivity    getSupportActionBar   setDisplayOptions ActionBar DISPLAY SHOW CUSTOM         AppCompatActivity getActivity    getSupportActionBar   setCustomView textView

User · Answer

It works nicely   activity    AppCompatActivity  getActivity     activity getSupportActionBar   setDisplayOptions ActionBar DISPLAY SHOW CUSTOM    LayoutInflater inflater    LayoutInflater  activity getSystemService Context LAYOUT INFLATER SERVICE   View v   inflater inflate R layout custom actionbar  null    ActionBar LayoutParams p   new ActionBar LayoutParams          ViewGroup LayoutParams MATCH PARENT          ViewGroup LayoutParams MATCH PARENT          Gravity CENTER      TextView  v findViewById R id title   setText FRAGMENT TITLE    activity getSupportActionBar   setCustomView v  p   activity getSupportActionBar   setDisplayShowTitleEnabled true   activity getSupportActionBar   setDisplayHomeAsUpEnabled true     Below layout of custom actionbar    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent  gt        lt TextView         android id    id title          android layout width  wrap content          android text  Example          android layout height  wrap content          android layout centerInParent  true          android ellipsize  end          android maxLines  1          android textAppearance   android attr textAppearanceMedium          android textColor   color colorBlack    gt    lt  RelativeLayout gt

User · Answer

Just a quick addition to Ahmad s answer  You can t use getSupportActionBar   setTitle anymore when using a custom view with a TextView  So to set the title when you have multiple Activities with this custom ActionBar  using this one xml   in your onCreate   method after you assign a custom view   TextView textViewTitle    TextView  findViewById R id mytext   textViewTitle setText R string title for this activity

User · Answer

For Kotlin users   Use the following code in your activity      Set custom action bar supportActionBar  displayOptions   ActionBar DISPLAY SHOW CUSTOM supportActionBar  setCustomView R layout action bar      Set title for action bar val title   findViewById lt TextView gt  R id titleTextView  title setText resources getText R string app name     And the XML  resource layout    lt  xml version  1 0  encoding  utf-8   gt   lt android support constraint ConstraintLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      xmlns tools  http   schemas android com tools      android layout width  match parent      android layout height  match parent  gt        lt TextView         android id    id titleTextView          android layout width  wrap content          android layout height  wrap content          android text  Title          android textColor   color black          android textSize  18sp          app layout constraintBottom toBottomOf  parent          app layout constraintEnd toEndOf  parent          app layout constraintStart toStartOf  parent          app layout constraintTop toTopOf  parent    gt   lt  android support constraint ConstraintLayout gt

User · Answer

I haven t had much success with the other answers    below is exactly what worked for me on Android 4 4 3 using the ActionBar in the support library v7  I have it set up to show the navigation drawer icon   burger menu button    XML       lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout     xmlns android  http   schemas android com apk res android      android layout width  wrap content      android layout height  wrap content      android orientation  horizontal   gt        lt TextView         android id    id actionbar textview          android layout width  wrap content          android layout height  wrap content          android layout gravity  center          android maxLines  1          android clickable  false          android focusable  false          android longClickable  false          android textStyle  bold          android textSize  18sp          android textColor   FFFFFF    gt    lt  LinearLayout gt    Java    Customize the ActionBar final ActionBar abar   getSupportActionBar    abar setBackgroundDrawable getResources   getDrawable R drawable actionbar background     line under the action bar View viewActionBar   getLayoutInflater   inflate R layout actionbar titletext layout  null   ActionBar LayoutParams params   new ActionBar LayoutParams   Center the textview in the ActionBar           ActionBar LayoutParams WRAP CONTENT           ActionBar LayoutParams MATCH PARENT           Gravity CENTER   TextView textviewTitle    TextView  viewActionBar findViewById R id actionbar textview   textviewTitle setText  Test    abar setCustomView viewActionBar  params   abar setDisplayShowCustomEnabled true   abar setDisplayShowTitleEnabled false   abar setDisplayHomeAsUpEnabled true   abar setIcon R color transparent   abar setHomeButtonEnabled true

User · Answer

You need to set ActionBar LayoutParams WRAP CONTENT and ActionBar DISPLAY HOME AS UP  View customView   LayoutInflater from this  inflate R layout actionbar title  null   ActionBar LayoutParams params   new ActionBar LayoutParams ActionBar LayoutParams WRAP CONTENT                  ActionBar LayoutParams MATCH PARENT  Gravity CENTER    getSupportActionBar   setDisplayOptions ActionBar DISPLAY SHOW CUSTOM   ActionBar DISPLAY SHOW HOME   ActionBar DISPLAY HOME AS UP

User · Answer

OK  After a lot of research  combined with the accepted answer above  I have come up with a solution that also works if you have other stuff in your action bar  back home button  menu button   So basically I have put the override methods in a basic activity  which all other activities extend   and placed the code there  This code sets the title of each activity as it is provided in AndroidManifest xml  and also does som other custom stuff  like setting a custom tint on action bar buttons  and custom font on the title   You only need to leave out the gravity in action bar xml  and use padding instead  actionBar    null check is used  since not all my activities have one   Tested on 4 4 2 and 5 0 1  public class BaseActivity extends AppCompatActivity   private ActionBar actionBar  private TextView actionBarTitle  private Toolbar toolbar    Override protected void onCreate Bundle savedInstanceState        getWindow   requestFeature Window FEATURE CONTENT TRANSITIONS       super onCreate savedInstanceState                    getWindow   setSoftInputMode WindowManager LayoutParams SOFT INPUT STATE ALWAYS HIDDEN        actionBar   getSupportActionBar        if  actionBar    null            actionBar setElevation 0           actionBar setDisplayOptions ActionBar DISPLAY SHOW CUSTOM           actionBar setCustomView R layout action bar            LinearLayout layout    LinearLayout  actionBar getCustomView            actionBarTitle    TextView  layout getChildAt 0           actionBarTitle setText this getTitle             actionBarTitle setTypeface Utility getSecondaryFont this            toolbar    Toolbar  layout getParent            toolbar setContentInsetsAbsolute 0  0            if  this getClass      BackButtonActivity class    this getClass      AnotherBackButtonActivity class                actionBar setHomeButtonEnabled true               actionBar setDisplayHomeAsUpEnabled true               actionBar setDisplayShowHomeEnabled true               Drawable wrapDrawable   DrawableCompat wrap getResources   getDrawable R drawable ic back                DrawableCompat setTint wrapDrawable  getResources   getColor android R color white                actionBar setHomeAsUpIndicator wrapDrawable               actionBar setIcon null                     else               actionBar setHomeButtonEnabled false               actionBar setDisplayHomeAsUpEnabled false               actionBar setDisplayShowHomeEnabled false               actionBar setHomeAsUpIndicator null               actionBar setIcon null                        try           ViewConfiguration config   ViewConfiguration get this           Field menuKeyField   ViewConfiguration class getDeclaredField  sHasPermanentMenuKey            if menuKeyField    null                menuKeyField setAccessible true               menuKeyField setBoolean config  false                   catch  Exception ex               Ignore           Override public boolean onCreateOptionsMenu Menu menu        if  actionBar    null            int padding    getDisplayWidth   - actionBarTitle getWidth    2           MenuInflater inflater   getMenuInflater            if  this getClass      MenuActivity class                inflater inflate R menu activity close menu  menu                     else               inflater inflate R menu activity open menu  menu                      MenuItem item   menu findItem R id main menu           Drawable icon   item getIcon            icon mutate   mutate   setColorFilter getResources   getColor R color white   PorterDuff Mode SRC IN           item setIcon icon            ImageButton imageButton          for  int i  0  i  lt  toolbar getChildCount    i                  if  toolbar getChildAt i  getClass      ImageButton class                    imageButton    ImageButton  toolbar getChildAt i                   padding -  imageButton getWidth                    break                                   actionBarTitle setPadding padding  0  0  0              return super onCreateOptionsMenu menu           And my action bar xml is like this  if anyone is interested     lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android            android layout width  fill parent            android layout height  wrap content            android layout gravity  center            android orientation  horizontal  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android textColor   color actionbar text color          android textAllCaps  true          android textSize  9pt            gt    lt  LinearLayout gt    EDIT  If you need to change the title to something else AFTER the activity is loaded  onCreateOptionsMenu has already been called   put another TextView in your action bar xml and use the following code to  pad  this new TextView  set text and show it   protected void setSubTitle CharSequence title         if   initActionBarTitle    return       if  actionBarSubTitle    null            if  title    null    title length    gt  0                actionBarSubTitle setText title               setActionBarSubTitlePadding                       private void setActionBarSubTitlePadding         if  actionBarSubTitlePaddingSet  return      ViewTreeObserver vto   layout getViewTreeObserver        if vto isAlive             vto addOnGlobalLayoutListener new ViewTreeObserver OnGlobalLayoutListener                  Override             public void onGlobalLayout                     int padding    getDisplayWidth   - actionBarSubTitle getWidth    2                   ImageButton imageButton                  for  int i   0  i  lt  toolbar getChildCount    i                          if  toolbar getChildAt i  getClass      ImageButton class                            imageButton    ImageButton  toolbar getChildAt i                           padding -  imageButton getWidth                            break                                                           actionBarSubTitle setPadding padding  0  0  0                   actionBarSubTitlePaddingSet   true                  ViewTreeObserver obs   layout getViewTreeObserver                    obs removeOnGlobalLayoutListener this                                      protected void hideActionBarTitle          if   initActionBarTitle    return       actionBarTitle setVisibility View GONE       if  actionBarSubTitle    null            actionBarSubTitle setVisibility View VISIBLE            protected void showActionBarTitle          if   initActionBarTitle    return       actionBarTitle setVisibility View VISIBLE       if  actionBarSubTitle    null            actionBarSubTitle setVisibility View GONE             EDIT  25 08 2016   This does not work with appcompat 24 2 0 revision  August 2016   if your activity has a  back button   I filed a bug report  Issue 220899   but I do not know if it is of any use  doubt it will be fixed any time soon   Meanwhile the solution is to check if the child s class is equal to AppCompatImageButton class and do the same  only increase the width by 30   e g  appCompatImageButton getWidth   1 3 before subtracting this value from the original padding    padding -  appCompatImageButton getWidth   1 3    In the mean time I threw in some padding margin checks in there       Class lt   gt  c      ImageButton imageButton      AppCompatImageButton appCompatImageButton      for  int i   0  i  lt  toolbar getChildCount    i              c   toolbar getChildAt i  getClass            if  c    AppCompatImageButton class                appCompatImageButton    AppCompatImageButton  toolbar getChildAt i               padding -  appCompatImageButton getWidth   1 3              padding -  appCompatImageButton getPaddingLeft                padding -  appCompatImageButton getPaddingRight                if  appCompatImageButton getLayoutParams   getClass      LinearLayout LayoutParams class                    padding -    LinearLayout LayoutParams  appCompatImageButton getLayoutParams    getMarginEnd                    padding -    LinearLayout LayoutParams  appCompatImageButton getLayoutParams    getMarginStart                              break                    else if  c    ImageButton class                imageButton    ImageButton  toolbar getChildAt i               padding -  imageButton getWidth                padding -  imageButton getPaddingLeft                padding -  imageButton getPaddingRight                if  imageButton getLayoutParams   getClass      LinearLayout LayoutParams class                    padding -    LinearLayout LayoutParams  imageButton getLayoutParams    getMarginEnd                    padding -    LinearLayout LayoutParams  imageButton getLayoutParams    getMarginStart                              break

User · Answer

My solution will be to keep text part of tool bar separate  to define style and say  center or whichever alignment  It can be done in XML itself  Some paddings can be specified after doing calculations when you have actions that are visible always  I have moved two attributes from toolbar to its child TextView  This textView can be provided id to be accessed from fragments       lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt androidx coordinatorlayout widget CoordinatorLayout xmlns android  quot http   schemas android com apk res android quot      xmlns app  quot http   schemas android com apk res-auto quot      xmlns tools  quot http   schemas android com tools quot      android layout width  quot match parent quot      android layout height  quot match parent quot      android fitsSystemWindows  quot true quot  gt        lt com google android material appbar AppBarLayout         android layout width  quot match parent quot          android layout height  quot wrap content quot          android theme  quot  style AppTheme AppBarOverlay quot  gt            lt androidx appcompat widget Toolbar             android id  quot   id toolbar quot              android layout width  quot match parent quot              android layout height  quot  attr actionBarSize quot              android background  quot  attr colorPrimary quot              app popupTheme  quot  style AppTheme PopupOverlay quot   gt               lt  --android theme  quot  style defaultTitleTheme quot              app titleTextColor  quot  color white quot -- gt               lt TextView                 android layout width  quot match parent quot                  android layout height  quot wrap content quot                  android gravity  quot center quot                  android paddingStart  quot  dimen icon size quot                  android text  quot  string title home quot                  style  quot  style defaultTitleTheme quot                  tools ignore  quot RtlSymmetry quot    gt           lt  androidx appcompat widget Toolbar gt       lt  com google android material appbar AppBarLayout gt        lt FrameLayout         android id  quot   id container quot          android layout width  quot match parent quot          android layout height  quot match parent quot    gt    lt  androidx coordinatorlayout widget CoordinatorLayout gt

[android] How to center align the ActionBar title in Android?

Examples related to android

Examples related to android-actionbar

Examples related to android-theme