Titolo centro barra degli strumenti Android e carattere personalizzato


366

Sto cercando di capire il modo giusto di utilizzare un carattere personalizzato per il titolo della barra degli strumenti e di centrarlo nella barra degli strumenti (requisito del client).

Al momento, sto usando il buon vecchio ActionBar, e stavo impostando il titolo su un valore vuoto, e usando setCustomViewper mettere il mio carattere personalizzato TextView e centrarlo usando ActionBar.LayoutParams.

C'è un modo migliore per farlo? Utilizzando la nuova barra degli strumenti come ActionBar.

Risposte:


718

Per usare un titolo personalizzato in Toolbartutto ciò che devi fare è ricordare è che Toolbarè solo un ViewGroup di fantasia in modo da poter aggiungere un titolo personalizzato in questo modo:

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

Ciò significa che puoi modellare TextViewcome preferisci perché è solo un normale TextView. Quindi nella tua attività puoi accedere al titolo in questo modo:

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

5
suggerisci di usare android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center".
SteelBytes,

194
Se qualcun altro non è in grado di rimuovere il titolo predefinito dell'app, procedi come segue: 1. Chiama setSupportActionBar (la tua barra degli strumenti) 2. Chiama getSupportActionBar (). SetDisplayShowTitleEnabled (false);
Rick Sanchez,

75
Per continuare a utilizzare gli stili predefiniti per TextView personalizzato, prova qualcosa di simile style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"( vedi questa risposta ).
Jonik,

5
l'aggiunta di android: paddingRight = "? attr / actionBarSize" può aiutare a centrare il testo al centro dello schermo nel caso in cui tu abbia un pulsante (home, cassetto di navigazione, ecc.)
Gordak,

5
Cosa succederà quando è presente l'icona Hamburger su Toolbar? Non sarà al centro della larghezza completa della barra degli strumenti, sarà al centro di ToolbarWidth - HamburgerIconWidth .
Akshay,

75

Il titolo della barra degli strumenti è stylable. Qualsiasi personalizzazione effettuata deve essere effettuata nel tema. Ti faccio un esempio.

Layout della barra degli strumenti:

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

stili:

<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
Questo è il modo corretto Aggiungerne un altro TextViewè un po 'confuso, ma la risposta alla riflessione è semplicemente malvagia.
Dario

9
Pulito, ma non puoi impostare un carattere personalizzato dallo stile. Purtroppo.
Niqueco,

20
Né è possibile modificare l'allineamento del titolo.
Terry,

7
@ user1560102 non c'è niente di strano nell'aggiunta di un TextView alla barra degli strumenti. Questo è quello per cui è stato progettato.
Tim Malseed,

107
Questo non centra il testo.
Sebastian Roth,

69

Questo è solo per aiutare a unire tutti i pezzi usando la risposta di @ MrEngineer13 con i commenti di @Jonik e @Rick Sanchez con il giusto ordine per aiutare a raggiungere facilmente il titolo centrato !!

Il layout con 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>

Il modo per raggiungere con il giusto ordine:

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

Per favore, non dimenticare di votare @ MrEngineer13 risposta !!!

Ecco un esempio di progetto ToolbarCenterTitleSample

inserisci qui la descrizione dell'immagine

Spero di aiutare qualcun altro;)


5
se ho impostato setDisplayHomeAsUpEnabled (true) e setDisplayShowHomeEnabled (true); per ricucire la freccia indietro. Quindi il titolo non sta arrivando al centro. Ho provato a impostare actionBar.setTitle (""); e setDisplayShowTitleEnabled (false). Ma non riesco ancora a risolvere il problema
Prashanth Debbadwar,

Lo hai provato per un Scrolling Activity?
AN

è vero che con la freccia indietro, il titolo non è centrato (è spostato a destra per metà della larghezza della freccia indietro). Suppongo che se fossi veramente determinato aggiungerei a livello di programmazione abbastanza margine alla destra della casella di testo, se necessario, al fine di centrare il testo.
Someone Somewhere

52

non abbiamo accesso diretto al titolo della barra degli strumenti TextView, quindi utilizziamo la riflessione per accedervi.

  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
Anche se questo è confuso, questa soluzione funziona per me dopo aver cercato di trovare un modo per ottenere l'accesso alla visualizzazione della barra degli strumenti. Grazie.
falc0nit3

1
Ha funzionato bene per il titolo. Ma quando si è tentato di ottenere mSubtitleTextView in questo modo, si è verificata un'eccezione. Causato da: java.lang.NullPointerException: tentativo di invocare il metodo virtuale "void android.widget.TextView.setTypeface (android.graphics.Typeface)" su un riferimento a oggetto null
Vinod

5
Nota: è possibile accedere al campo "mTitleTextView" solo dopo aver impostato il titolo della barra degli strumenti! Il campo è pigro inizializzato dal suo primo utilizzo.
funzione

2
Che cosa succede se offuschi il codice con ProGuard e mTitleTextViewdiventa abcde12345?
VoghDev,

1
@voghDev getDeclaredField genererà NoSuchFieldException in quel caso, facendo sì che il codice non funzioni.
Jeremy,

30

Ecco un approccio dipendente dal testo del titolo per trovare l' TextViewistanza da 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

Definire la seguente classe:

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

... e poi usalo al posto del normale in Toolbarquesto modo:

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

Hai ancora bisogno di queste 2 righe di codice nel tuo Activity(come di serie 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);

Questo è tutto! Non è necessario nascondere il titolo standard allineato a sinistra, non è necessario duplicare ripetutamente lo stesso codice XML, ecc., Utilizzare CenteredToolbarcome se fosse predefinito Toolbar. Puoi anche impostare il tuo carattere personalizzato a livello di codice poiché ora hai accesso diretto a TextView. Spero che sia di aiuto.


1
Grazie! La soluzione migliore, solo per non dimenticare di importare nella barra degli strumenti "v7.widget"
David

So che è piuttosto vecchio ma ... come posso cambiare il colore del testo? Ho provato in XML con l'app: titleTextColor e nel codice con centeredTitleTextView.setColor. Qualche idea, @fraggjkee?
Genaro Alberto Cancino Herrera,

centeredTitleTextView.setTextColor(...)dovrebbe funzionare
fraggjkee

Non dovrebbe essere LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)?
liminal

16

Nessuno lo ha menzionato, ma ci sono alcuni attributi per Toolbar:

app:titleTextColor per impostare il colore del testo del titolo

app:titleTextAppearance per impostare l'aspetto del testo del titolo

app:titleMargin per impostare il margine

E ci sono altri margini del lato specifico come marginStart, ecc.


1
Soluzione perfetta .. se sei a conoscenza di FontOverride , basta creare lo stile in styles.xml <style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> e applicarlo nella barra degli strumenti app:titleTextAppearance="@styles/customFontTextAppearanceStyle"
Chinmay Thoriya

2
Ho usato questo metodo ma non è successo niente alla mia barra degli strumenti! ho creato un nuovo "stile" e l'ho impostato app:titleTextAppearanc="style name" su android.support.v7.widget.ToolbarTAG
AN

12

Io uso questa soluzione:

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
Funziona molto bene, ma per qualche motivo non si centra correttamente con le barre degli strumenti che non hanno un pulsante oggetto.
Munib,

1
Un'aggiunta: se sulla barra degli strumenti è presente un Navdrawer o un'icona Indietro, il titolo non rimane esattamente al centro. Aggiungo un'icona del menu di impostazione vuota per questa situazione. La mia voce di menu vuota è: <item android: id = "@ + id / empty" android: orderInCategory = "100" android: icon = "@ android: color / transparent" app: showAsAction = "always" tools: ignore = " MenuTitle "/>
Mete

10

Senza la barra degli strumenti TextView possiamo personalizzare il carattere usando il codice seguente

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
Se hai solo bisogno di cambiare carattere, questa sembra la soluzione più pulita. NOTA: TypefaceSpanString è proprio questo: 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
la soluzione funziona benissimo quando si inseriscono le ultime due righe di codice, non dovrebbe essere all'interno del ciclo for: // Ripristina il titolo e il sottotitolo toolbar.setTitle (originalTitle); toolbar.setSubtitle (originalSubtitle);
Ivan Stojkovic,

5

Disposizione:

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

Codice:

    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
Penso che "int width = maxWidth - titleWidth * 2;" dovrebbe essere "int width = maxWidth - iconWidth * 2;", pensa!
oldfeel,

4

Ho risolto questa soluzione, e questo è un codice seguente:

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

E puoi cambiare titolo / etichetta, in Attività, scrivi un codice qui sotto:

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

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


4

Puoi usare come il seguente

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

se ho impostato setDisplayHomeAsUpEnabled (true) e setDisplayShowHomeEnabled (true); per ricucire la freccia indietro. Quindi il titolo non sta arrivando al centro. Ho provato a impostare actionBar.setTitle (""); e setDisplayShowTitleEnabled (false). Ma non riesco ancora a risolvere il problema
Prashanth Debbadwar,

4

Un rapido e facile modo per impostare un carattere personalizzato è quello di utilizzare un costume titleTextAppearancecon un fontFamily:

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

Nella cartella res creare una cartella dei caratteri (es: varela_round_regular.ttf )

Leggi la guida ufficiale per saperne di più https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html


3

Non so se qualcosa sia cambiato nella libreria di appcompat ma è abbastanza banale, non c'è bisogno di riflettere.

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

Soluzione che ho usato per questo problema:

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

Per la gravità centrale penso che sarebbe necessario cambiare i parametri di layout in match_parent in orizzontale e quindi:

tv.setGravity(Gravity.CENTER);

3

Aggiornamento dalla risposta di @ MrEngineer13: per allineare il centro titoli in ogni caso, inclusa l'icona Hamburger, i menu delle opzioni, puoi aggiungere una FrameLayoutbarra degli strumenti in questo modo:

   <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

In XML prova questo:

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

Nel codice:

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

2

Anche se l'aggiunta di una vista di testo alla barra degli strumenti può risolvere il problema della restrizione dello stile del titolo, esiste un problema. Dal momento che non lo stiamo aggiungendo a un layout, non abbiamo troppo controllo sulla sua larghezza. Possiamo usare wrap_content o match_parent.

Ora considera uno scenario in cui abbiamo un searchView come un pulsante sul bordo destro della barra degli strumenti. Se i contenuti del titolo sono più, andrà in cima al pulsante oscurandolo. Non c'è modo di controllare questo corto di impostare una larghezza sull'etichetta ed è qualcosa che non vuoi fare se vuoi avere un design reattivo.

Quindi, ecco una soluzione che ha funzionato per me che è leggermente diversa dall'aggiunta di una visualizzazione di testo alla barra degli strumenti. Invece, aggiungi la barra degli strumenti e la vista del testo a un layout relativo e assicurati che la vista del testo sia nella parte superiore della barra degli strumenti. Quindi possiamo usare i margini appropriati e assicurarci che la vista di testo appaia dove vogliamo che appaia.

Assicurati di impostare la barra degli strumenti in modo che non mostri il titolo.

Ecco l'XML per questa soluzione:

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

Risolve il problema @ ankur-chaudhary menzionato sopra.


2

Dal momento che android.support.v7.appcompat 24.2 Toolbarha il metodo setTitleTextAppearancee puoi impostare il suo carattere senza esterno textview.

crea un nuovo stile in styles.xml

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

e usalo

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

2

Ho trascorso diversi giorni alla ricerca di una soluzione universale. La mia barra degli strumenti funziona con il menu Android e l'icona di navigazione.

Innanzitutto, è necessario creare una classe di barra degli strumenti personalizzata. Questa classe deve avere posizioni centrate sul titolo (padding):

    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)

}

In secondo luogo, è necessario creare la barra degli strumenti del 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>

È tutto


2

Prova a prendere la barra degli strumenti e riduci in una vista separata. Dai un'occhiata all'estremità destra e assegna loro un peso uguale al peso della barra degli strumenti. In questo modo il tuo piccolo verrà al centro.

<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

Puoi inserire questo codice nel tuo file 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>

Ciao Uzair. Quale file XML? Sto usando un progetto Android Studio 3.6.3 creato da un modello di attività vuoto. Grazie.
Amore e pace - 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

L'impostazione ha android:gravity="center"funzionato per me

Niente styling niente. La barra degli strumenti è fondamentalmente ViewGrouptutto ciò che devi fare è impostare la gravità degli elementi al suo interno.

        <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
Non funziona conandroidx.appcompat.widget.Toolbar
tmm1

1

per il carattere personalizzato nella barra degli strumenti puoi sovrascrivere textView font in stile e quindi ogni textView nella tua app anche il carattere del titolo della barra degli strumenti è cambiato automaticamente l'ho provato in Android Studio 3.1.3

con stile fallo:

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

e quindi nel tuo tema usa questo:

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

1

Ho trovato un altro modo per aggiungere una barra degli strumenti personalizzata senza alcun codice Java / Kotlin specifico.

  • Primo: crea un XML con il tuo layout personalizzato della barra degli strumenti con AppBarLayout come genitore:

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

  • Secondo: includere la barra degli strumenti nel layout:

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

A mio avviso, hai due opzioni:

1) Modifica la barra degli strumenti XML. Quando la barra degli strumenti viene aggiunta in XML, di solito sembra che:

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

se vuoi personalizzarlo basta rimuovere '/' alla fine e renderlo così:

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

in questo modo puoi avere una barra degli strumenti e personalizzare la visualizzazione del testo e il logo.

2) Modificare programmaticamente la visualizzazione e l'icona del testo nativo:

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

assicurati che la tua barra degli strumenti non sia nulla prima di impostare qualcosa al suo interno.


1

Puoi avere una personalizzazione TextViewnella barra degli strumenti come questa:

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

Quindi, questo centrerà il testo. Se vuoi aggiungere un carattere personalizzato a un normale Toolbar, crea un <style>:

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

E aggiungilo alla barra degli strumenti:

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

Per la visualizzazione di testo nella barra degli strumenti, è possibile definirla con l' fontFamilyattributo:

<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

Stavo affrontando lo stesso problema, risolto facendo questo in MainActivity

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

E In Frammento

@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);
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.