Android toolbar center title and custom font

前端 未结 30 2681
时光说笑
时光说笑 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:54

    Try taking Toolbar and tittle in a separate view. Take a view on right end and given them weight equal to the toolbar weight. In this way your tittle will come in center.

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:background="@color/white_color">
      <LinearLayout
       android:id="@+id/toolbar_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/white_color">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/white_color"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            android:layout_weight="0.2"
    
            app:contentInsetStartWithNavigation="0dp"
            app:navigationIcon="@color/greyTextColor">
           </android.support.v7.widget.Toolbar>
    
    
            <com.an.customfontview.CustomTextView
                android:id="@+id/headingText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.6"
                android:gravity="center"
                android:text="Heading"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/keyboard_number"
                android:layout_gravity="center_horizontal|center_vertical"
                app:textFontPath="fonts/regular.ttf" />
                <ImageView
                    android:id="@+id/search_icon"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:visibility="visible"
                    android:layout_weight="0.2"
                    android:layout_gravity="center_horizontal|center_vertical"
                    android:src="@drawable/portfolio_icon"/>
            </LinearLayout>
    
           </android.support.design.widget.AppBarLayout>
    
    0 讨论(0)
  • 2020-11-22 04:59

    The ToolBar title is stylable. Any customization you make has to be made in the theme. I'll give you an example.

    Toolbar layout:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
        style="@style/ToolBarStyle.Event"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="@dimen/abc_action_bar_default_height_material" />
    

    Styles:

    <style name="ToolBarStyle" parent="ToolBarStyle.Base"/>
    
    <style name="ToolBarStyle.Base" parent="">
        <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
        <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    </style>
    
    <style name="ToolBarStyle.Event" parent="ToolBarStyle">
        <item name="titleTextAppearance">@style/TextAppearance.Widget.Event.Toolbar.Title</item>
    </style>
    
    <style name="TextAppearance.Widget.Event.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <!--Any text styling can be done here-->
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">@dimen/event_title_text_size</item>
    </style>
    
    0 讨论(0)
  • 2020-11-22 04:59

    Even though adding a text view to the toolbar can solve the problem of the restriction of title styling, there is an issue with it. Since we are not adding it to a layout, we do not have too much control over its width. We can either use wrap_content or match_parent.

    Now consider a scenario where we have a searchView as a button on the right edge of the toolbar. If the title contents are more, it will go on top of the button obscuring it. There is no way of controlling this short of setting a width to the label and is something you don't want to do if you want to have a responsive design.

    So, here is a solution that worked for me which is slightly different from adding a textview to the toolbar. Instead of that, add the toolbar and text view to a relative layout and ensure that the text view is on top of the toolbar. Then we can use appropriate margins and make sure the text view shows up where we want it to show up.

    Make sure you set the toolbar to not show the title.

    Here is the XML for this solution:

    <RelativeLayout
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?attr/colorPrimary">
    
                        <android.support.v7.widget.Toolbar
                            android:theme="@style/ThemeOverlay.AppCompat.Dark"
                            android:id="@+id/activity_toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            android:background="?attr/colorPrimary"
                            android:titleTextAppearance="@style/AppTheme.TitleTextView"
                            android:layout_marginRight="40dp"
                            android:layoutMode="clipBounds">
    
                            <android.support.v7.widget.SearchView
                                android:id="@+id/search_view"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="right"
                                android:layout_centerVertical="true"
                                android:layout_alignParentRight="true"
                                android:foregroundTint="@color/white" />
                            </android.support.v7.widget.Toolbar>
    
                        <TextView
                            android:id="@+id/toolbar_title"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginRight="90dp"
                            android:text="@string/app_name"
                            android:textSize="@dimen/title_text_size"
                            android:textColor="@color/white"
                            android:lines="1"
                            android:layout_marginLeft="72dp"
                            android:layout_centerVertical="true" />
    
                    </RelativeLayout>
    

    Solves the issue @ankur-chaudhary mentioned above.

    0 讨论(0)
  • 2020-11-22 04:59

    You can have a custom TextView in the 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" >
    
         <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title"
            android:layout_gravity="center"
            android:id="@+id/toolbar_title" />
    
    
    </android.support.v7.widget.Toolbar>
    

    So, this will center the text. If you want to add custom font to a normal Toolbar, make a <style>:

    <style android:name="ToolbarFont">
        <item android:fontFamily = "@font/fontName" />
    </style>
    

    And add it to the toolbar:

    toolbar.setTitleTextAppearance(this, R.style.ToolbarFont);
    

    For the textview in the toolbar, you can define it with the fontFamily attribute:

    <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" >
    
         <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title"
            android:layout_gravity="center"
            android:id="@+id/toolbar_title"
            android:fontFamily="@font/fontFamily" />
    
    
    </android.support.v7.widget.Toolbar>
    
    0 讨论(0)
  • 2020-11-22 05:00

    Since android.support.v7.appcompat 24.2 Toolbar has method setTitleTextAppearance and you can set its font without external textview.

    create new style in styles.xml

    <style name="RobotoBoldTextAppearance">
            <item name="android:fontFamily">@font/roboto_condensed_bold</item>
    </style>
    

    and use it

    mToolbar.setTitleTextAppearance(this, R.style.RobotoBoldTextAppearance);
    
    0 讨论(0)
  • 2020-11-22 05:01

    Define the following class:

    public class CenteredToolbar extends Toolbar {
    
        private TextView centeredTitleTextView;
    
        public CenteredToolbar(Context context) {
            super(context);
        }
    
        public CenteredToolbar(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
        }
    
        public CenteredToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        public void setTitle(@StringRes int resId) {
            String s = getResources().getString(resId);
            setTitle(s);
        }
    
        @Override
        public void setTitle(CharSequence title) {
            getCenteredTitleTextView().setText(title);
        }
    
        @Override
        public CharSequence getTitle() {
            return getCenteredTitleTextView().getText().toString();
        }
    
        public void setTypeface(Typeface font) {
            getCenteredTitleTextView().setTypeface(font);
        }
    
        private TextView getCenteredTitleTextView() {
            if (centeredTitleTextView == null) {
                centeredTitleTextView = new TextView(getContext());
                centeredTitleTextView.setTypeface(...);
                centeredTitleTextView.setSingleLine();
                centeredTitleTextView.setEllipsize(TextUtils.TruncateAt.END);
                centeredTitleTextView.setGravity(Gravity.CENTER);
                centeredTitleTextView.setTextAppearance(getContext(), R.style.TextAppearance_AppCompat_Widget_ActionBar_Title);
    
                Toolbar.LayoutParams lp = new Toolbar.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.gravity = Gravity.CENTER;
                centeredTitleTextView.setLayoutParams(lp);
    
                addView(centeredTitleTextView);
            }
            return centeredTitleTextView;
        }
    }
    

    ...and then just use it instead of regular Toolbar like this:

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent">
    
            <your.packagename.here.CenteredToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme"
                app:title="@string/reset_password_page_title"/>
    
            <!-- Other views -->
    
    </RelativeLayout>
    

    You still need these 2 lines of code in your Activity (as with standard Toolbar):

    Toolbar toolbar = (Toolbar) findViewByid(R.id.toolbar); // note that your activity doesn't need to know that it is actually a custom Toolbar
    setSupportActionBar(binding.toolbar);
    

    That's it! You don't need to hide the standard left-aligned title, don't need to duplicate the same XML code over and over, etc., just use CenteredToolbar like if it was default Toolbar. You can also set your custom font programatically since you now have direct access to the TextView. Hope this helps.

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