Android toolbar center title and custom font

前端 未结 30 2722
时光说笑
时光说笑 2020-11-22 04:11

I\'m trying to figure out the right way to use a custom font for the toolbar title, and center it in the toolbar (client requirement).

At the moment, i\'m using the

相关标签:
30条回答
  • 2020-11-22 04:46

    I use this solution:

    static void centerToolbarTitle(@NonNull final Toolbar toolbar) {
        final CharSequence title = toolbar.getTitle();
        final ArrayList<View> outViews = new ArrayList<>(1);
        toolbar.findViewsWithText(outViews, title, View.FIND_VIEWS_WITH_TEXT);
        if (!outViews.isEmpty()) {
            final TextView titleView = (TextView) outViews.get(0);
            titleView.setGravity(Gravity.CENTER);
            final Toolbar.LayoutParams layoutParams = (Toolbar.LayoutParams) titleView.getLayoutParams();
            layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
            toolbar.requestLayout();
            //also you can use titleView for changing font: titleView.setTypeface(Typeface);
        }
    }
    
    0 讨论(0)
  • 2020-11-22 04:48
        public class TestActivity extends AppCompatActivity {
        private Toolbar toolbar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            super.setContentView(R.layout.activity_test);
    
            toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
            setSupportActionBar(toolbar);
    
            customizeToolbar(toolbar);
        }
    
        public void customizeToolbar(Toolbar toolbar){
            // Save current title and subtitle
            final CharSequence originalTitle = toolbar.getTitle();
            final CharSequence originalSubtitle = toolbar.getSubtitle();
    
            // Temporarily modify title and subtitle to help detecting each
            toolbar.setTitle("title");
            toolbar.setSubtitle("subtitle");
    
            for(int i = 0; i < toolbar.getChildCount(); i++){
                View view = toolbar.getChildAt(i);
    
                if(view instanceof TextView){
                    TextView textView = (TextView) view;
    
    
                    if(textView.getText().equals("title")){
                        // Customize title's TextView
                        Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
                        params.gravity = Gravity.CENTER_HORIZONTAL;
                        textView.setLayoutParams(params);
    
                        // Apply custom font using the Calligraphy library
                        Typeface typeface = TypefaceUtils.load(getAssets(), "fonts/myfont-1.otf");
                        textView.setTypeface(typeface);
    
                    } else if(textView.getText().equals("subtitle")){
                        // Customize subtitle's TextView
                        Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
                        params.gravity = Gravity.CENTER_HORIZONTAL;
                        textView.setLayoutParams(params);
    
                        // Apply custom font using the Calligraphy library
                        Typeface typeface = TypefaceUtils.load(getAssets(), "fonts/myfont-2.otf");
                        textView.setTypeface(typeface);
                    }
                }
            }
    
            // Restore title and subtitle
            toolbar.setTitle(originalTitle);
            toolbar.setSubtitle(originalSubtitle);
        }
    }
    
    0 讨论(0)
  • 2020-11-22 04:51

    You can use like the following

     <android.support.v7.widget.Toolbar
        android:id="@+id/top_actionbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppThemeToolbar">
    
        <TextView
            android:id="@+id/pageTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />
    </android.support.v7.widget.Toolbar>
    
    0 讨论(0)
  • 2020-11-22 04:52

    we don't have direct access to the ToolBar title TextView so we use reflection to access it.

      private TextView getActionBarTextView() {
        TextView titleTextView = null;
    
        try {
            Field f = mToolBar.getClass().getDeclaredField("mTitleTextView");
            f.setAccessible(true);
            titleTextView = (TextView) f.get(mToolBar);
        } catch (NoSuchFieldException e) {
        } catch (IllegalAccessException e) {
        }
        return titleTextView;
    }
    
    0 讨论(0)
  • 2020-11-22 04:53

    Update from @MrEngineer13's answer: to align title center in any cases, including Hamburger icon, option menus, you can add a FrameLayout in toolbar like this:

       <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/action_bar_bkgnd"
        app:theme="@style/ToolBarTheme" >
    
             <FrameLayout android:layout_width="match_parent"
                        android:layout_height="match_parent">
    
                  <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Toolbar Title"
                   android:layout_gravity="center"
                   style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                   android:id="@+id/toolbar_title" />
    
            </FrameLayout>
    
       </android.support.v7.widget.Toolbar>
    
    0 讨论(0)
  • 2020-11-22 04:53

    As I see it you have two options:

    1) Edit the toolbar XML. When your Toolbar is added in the XML it usually looks like that:

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="4dp"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
    

    if you want to customize it just remove the '/' in the end and make it like that:

    <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="4dp"
                app:popupTheme="@style/AppTheme.PopupOverlay">
    
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
    
                    <ImageView
                        android:id="@+id/toolbar_iv"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:src="@mipmap/ic_launcher"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />
    
                    <TextView
                        android:id="@+id/toolbar_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:gravity="center"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintLeft_toRightOf="@+id/toolbar_iv"
                        app:layout_constraintTop_toTopOf="parent" />
    
                </android.support.constraint.ConstraintLayout>
            </android.support.v7.widget.Toolbar>
    

    that way you can have a toolbar and customize the textview and the logo.

    2) Programrticly change the native textview and icon:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setIcon(R.drawable.ic_question_mark);
    getSupportActionBar().setTitle("Title");
    

    make sure your toolbar is not null before you set anything in it.

    0 讨论(0)
提交回复
热议问题