Ryan Sayles
Ryan Sayles

Reputation: 3431

Centering toolbar title

I have a custom toolbar and I'm utilizing TextSwitcher. My issue is I'm centering the text but when I apply the back button the text moves to the right. I'm assuming this is caused by the button creating it's own layout moving the existing one over. I noticed the text is centered again if I enable the options on the toolbar but I do not want this. I tried setting the visibility of the options to hidden but that seems to remove the element completely. I'd rather not create a custom back button so any help would be appreciated. The following code is in my onCreate method in my Activity:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    TextSwitcher tvToolbar = (TextSwitcher) findViewById(R.id.textSwitcher);
    tvToolbar.setFactory(new ViewSwitcher.ViewFactory() {

        public View makeView() {
            TextView myText = new TextView(MyActivity.this);
            myText.setGravity(Gravity.CENTER);
            myText.setSingleLine(true);
            myText.setTextSize(24);
            myText.setTextColor(Color.WHITE);
            myText.setText("Booths");
            return myText;
        }
    });

    setSupportActionBar(toolbar);
    android.support.v7.app.ActionBar mActionBar = getSupportActionBar();
    if (mActionBar != null) {
        mActionBar.setDisplayHomeAsUpEnabled(true);
        mActionBar.setElevation(4);
    }

Upvotes: 2

Views: 2654

Answers (2)

risto
risto

Reputation: 100

I am assuming you are trying to animate the toolbar title, so here is what i did to manage that:

-First you need a FrameLayout parent for the title so when you animate it you wont overlap with some icons (most notably the drawer icon)

-Then comes the simple TextView, which is the title, just use ToolBarTitle style and you wont need anything else.

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity=""
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

<!-- This layout is used so the animation for the title view,does not overlap the drawer icon -->

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="" >

    <TextView
        android:id="@+id/toolbar_title"
        style="@style/ToolbarTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

When you inflate the toolbar layout, be sure the set the original toolbar title to a empty string so it wont overlap our custom

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("");

    toolbarTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);

Now you can easily animate the title as you wish, here is my implementation, which animates the title sliding in from the left and sliding out to the left, every time i change the title.

/**
 * Changes the action bar title.
 */
@Override
public void setTitle(final CharSequence title) {
    mTitle = title;
    Animation makeOut = AnimationUtils.makeOutAnimation(
            MainMenuActivity.this, false);
    makeOut.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationEnd(Animation animation) {
            toolbarTitle.setText(title);
            toolbarTitle.startAnimation(AnimationUtils.makeInAnimation(
                    MainMenuActivity.this, true));
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }

        @Override
        public void onAnimationStart(Animation animation) {

        }
    });
    toolbarTitle.startAnimation(makeOut);

}

Upvotes: 0

kandroidj
kandroidj

Reputation: 13922

best bet is to create a Toolbar and include a Layout in the Toolbar which allows positioning:

<?xml version="1.0" encoding="utf-8?>
<android.support.v7.widget.Toolbar
   android:id="@+id/toolbar"
   android:layout_width="fill_parent"
   android:layout_height="?actionBarSize">
   <android.support.v7.widget.AppCompatTextView
      android:text="My Title"
      android:textSize="24sp"
      android:textColor="#FFF"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>

or in your specific case use the TextSwitcher

<?xml version="1.0" encoding="utf-8?>
<android.support.v7.widget.Toolbar
   android:id="@+id/toolbar"
   android:layout_width="fill_parent"
   android:layout_height="?actionBarSize">
       <TextSwitcher
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center">
             <android.support.v7.widget.AppCompatTextView
                    android:text="My Title"
                    android:textSize="24sp"
                    android:textColor="#FFF"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
       </TextSwitcher>
 </android.support.v7.widget.Toolbar>

Upvotes: 4

Related Questions