Judul pusat bilah alat Android dan font khusus


366

Saya mencoba mencari cara yang tepat untuk menggunakan font khusus untuk judul bilah alat, dan menempatkannya di bilah alat (persyaratan klien).

Saat ini, saya menggunakan ActionBar tua yang baik, dan saya sedang mengatur judul menjadi nilai kosong, dan menggunakan setCustomViewuntuk meletakkan font TextView kustom saya dan pusatkan menggunakan ActionBar.LayoutParams.

Apakah ada cara yang lebih baik untuk melakukan itu? Menggunakan Toolbar baru sebagai ActionBar saya.

Jawaban:


718

Untuk menggunakan judul khusus dalam Toolbarsemua yang perlu Anda lakukan adalah ingat bahwa Toolbaritu hanya ViewGroup yang mewah sehingga Anda dapat menambahkan judul khusus seperti:

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

Ini berarti Anda dapat mendesain TextViewsesuka Anda karena itu hanya gaya biasa TextView. Jadi dalam aktivitas Anda, Anda dapat mengakses judul seperti:

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

5
sarankan gunakan android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center".
SteelBytes

194
Jika orang lain tidak dapat menghapus judul nama aplikasi default, lakukan ini: 1. Panggil setSupportActionBar (yourToolbar) 2. Panggil getSupportActionBar (). SetDisplayShowTitleEnabled (false);
Rick Sanchez

75
Untuk tetap menggunakan gaya default untuk TextView yang dikustomisasi, coba sesuatu seperti style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"( lihat jawaban ini ).
Jonik

5
menambahkan android: paddingRight = "? attr / actionBarSize" dapat membantu memusatkan teks di tengah layar Anda jika Anda memiliki tombol (rumah, laci navigasi, dll.)
Gordak

5
Apa yang akan terjadi ketika ada ikon Hamburger di Toolbar? Ini tidak akan berada di tengah lebar toolbar lengkap, itu akan berada di tengah ToolbarWidth - HamburgerIconWidth .
Akshay

75

Judul ToolBar bisa ditata. Kustomisasi apa pun yang Anda buat harus dilakukan dalam tema. Saya akan memberi Anda sebuah contoh.

Tata letak bilah alat:

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

Gaya:

<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
Ini cara yang benar. Menambahkan yang lain TextViewagak sedikit berantakan, tetapi jawaban refleksi itu benar-benar jahat.
DariusL

9
Bersih, tetapi Anda tidak dapat mengatur font khusus dari gaya. Dengan sedih.
niqueco

20
Anda juga tidak dapat mengubah perataan judul.
Terry

7
@ user1560102 tidak ada yang aneh tentang menambahkan TextView ke Toolbar. Untuk itulah dirancang.
Tim Malseed

107
Ini bukan teks pusat.
Sebastian Roth

69

Ini hanya untuk membantu menggabungkan semua bagian menggunakan jawaban @ MrEngineer13 dengan @Jonik dan komentar @Rick Sanchez dengan urutan yang tepat untuk membantu mencapai judul yang terpusat dengan mudah !!

Tata letak dengan 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>

Cara mencapai dengan urutan yang benar:

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

Tolong jangan lupa untuk menjawab @ MrEngineer13 jawaban !!!

Berikut adalah contoh proyek ToolbarCenterTitleSample

masukkan deskripsi gambar di sini

Berharap bisa membantu orang lain;)


5
jika saya menetapkan setDisplayHomeAsUpEnabled (true) dan setDisplayShowHomeEnabled (true); untuk mengaktifkan kembali panah. Maka judul tidak datang pusat. Saya sudah mencoba pengaturan actionBar.setTitle (""); dan setDisplayShowTitleEnabled (false). Tapi masih belum bisa menyelesaikan masalah ini
Prashanth Debbadwar

Apakah Anda mengujinya untuk Scrolling Activity?
AN

memang benar bahwa dengan panah belakang, judulnya tidak berada di tengah (itu di sebelah kanan setengah dari lebar panah belakang). Saya kira jika saya benar-benar bertekad secara terprogram saya akan menambahkan margin yang cukup di sebelah kanan kotak teks sebagaimana diperlukan untuk memusatkan teks.
Seseorang di suatu tempat

52

kami tidak memiliki akses langsung ke judul ToolBar, TextView, jadi kami menggunakan refleksi untuk mengaksesnya.

  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
Meskipun ini merupakan peretasan, solusi ini berfungsi untuk saya setelah mencoba menemukan cara untuk mendapatkan akses ke tampilan teks toolbar. Terima kasih.
falc0nit3

1
Bekerja dengan baik untuk Judul. Tetapi ketika mencoba untuk mendapatkan mSubtitleTextView seperti ini, itu menghasilkan pengecualian. Disebabkan oleh: java.lang.NullPointerException: Mencoba untuk memanggil metode virtual 'void android.widget.TextView.setTypeface (android.graphics.Typeface)' pada referensi objek nol
Vinod

5
Catatan: Anda hanya dapat mengakses bidang "mTitleTextView", setelah Anda menetapkan judul bilah alat! Bidang ini malas diinisialisasi oleh penggunaan pertamanya.
funcoder

2
Bagaimana jika Anda mengaburkan kode Anda dengan ProGuard dan mTitleTextViewmenjadi abcde12345?
voghDev

1
@voghDev getDeclaredField akan melempar NoSuchFieldException dalam kasus itu, sehingga kode tidak berfungsi.
Jeremy

30

Berikut ini adalah pendekatan bergantung teks judul untuk mencari TextViewcontoh dari 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

Tentukan kelas berikut:

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

... lalu gunakan saja alih-alih Toolbarseperti biasa :

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

Anda masih membutuhkan 2 baris kode ini di Activity(sesuai dengan standar Toolbar) Anda:

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

Itu dia! Anda tidak perlu menyembunyikan judul rata kiri, tidak perlu menduplikasi kode XML yang sama berulang-ulang, dll, cukup gunakan CenteredToolbarseperti jika itu default Toolbar. Anda juga dapat mengatur font khusus Anda secara terprogram karena sekarang Anda memiliki akses langsung ke TextView. Semoga ini membantu.


1
Terima kasih! Solusi terbaik, hanya saja jangan lupa mengimpor ke bilah alat "v7.widget"
David

Saya tahu ini cukup lama tapi ... bagaimana saya bisa mengubah warna teks? Saya sudah mencoba dalam XML dengan aplikasi: titleTextColor dan dalam kode dengan centeredTitleTextView.setColor. Ada ide, @fraggjkee?
Genaro Alberto Cancino Herrera

centeredTitleTextView.setTextColor(...)harus bekerja
fraggjkee

Bukankah seharusnya begitu LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)?
liminal

16

Tidak ada yang menyebutkan ini, tetapi ada beberapa atribut untuk Toolbar:

app:titleTextColor untuk mengatur warna teks judul

app:titleTextAppearance untuk mengatur tampilan teks judul

app:titleMargin untuk mengatur margin

Dan ada margin sisi-spesifik lainnya marginStart, seperti , dll.


1
Solusi Sempurna .. jika Anda mengetahui FontOverride , buat saja style di styles.xml <style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> dan terapkan dalam toolbar app:titleTextAppearance="@styles/customFontTextAppearanceStyle"
Chinmay Thoriya

2
Saya menggunakan metode ini tetapi tidak ada yang terjadi pada bilah alat saya! saya membuat 'gaya' baru dan mengaturnya app:titleTextAppearanc="style name" di android.support.v7.widget.ToolbarTAG
AN

12

Saya menggunakan solusi ini:

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
Berfungsi sangat baik, tetapi karena suatu alasan ia tidak memusatkan dengan baik pada toolbar yang tidak memiliki tombol item.
Munib

1
Tambahan: jika Anda memiliki ikon navigasi atau kembali pada toolbar, judul tidak tetap tepat tengah. Saya menambahkan ikon menu pengaturan kosong untuk situasi ini. Item menu kosong saya adalah: <item android: id = "@ + id / kosong" android: orderInCategory = "100" android: icon = "@ android: warna / transparan" app: showAsAction = "selalu" alat: abaikan = " MenuTitle "/>
Mete

10

Tanpa bilah alat TextView kita dapat menyesuaikan font dengan menggunakan kode di bawah ini

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
Jika Anda hanya perlu mengubah font, ini sepertinya solusi paling bersih. CATATAN: TypefaceSpanString hanya ini: 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
solusi berfungsi dengan baik ketika Anda mengeluarkan dua baris kode terakhir, seharusnya tidak berada di dalam for loop: // Kembalikan judul dan subtitle toolbar.setTitle (originalTitle); toolbar.setSubtitle (originalSubtitle);
Ivan Stojkovic

5

Tata letak:

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

Kode:

    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
Saya pikir "int width = maxWidth - titleWidth * 2;" harus "int width = maxWidth - iconWidth * 2;", pikir!
oldfeel

4

Saya memecahkan solusi ini, Dan ini adalah kode berikut:

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

Dan Anda dapat mengubah judul / label, di Aktivitas, tulis kode di bawah ini:

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

TextView mTitle = (TextView) toolbarTop.findViewById (R.id.toolbar_title); mTitle.setText ("@ string / ....");


4

Anda bisa menggunakan seperti berikut ini

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

jika saya mengatur setDisplayHomeAsUpEnabled (true) dan setDisplayShowHomeEnabled (true); untuk mengaktifkan kembali panah. Maka judul tidak datang pusat. Saya sudah mencoba pengaturan actionBar.setTitle (""); dan setDisplayShowTitleEnabled (false). Tapi masih belum bisa menyelesaikan masalah ini
Prashanth Debbadwar

4

Cara yang sangat cepat dan mudah untuk menyetel font khusus adalah menggunakan kustom titleTextAppearancedengan fontFamily:

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

Di folder res Anda, buat folder font (Mis: varela_round_regular.ttf )

Baca panduan resmi untuk mengetahui lebih lanjut https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html


3

Saya tidak tahu apakah ada yang berubah di perpustakaan appcompat tapi itu cukup sepele, tidak perlu refleksi.

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

Solusi yang saya gunakan untuk masalah ini:

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

Untuk pusat gravitasi, saya pikir akan perlu untuk mengubah tata letak params untuk match_parent secara horizontal dan kemudian:

tv.setGravity(Gravity.CENTER);

3

Perbarui dari jawaban @ MrEngineer13: untuk meluruskan pusat judul dalam hal apa pun, termasuk ikon Hamburger, menu opsi, Anda dapat menambahkan FrameLayoutbilah alat di dalam seperti ini:

   <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

Dalam XML coba ini:

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

Dalam kode:

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

2

Meskipun menambahkan tampilan teks ke bilah alat dapat menyelesaikan masalah pembatasan gaya judul, ada masalah dengannya. Karena kami tidak menambahkannya ke tata letak, kami tidak memiliki terlalu banyak kendali atas lebarnya. Kami dapat menggunakan wrap_content atau match_parent.

Sekarang perhatikan skenario di mana kita memiliki searchView sebagai tombol di tepi kanan bilah alat. Jika konten judul lebih, itu akan pergi di atas tombol mengaburkannya. Tidak ada cara untuk mengontrol kekurangan pengaturan lebar label ini dan ini adalah sesuatu yang tidak ingin Anda lakukan jika Anda ingin memiliki desain yang responsif.

Jadi, inilah solusi yang berfungsi untuk saya yang sedikit berbeda dari menambahkan tampilan teks ke bilah alat. Alih-alih itu, tambahkan bilah alat dan tampilan teks ke tata letak relatif dan pastikan bahwa tampilan teks di atas bilah alat. Kemudian kita dapat menggunakan margin yang sesuai dan memastikan tampilan teks muncul di tempat yang kita inginkan.

Pastikan Anda mengatur bilah alat untuk tidak menampilkan judul.

Berikut ini adalah XML untuk solusi ini:

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

Memecahkan masalah @ ankur-chaudhary yang disebutkan di atas.


2

Karena android.support.v7.appcompat 24.2 Toolbarmemiliki metode setTitleTextAppearancedan Anda dapat mengatur font-nya tanpa eksternal textview.

buat gaya baru di styles.xml

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

dan gunakan itu

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

2

Saya menghabiskan beberapa hari mencari solusi universal. Toolbar saya bekerja dengan menu android dan ikon nav.

Pada awalnya, Anda perlu membuat kelas toolbar kustom. Kelas ini harus memiliki posisi menghitung posisi tengah (paddings):

    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)

}

Kedua, Anda perlu membuat toolbar layout:

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

Itu saja


2

Coba ambil Bilah Alat dan beri judul pada tampilan terpisah. Ambil tampilan di ujung kanan dan beri bobot sama dengan bobot bilah alat. Dengan cara ini judul Anda akan muncul di tengah.

<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

Anda dapat memasukkan kode ini dalam file xml Anda

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

Hai Uzair. File xml yang mana? Saya menggunakan Proyek Android Studio 3.6.3 yang dibuat dari templat Aktivitas Kosong. Terima kasih.
Cinta dan kedamaian - Joe Codeswell

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

Pengaturan android:gravity="center"bekerja untuk saya

Tidak ada penataan gaya apa pun. Toolbar pada dasarnya yang ViewGroupperlu Anda lakukan adalah mengatur gravitasi elemen di dalamnya.

        <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
Tidak bekerja denganandroidx.appcompat.widget.Toolbar
tmm1

1

untuk font kustom di bilah alat, Anda dapat mengganti font textView dengan gaya dan kemudian setiap textView di aplikasi Anda juga font judul bilah alat diubah secara otomatis saya mengujinya di android studio 3.1.3

dalam gaya melakukannya:

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

dan kemudian di tema Anda gunakan ini:

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

1

Saya menemukan cara lain untuk menambahkan toolbar kustom tanpa kode Java / Kotlin adicional.

  • Pertama: buat XML dengan tata letak bilah alat khusus Anda dengan AppBarLayout sebagai induknya:

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

  • Kedua: Sertakan bilah alat di tata letak Anda:

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

Seperti yang saya lihat, Anda memiliki dua opsi:

1) Edit XML toolbar. Ketika Toolbar Anda ditambahkan dalam XML, biasanya terlihat seperti itu:

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

jika Anda ingin menyesuaikannya cukup hapus '/' pada akhirnya dan buat seperti itu:

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

dengan cara itu Anda dapat memiliki bilah alat dan menyesuaikan tampilan teks dan logo.

2) Programrticly mengubah tampilan teks asli dan ikon:

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

pastikan bilah alat Anda tidak nol sebelum Anda mengatur apa pun di dalamnya.


1

Anda dapat memiliki kustom TextViewdi bilah alat seperti ini:

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

Jadi, ini akan memusatkan teks. Jika Anda ingin menambahkan font khusus ke normal Toolbar, buat <style>:

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

Dan tambahkan ke bilah alat:

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

Untuk tampilan teks di toolbar, Anda dapat mendefinisikannya dengan fontFamilyatribut:

<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

Saya menghadapi masalah yang sama, diperbaiki dengan melakukan ini di MainActivity

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

Dan Dalam Fragmen

@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);
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.