Заголовок центру панелі інструментів Android та спеціальний шрифт


366

Я намагаюся з'ясувати правильний спосіб використання спеціального шрифту для заголовка панелі інструментів та центрувати його на панелі інструментів (вимога клієнта).

На даний момент я використовую старий добрий ActionBar, і я встановлював заголовок у порожнє значення, і використовував setCustomViewдля того, щоб помістити власний шрифт TextView і відцентрувати його за допомогою ActionBar.LayoutParams.

Чи є кращий спосіб зробити це? Використання нової панелі інструментів як мого ActionBar.

Відповіді:


718

Щоб використовувати спеціальний заголовок у вашому, що Toolbarвам потрібно зробити, це пам’ятати, що Toolbarце просто фантазія ViewGroup, щоб ви могли додати спеціальний заголовок, як:

<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="Toolbar Title"
        android:layout_gravity="center"
        android:id="@+id/toolbar_title" />


    </android.support.v7.widget.Toolbar>

Це означає, що ви можете стилізувати TextViewвсе, що завгодно, тому що це просто регулярно TextView. Тож у своїй діяльності ви можете отримати доступ до назви так:

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

5
запропонуйте замість цього використовувати android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "центр".
SteelBytes

194
Якщо хтось не може видалити назву програми за замовчуванням, зробіть це: 1. Зателефонуйте setSupportActionBar (yourToolbar) 2. Дзвінок getSupportActionBar (). SetDisplayShowTitleEnabled (false);
Рік Санчес

75
Щоб продовжувати використовувати типи за замовчуванням для налаштованого TextView, спробуйте щось на зразок style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"( див. Цю відповідь ).
Джонік

5
додавання android: paddingRight = "? attr / actionBarSize" може допомогти центрувати текст посередині екрана, якщо у вас є кнопка (домашня, навігаційна
скринька

5
Що буде, коли на панелі інструментів з’явиться значок Hamburger? Він не буде в центрі повної ширини панелі інструментів, він буде в центрі ширини панелі інструментів - HamburgerIconWidth .
Акшай

75

Заголовок ToolBar є стильним. Будь-яка налаштування, яку ви робите, має бути зроблена в темі. Я надам вам приклад.

Макет панелі інструментів:

<?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" />

Стилі:

<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>

59
Це правильний шлях. Додавання іншого TextView- трохи хакіт, але відповідь на рефлексію - це просто зло.
ДарійL

9
Очистити, але ви не можете встановити спеціальний шрифт зі стилю. Сумно.
niqueco

20
Ви також не можете змінити вирівнювання заголовка.
Террі

7
@ user1560102 немає нічого хиткого в додаванні TextView на панель інструментів. Саме для цього він і був розроблений.
Тім Мальсід

107
Це не центрує текст.
Себастьян Рот

69

Це лише для того, щоб допомогти приєднатись до всіх творів, використовуючи відповідь @ MrEngineer13 з коментарями @Jonik та @Rick Sanchez з правильним порядком, щоб допомогти легко досягти заголовку, зосередженого !!

Макет із TextAppearance.AppCompat.Widget.ActionBar.Title:

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

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"                      
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_gravity="center" />

    </android.support.v7.widget.Toolbar>

Спосіб досягнення правильного порядку:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);

    setSupportActionBar(toolbar);
    mTitle.setText(toolbar.getTitle());

    getSupportActionBar().setDisplayShowTitleEnabled(false);

Будь ласка, не забудьте порушити @ MrEngineer13 відповідь !!!

Ось зразок проекту ToolbarCenterTitleSample

введіть тут опис зображення

Сподіваюся допомогти комусь іншому;)


5
якщо я встановив setDisplayHomeAsUpEnabled (true) і setDisplayShowHomeEnabled (true); для вибору стрілки назад. Тоді заголовок не в центрі. Я намагався налаштувати actionBar.setTitle (""); і setDisplayShowTitleEnabled (помилково). Але все ще не в змозі вирішити питання
Прашант Деббадвар

Ви тестували його на Scrolling Activity?
AN

це правда, що за стрілкою назад, заголовок не по центру (він відхилений праворуч на половину ширини стрілки назад). Я вважаю, що якби я був дійсно визначений, я програмно додав би достатньо поля праворуч від текстового поля, як це необхідно для того, щоб зосереджувати текст.
Хтось десь

52

у нас немає прямого доступу до заголовка TextView ToolBar, тому для його доступу ми використовуємо відображення.

  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;
}

3
Хоча це хакі, це рішення працює для мене, намагаючись знайти спосіб отримати доступ до перегляду тексту на панелі інструментів. Дякую.
falc0nit3

1
Гарно працював на Звання. Але коли спробували отримати mSubtitleTextView так, це призвело до винятку. Викликано: java.lang.NullPointerException: спроба викликати віртуальний метод 'void android.widget.TextView.setTypeface (android.graphics.Typeface)' у нульовій посиланні на об'єкт
Vinod

5
Примітка. Ви можете отримати доступ до поля "mTitleTextView" лише після встановлення заголовка панелі інструментів! Поле ліниво ініціалізується при першому його використанні.
funcoder

2
Що робити, якщо ви приховаєте свій код за допомогою ProGuard і він mTitleTextViewстане abcde12345?
voghDev

1
@voghDev getDeclaredField викине NoSuchFieldException у такому випадку, в результаті чого код не працює.
Джеремі

30

Ось підхід, що залежить від тексту заголовка, для пошуку TextViewпримірника Toolbar.

  public static TextView getToolbarTitleView(ActionBarActivity activity, Toolbar toolbar){
    ActionBar actionBar = activity.getSupportActionBar();
    CharSequence actionbarTitle = null;
    if(actionBar != null)
        actionbarTitle = actionBar.getTitle();
    actionbarTitle = TextUtils.isEmpty(actionbarTitle) ? toolbar.getTitle() : actionbarTitle;
    if(TextUtils.isEmpty(actionbarTitle)) return null;
    // can't find if title not set
    for(int i= 0; i < toolbar.getChildCount(); i++){
        View v = toolbar.getChildAt(i);
        if(v != null && v instanceof TextView){
            TextView t = (TextView) v;
            CharSequence title = t.getText();
            if(!TextUtils.isEmpty(title) && actionbarTitle.equals(title) && t.getId() == View.NO_ID){
                //Toolbar does not assign id to views with layout params SYSTEM, hence getId() == View.NO_ID
                //in same manner subtitle TextView can be obtained.
                return t;
            }
        }
    }
    return null;
}

28

Визначте наступний клас:

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;
    }
}

... а потім просто використовувати його замість такого регулярного Toolbar:

<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>

Вам все одно потрібні ці 2 рядки коду у вашому Activity(як і у стандартній 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);

Це воно! Вам не потрібно приховувати стандартний лінійний заголовок, не потрібно дублювати один і той же XML-код знову і знову і т. Д., Просто використовуйте, CenteredToolbarякби він був за замовчуванням Toolbar. Ви також можете встановити власний шрифт програмно, оскільки тепер у вас є прямий доступ до TextView. Сподіваюсь, це допомагає.


1
Дякую! Найкраще рішення, тільки не забути імпортувати на панель інструментів "v7.widget"
Девід,

Я знаю, що це досить старе, але ... як я можу змінити колір тексту? Я спробував у XML з програмою: titleTextColor і в коді з centeredTitleTextView.setColor. Будь-які ідеї, @fraggjkee?
Хенаро Альберто Кансіно Еррера

centeredTitleTextView.setTextColor(...)повинен працювати
fraggjkee

Чи не повинно бути LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)?
лімінальний

16

Ніхто не згадував про це, але є деякі атрибути для Toolbar:

app:titleTextColor для встановлення кольору тексту заголовка

app:titleTextAppearance для налаштування зовнішнього вигляду тексту заголовка

app:titleMargin для встановлення запасу

Є й інші конкретні побічні поля, наприклад marginStart, тощо.


1
Ідеальне рішення .. якщо вам відомо про FontOverride , просто створіть стиль у styles.xml <style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> та застосуйте його на панелі інструментів app:titleTextAppearance="@styles/customFontTextAppearanceStyle"
Chinmay Thoriya

2
Я використовував цей метод, але з моєю панеллю нічого не траплялося! я створив новий "<style>" і встановив його app:titleTextAppearanc="style name" на android.support.v7.widget.ToolbarTAG
AN

12

Я використовую це рішення:

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);
    }
}

1
Працює дуже добре, але чомусь він не центрується належним чином на панелях інструментів, у яких немає кнопки елемента.
Муніб

1
Доповнення: якщо у вас на панелі інструментів є значок навідра або спинки, заголовок не залишається точно центром. Я додаю піктограму пустого меню для цієї ситуації. Мій пустий пункт меню: <item android: id = "@ + id / empty" android: orderInCategory = "100" android: icon = "@ android: color / transparent" app: showAsAction = "завжди" інструменти: ignore = " MenuTitle »/>
Мета

10

Без панелі інструментів TextView ми можемо налаштувати шрифт за допомогою наведеного нижче коду

getSupportActionBar().setDisplayShowTitleEnabled(false);
or
getActionBar().setDisplayShowTitleEnabled(false);

public void updateActionbar(String title){
    SpannableString spannableString = new SpannableString(title);
    spannableString.setSpan(new TypefaceSpanString(this,  "futurastdmedium.ttf"),
            0, spannableString.length(),
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    mToolbar.setTitle(spannableString);
}

1
Якщо вам просто потрібно змінити шрифт, це здається найбільш чистим рішенням. Примітка: TypefaceSpanString тільки це: stackoverflow.com/a/17961854
Mohib Irshad

8
    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);
    }
}

1
рішення чудово працює, коли ви виставляєте останні два рядки коду, він не повинен знаходитися всередині циклу for: // Відновити заголовок та підзаголовок toolbar.setTitle (originalTitle); toolbar.setSubtitle (originalSubtitle);
Іван Стойкович

5

Макет:

<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="match_parent"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:layout_gravity="center"
        android:gravity="center"
        android:id="@+id/toolbar_title" />
</android.support.v7.widget.Toolbar>

Код:

    Toolbar mToolbar = parent.findViewById(R.id.toolbar_top);
    TextView mToolbarCustomTitle = parent.findViewById(R.id.toolbar_title);

    //setup width of custom title to match in parent toolbar
    mToolbar.postDelayed(new Runnable()
    {
        @Override
        public void run ()
        {
            int maxWidth = mToolbar.getWidth();
            int titleWidth = mToolbarCustomTitle.getWidth();
            int iconWidth = maxWidth - titleWidth;

            if (iconWidth > 0)
            {
                //icons (drawer, menu) are on left and right side
                int width = maxWidth - iconWidth * 2;
                mToolbarCustomTitle.setMinimumWidth(width);
                mToolbarCustomTitle.getLayoutParams().width = width;
            }
        }
    }, 0);

1
Я думаю, "int width = maxWidth - titleWidth * 2;" повинен бути "int width = maxWidth - iconWidth * 2;", вважає!
oldfeel

4

Я вирішив це рішення, і це наступні коди:

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Order History"
            android:layout_gravity="center"
            android:id="@+id/toolbar_title"
            android:textSize="17sp"
            android:textStyle="bold"
            android:textColor="@color/colorWhite"
            />

    </android.support.v7.widget.Toolbar>

І ви можете змінити назву / етикетку, у розділі Діяльність напишіть коди нижче:

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);

TextView mTitle = (TextView) панель інструментівTop.findViewById (R.id.toolbar_title); mTitle.setText ("@ рядок / ....");


4

Ви можете використовувати наступне

 <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>

якщо я встановив setDisplayHomeAsUpEnabled (true) і setDisplayShowHomeEnabled (true); для вибору стрілки назад. Тоді заголовок не в центрі. Я намагався налаштувати actionBar.setTitle (""); і setDisplayShowTitleEnabled (помилково). Але все ще не в змозі вирішити питання
Прашант Деббадвар

4

Дуже швидкий і простий спосіб встановити спеціальний шрифт - це використовувати звичай titleTextAppearanceіз fontFamily:

Додати в styles.xml :

<style name="ToolbarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#FF202230</item>
    <item name="android:fontFamily">@font/varela_round_regular</item>
</style>

У папці Res створіть папку з шрифтом (напр .: varela_round_regular.ttf )

Прочитайте офіційний посібник, щоб дізнатися більше https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html


3

Я не знаю, чи щось змінилося в бібліотеці appcompat, але це досить тривіально, немає потреби в роздумах.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

// loop through all toolbar children right after setting support 
// action bar because the text view has no id assigned

// also make sure that the activity has some title here
// because calling setText() with an empty string actually
// removes the text view from the toolbar

TextView toolbarTitle = null;
for (int i = 0; i < toolbar.getChildCount(); ++i) {
    View child = toolbar.getChildAt(i);

    // assuming that the title is the first instance of TextView
    // you can also check if the title string matches
    if (child instanceof TextView) {
        toolbarTitle = (TextView)child;
        break;
    }
}

3

Вирішення, яке я використав для цієї проблеми:

 public static void applyFontForToolbarTitle(Activity a){
        Toolbar toolbar = (Toolbar) a.findViewById(R.id.app_bar);
        for(int i = 0; i < toolbar.getChildCount(); i++){
            View view = toolbar.getChildAt(i);
            if(view instanceof TextView){
                TextView tv = (TextView) view;
                if(tv.getText().equals(a.getTitle())){
                    tv.setTypeface(getRuneTypefaceBold(a));
                    break;
                }
            }
        }
    }

Для центральної тяжкості я думаю, що потрібно було б змінити параметри компонування на горизонтальну відповідність, а потім:

tv.setGravity(Gravity.CENTER);

3

Оновлення з відповіді @ MrEngineer13: щоб вирівняти центр заголовків у будь-яких випадках, включаючи піктограму Hamburger, меню опцій, ви можете додати на FrameLayoutпанелі інструментів так:

   <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>

3

У XML спробуйте це:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
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="Toolbar Title"
    android:layout_gravity="center"
    android:id="@+id/toolbar_title" />


</android.support.v7.widget.Toolbar>

В коді:

Toolbar myToolbar= (Toolbar) findViewById(R.id.toolbar);
TextView mTitle = (TextView) mytoolbar.findViewById(R.id.toolbar_title);

2

Незважаючи на те, що додавання перегляду тексту на панель інструментів може вирішити проблему обмеження стилів заголовків, з цим виникає проблема. Оскільки ми не додаємо його до макета, ми не маємо надто великого контролю над його шириною. Ми можемо використовувати wrap_content або match_parent.

Тепер розглянемо сценарій, коли у нас є SearchView як кнопка в правій частині панелі інструментів. Якщо вмісту заголовка більше, він перейде на верхню частину кнопки, затемнюючи його. Немає можливості контролювати це обмеження встановлення ширини етикетки, і це те, що ви не хочете робити, якщо ви хочете мати чуйний дизайн.

Отже, ось рішення, яке працювало для мене, дещо відрізняється від додавання текстового перегляду на панель інструментів. Замість цього додайте панель інструментів та перегляд тексту до відносного макета та переконайтесь, що перегляд тексту знаходиться у верхній частині панелі інструментів. Тоді ми можемо скористатися відповідними полями та переконатися, що текстовий вигляд відображається там, де ми хочемо його відображати.

Переконайтеся, що ви встановили на панелі інструментів не відображати заголовок.

Ось XML для цього рішення:

<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>

Вирішує проблему @ ankur-chaudhary, згадану вище.


2

Оскільки android.support.v7.appcompat 24.2 Toolbarмає метод, setTitleTextAppearanceви можете встановити його шрифт без зовнішнього textview.

створити новий стиль у styles.xml

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

і використовувати його

mToolbar.setTitleTextAppearance(this, R.style.RobotoBoldTextAppearance);

2

Я витратив кілька днів на пошуки універсального рішення. Моя панель інструментів, що працює з меню Android та значок навігації.

Спочатку вам потрібно створити спеціальний клас панелі інструментів. Цей клас повинен мати обчислені по заголовку позиції (прокладки):

    class CenteredToolbar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
    : Toolbar(context, attrs, defStyleAttr) {

    init {
        addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
            override fun onLayoutChange(v: View?, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int, oldTop: Int, oldRight: Int, oldBottom: Int) {
                val titleTextView = findViewById<TextView>(R.id.centerTitle)

                val x = titleTextView.x.toInt()
                val x2 = x + titleTextView.width

                val fullWidth = width
                val fullCenter = fullWidth / 2

                val offsetLeft = Math.abs(fullCenter - x)
                val offsetRight = Math.abs(x2 - fullCenter)
                val differOffset = Math.abs(offsetLeft - offsetRight)

                if (offsetLeft > offsetRight) {
                    titleTextView.setPadding(differOffset, 0, 0, 0)
                } else if (offsetRight > offsetLeft) {
                    titleTextView.setPadding(0, 0, differOffset, 0)
                }

                removeOnLayoutChangeListener(this)
            }
        })
    }

    override fun setTitle(resId: Int) = getTitleView().setText(resId)

    override fun setTitle(title: CharSequence?) = getTitleView().setText(title)

    fun getTitleView(): TextView = findViewById(R.id.centerTitle)

}

По-друге, вам потрібно створити панель інструментів макета:

<CenteredToolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar">

    <TextView
        android:id="@+id/centerTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</CenteredToolbar>

Це все


2

Спробуйте взяти Панель інструментів і заголовки в окремому вікні. Погляньте на правий кінець і надайте їм вагу, рівну вазі панелі інструментів. Таким чином ваш титл увійде в центр.

<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>

2

Ви можете вставити цей код у свій XML-файл

 <androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:textColor="#000000"
        android:textSize="20dp"
        android:id="@+id/toolbar_title" />

</androidx.appcompat.widget.Toolbar>

Привіт Узаір. Який XML-файл? Я використовую проект Android Studio 3.6.3, створений із шаблону Порожня активність. Дякую.
Любов і мир - Джо Кодесвелл

1
private void makeTitleCenter(String title, Toolbar toolbar) {
    if (title != null && !TextUtils.isEmpty(title.trim())) {
        final String tag = " ";
        if (getSupportActionBar() != null) {
            getSupportActionBar().setTitle(tag);
        }
        TextView titleTv = null;
        View leftBtn = null;
        for (int i = 0; i < toolbar.getChildCount(); i++) {
            View view = toolbar.getChildAt(i);
            CharSequence text = null;
            if (view instanceof TextView && (text = ((TextView) view).getText()) != null && text.equals(tag)) {
                titleTv = (TextView) view;
            } else if (view instanceof ImageButton) {
                leftBtn = view;
            }
        }
        if (titleTv != null) {
            final TextView fTitleTv = titleTv;
            final View fLeftBtn = leftBtn;
            fTitleTv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    fTitleTv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    int leftWidgetWidth = fLeftBtn != null ? fLeftBtn.getWidth() : 0;
                    fTitleTv.setPadding(DimenUtil.getResources().getDisplayMetrics().widthPixels / 2 - leftWidgetWidth - fTitleTv.getWidth() / 2, 0, 0, 0);
                    fTitleTv.requestLayout();
                }
            });
        }
    }
}

1

Налаштування android:gravity="center"працювало на мене

Ніякої стилізації нічого. Панель інструментів - це ViewGroupвсе, що вам потрібно зробити, це встановити тяжкість елементів на ній.

        <android.support.v7.widget.Toolbar
            android:id="@+id/htab_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="top"
            android:background="@color/partial_transparent"
            android:gravity="center"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

8
Не працює зandroidx.appcompat.widget.Toolbar
tmm1

1

для спеціального шрифту на панелі інструментів ви можете змінити стиль шрифту textView у стилі, а потім кожен textView у вашій програмі також змінити шрифт заголовка панелі інструментів автоматично, я перевірив його в android studio 3.1.3

в стилі це робіть:

<style name="defaultTextViewStyle" parent="android:Widget.TextView">
        <item name="android:fontFamily">@font/your_custom_font</item>
</style>

а потім у своїй темі використовуйте це:

<item name="android:textViewStyle">@style/defaultTextViewStyle</item>

1

Я знайшов інший спосіб додати спеціальну панель інструментів без будь-якого додаткового коду Java / Kotlin.

  • По-перше: створіть XML за допомогою власного макета панелі інструментів із AppBarLayout як батьків:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.AppBarLayout                     
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
    
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">
    
        <ImageView
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginEnd="@dimen/magin_default"
            android:src="@drawable/logo" />
    
    </android.support.v7.widget.Toolbar>

  • Друге: включіть у свій макет панель інструментів:

    <?xml version="1.0" encoding="utf-8"?>                
    <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"
        android:background="@color/blue"
        tools:context=".app.MainAcitivity"
        tools:layout_editor_absoluteY="81dp">
    
        <include
            layout="@layout/toolbar_inicio"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <!-- Put your layout here -->
    
    </android.support.constraint.ConstraintLayout>

1

Як я бачу, у вас є два варіанти:

1) Відредагуйте XML на панелі інструментів. Коли ваша панель інструментів додається в XML, вона зазвичай виглядає так:

<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.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>

таким чином ви можете мати панель інструментів і налаштувати перегляд тексту та логотип.

2) Програмно змінити нативне перегляд тексту та піктограму:

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

переконайтеся, що панель інструментів не є нульовою, перш ніж ви нічого не встановите на ній.


1

TextViewНа панелі інструментів ви можете мати звичай :

<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>

Отже, це буде центр центру тексту. Якщо ви хочете додати звичайний шрифт до звичайного Toolbar, зробіть <style>:

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

І додайте його на панель інструментів:

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

Для перегляду тексту на панелі інструментів ви можете визначити його за fontFamilyатрибутом:

<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>

1

Я зіткнувся з тією ж проблемою, яку вирішили, зробивши це в MainActivity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);

І у фрагменті

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    if (view == null) {
        // Inflate the layout for this fragment
        view = inflater.inflate(R.layout.fragment_example, container, false);
        init();
    }
    getActivity().setTitle("Choose Fragment");
    return view;
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.example_menu, menu);
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.