Titre du centre de la barre d'outils Android et police personnalisée

366

J'essaie de trouver la bonne façon d'utiliser une police personnalisée pour le titre de la barre d'outils et de la centrer dans la barre d'outils (exigence du client).

En ce moment, j'utilise le bon vieux ActionBar, et je mettais le titre à une valeur vide, et setCustomViewj'utilisais pour mettre ma police personnalisée TextView et la centrer en utilisant ActionBar.LayoutParams.

Y a-t-il une meilleure façon de le faire? Utilisation de la nouvelle barre d'outils comme barre d'action.

Mathbl
la source

Réponses:

719

Pour utiliser un titre personnalisé dans Toolbartout ce que vous devez faire, n'oubliez pas que Toolbarc'est juste un ViewGroup de fantaisie, vous pouvez donc ajouter un titre personnalisé comme ceci:

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

Cela signifie que vous pouvez le TextViewstyler comme vous le souhaitez, car c'est juste un habitué TextView. Ainsi, dans votre activité, vous pouvez accéder au titre comme suit:

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
MrEngineer13
la source
5
suggérer d'utiliser android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" à la place.
SteelBytes
194
Si quelqu'un d'autre ne peut pas supprimer le titre du nom d'application par défaut, procédez comme suit: 1. Appelez setSupportActionBar (yourToolbar) 2. Appelez getSupportActionBar (). SetDisplayShowTitleEnabled (false);
Rick Sanchez
75
Pour continuer à utiliser des styles par défaut pour le TextView personnalisé, essayez quelque chose comme style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"( voir cette réponse ).
Jonik
5
l'ajout d'androïde: paddingRight = "? attr / actionBarSize" peut aider à centrer le texte au milieu de votre écran dans le cas où vous avez un bouton (accueil, tiroir de navigation, etc.)
Gordak
5
Que se passera-t-il lorsqu'il y aura une icône Hamburger sur la barre d'outils? Il ne sera pas au centre de la largeur complète de la barre d'outils, il sera au centre de ToolbarWidth - HamburgerIconWidth .
Akshay
75

Le titre de la barre d'outils est stylable. Toute personnalisation que vous faites doit être effectuée dans le thème. Je vais vous donner un exemple.

Disposition de la barre d'outils:

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

Modes:

<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>
Binoy Babu
la source
59
C'est la bonne façon. Ajouter un autre TextViewest un peu hacky, mais la réponse de réflexion est tout simplement mauvaise.
DariusL
9
Nettoyez, mais vous ne pouvez pas définir une police personnalisée à partir du style. Malheureusement.
niqueco
20
Vous ne pouvez pas non plus modifier l'alignement du titre.
Terry
7
@ user1560102 il n'y a rien de hacky à ajouter un TextView à la barre d'outils. C'est pour cela qu'il a été conçu.
Tim Malseed
107
Cela ne centre pas le texte.
Sebastian Roth
69

C'est juste pour aider à joindre toutes les pièces en utilisant la réponse @ MrEngineer13 avec les commentaires @Jonik et @Rick Sanchez dans le bon ordre pour aider à atteindre le titre facilement centré !!

La mise en page avec 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>

La façon de réaliser avec le bon ordre:

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

N'oubliez pas s'il vous plaît de voter @ réponse MrEngineer13 !!!

Voici un exemple de projet ToolbarCenterTitleSample

entrez la description de l'image ici

J'espère aider quelqu'un d'autre;)

Gueorgui Obregon
la source
5
si je mets setDisplayHomeAsUpEnabled (true) et setDisplayShowHomeEnabled (true); pour revenir à la flèche arrière. Alors le titre ne vient pas au centre. J'ai essayé de définir actionBar.setTitle (""); et setDisplayShowTitleEnabled (false). Mais toujours pas en mesure de résoudre le problème
Prashanth Debbadwar
L'avez-vous testé pour un Scrolling Activity?
AN
c'est vrai qu'avec la flèche de retour, le titre n'est pas centré (c'est à droite sur la moitié de la largeur de la flèche de retour). Je suppose que si j'étais vraiment déterminé, j'ajouterais par programme suffisamment de marge à droite de la zone de texte si nécessaire pour centrer le texte.
Someone Somewhere
52

nous n'avons pas d'accès direct au titre de la barre d'outils TextView, nous utilisons donc la réflexion pour y accéder.

  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;
}
BugsBunnyBR
la source
3
Bien que cela soit hacky, cette solution fonctionne pour moi après avoir essayé de trouver un moyen d'accéder à la vue de texte de la barre d'outils. Je vous remercie.
falc0nit3
1
A bien fonctionné pour le titre. Mais quand on a essayé d'obtenir le mSubtitleTextView comme ceci, cela a abouti à une exception. Causée par: java.lang.NullPointerException: tentative d'invocation de la méthode virtuelle 'void android.widget.TextView.setTypeface (android.graphics.Typeface)' sur une référence d'objet null
Vinod
5
Remarque: Vous ne pouvez accéder au champ "mTitleTextView" qu'après avoir défini le titre de la barre d'outils! Le champ est paresseux initialisé par sa première utilisation.
funcoder
2
Que faire si vous Occultation votre code avec ProGuard et mTitleTextViewdevient abcde12345?
voghDev
1
@voghDev getDeclaredField lèvera NoSuchFieldException dans ce cas, ce qui entraînera le code ne fonctionne pas.
Jeremy
30

Voici une approche dépendante du texte du titre pour rechercher une TextViewinstance 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;
}
Nikola Despotoski
la source
28

Définissez la classe suivante:

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

... et ensuite utilisez-le au lieu de régulier Toolbarcomme ceci:

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

Vous avez toujours besoin de ces 2 lignes de code dans votre Activity(comme avec la norme 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);

C'est ça! Vous n'avez pas besoin de masquer le titre standard aligné à gauche, vous n'avez pas besoin de dupliquer le même code XML encore et encore, etc., utilisez simplement CenteredToolbarcomme s'il était par défaut Toolbar. Vous pouvez également définir votre police personnalisée par programme, car vous avez maintenant un accès direct à TextView. J'espère que cela t'aides.

fraggjkee
la source
1
Merci! La meilleure solution, pour ne pas oublier d'importer dans la barre d'outils le "v7.widget"
David
Je sais que c'est assez ancien mais ... comment puis-je changer la couleur du texte? J'ai essayé en XML avec app: titleTextColor et en code avec centréTitleTextView.setColor. Des idées, @fraggjkee?
Genaro Alberto Cancino Herrera
centeredTitleTextView.setTextColor(...)devrait fonctionner
fraggjkee
N'est-ce pas LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)?
liminal
16

Personne ne l'a mentionné, mais il existe des attributs pour Toolbar:

app:titleTextColor pour définir la couleur du texte du titre

app:titleTextAppearance pour définir l'apparence du texte du titre

app:titleMargin pour fixer la marge

Et il existe d'autres marges spécifiques telles que marginStart, etc.

Un B
la source
1
Solution parfaite .. si vous connaissez FontOverride , créez simplement un style dans styles.xml <style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> et appliquez-le dans la barre d'outils app:titleTextAppearance="@styles/customFontTextAppearanceStyle"
Chinmay Thoriya
2
J'ai utilisé cette méthode mais rien n'est arrivé à ma barre d'outils! j'ai créé un nouveau '<style>' et je l'ai réglé app:titleTextAppearanc="style name" sur le android.support.v7.widget.ToolbarTAG
AN
12

J'utilise cette solution:

static void centerToolbarTitle(@NonNull final Toolbar toolbar) {
    final CharSequence title = toolbar.getTitle();
    final ArrayList<View> outViews = new ArrayList<>(1);
    toolbar.findViewsWithText(outViews, title, View.FIND_VIEWS_WITH_TEXT);
    if (!outViews.isEmpty()) {
        final TextView titleView = (TextView) outViews.get(0);
        titleView.setGravity(Gravity.CENTER);
        final Toolbar.LayoutParams layoutParams = (Toolbar.LayoutParams) titleView.getLayoutParams();
        layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
        toolbar.requestLayout();
        //also you can use titleView for changing font: titleView.setTypeface(Typeface);
    }
}
ultraon
la source
1
Fonctionne très bien, mais pour une raison quelconque, il ne se centre pas correctement avec les barres d'outils qui n'ont pas de bouton d'élément.
Munib
1
Un ajout: si vous avez une barre de navigation ou une icône de retour sur la barre d'outils, le titre ne reste pas exactement au centre. J'ajoute une icône de menu de configuration vide pour cette situation. Mon élément de menu vide est: <item android: id = "@ + id / empty" android: orderInCategory = "100" android: icon = "@ android: color / transparent" app: showAsAction = "always" tools: ignore = " MenuTitle "/>
Mete
10

Sans la barre d'outils TextView, nous pouvons personnaliser la police en utilisant le code ci-dessous

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);
}
Ajit Kumar Dubey
la source
1
Si vous avez juste besoin de changer de police, cela semble être la solution la plus propre. REMARQUE: TypefaceSpanString est juste ceci: 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);
    }
}
Shatazone
la source
1
La solution fonctionne très bien lorsque vous mettez les deux dernières lignes de code, elle ne devrait pas se trouver dans la boucle for: // Restore title and subtitle toolbar.setTitle (originalTitle); toolbar.setSubtitle (originalSubtitle);
Ivan Stojkovic
5

Disposition:

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

Code:

    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);
maros136
la source
1
Je pense que "int width = maxWidth - titleWidth * 2;" devrait être "int width = maxWidth - iconWidth * 2;", pense!
oldfeel
4

J'ai résolu cette solution, et voici les codes suivants:

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

Et vous pouvez changer le titre / l'étiquette, dans Activity, écrivez les codes ci-dessous:

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

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

Hai Rom
la source
4

Vous pouvez utiliser comme suit

 <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>
Un Sharma
la source
si je mets setDisplayHomeAsUpEnabled (true) et setDisplayShowHomeEnabled (true); pour revenir à la flèche arrière. Alors le titre ne vient pas au centre. J'ai essayé de définir actionBar.setTitle (""); et setDisplayShowTitleEnabled (false). Mais toujours pas en mesure de résoudre le problème
Prashanth Debbadwar
4

Un moyen très rapide et facile de définir une police personnalisée consiste à utiliser une police personnalisée titleTextAppearanceavec fontFamily:

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

Dans votre dossier res , créez un dossier de polices (Ex: varela_round_regular.ttf )

Lisez le guide officiel pour en savoir plus https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

vovahost
la source
3

Je ne sais pas si quelque chose a changé dans la bibliothèque appcompat mais c'est assez banal, pas besoin de réflexion.

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;
    }
}
headsvk
la source
3

Solution que j'ai utilisée pour ce problème:

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

Pour la gravité centrale, je pense qu'il serait nécessaire de changer les paramètres de mise en page pour match_parent horizontalement, puis:

tv.setGravity(Gravity.CENTER);
Monet_z_Polski
la source
3

Mise à jour de la réponse de @ MrEngineer13: pour aligner le centre du titre dans tous les cas, y compris l'icône Hamburger, les menus d'options, vous pouvez ajouter une FrameLayoutbarre d'outils dans comme ceci:

   <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>
R4j
la source
3

En XML, essayez ceci:

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

Dans du code:

Toolbar myToolbar= (Toolbar) findViewById(R.id.toolbar);
TextView mTitle = (TextView) mytoolbar.findViewById(R.id.toolbar_title);
mohamad sheikhi
la source
2

Même si l'ajout d'une vue de texte à la barre d'outils peut résoudre le problème de la restriction du style du titre, il y a un problème avec cela. Comme nous ne l'ajoutons pas à une mise en page, nous n'avons pas trop de contrôle sur sa largeur. Nous pouvons utiliser wrap_content ou match_parent.

Considérons maintenant un scénario dans lequel nous avons un SearchView sous forme de bouton sur le bord droit de la barre d'outils. Si le contenu du titre est plus, il ira en haut du bouton le masquant. Il n'y a aucun moyen de contrôler ce court de définir une largeur à l'étiquette et c'est quelque chose que vous ne voulez pas faire si vous voulez avoir un design réactif.

Voici donc une solution qui a fonctionné pour moi, qui est légèrement différente de l'ajout d'une vue de texte à la barre d'outils. Au lieu de cela, ajoutez la barre d'outils et la vue texte à une disposition relative et assurez-vous que la vue texte se trouve au-dessus de la barre d'outils. Ensuite, nous pouvons utiliser des marges appropriées et nous assurer que la vue texte s'affiche là où nous voulons qu'elle apparaisse.

Assurez-vous de définir la barre d'outils pour ne pas afficher le titre.

Voici le XML de cette solution:

<RelativeLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/colorPrimary">

                    <android.support.v7.widget.Toolbar
                        android:theme="@style/ThemeOverlay.AppCompat.Dark"
                        android:id="@+id/activity_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:background="?attr/colorPrimary"
                        android:titleTextAppearance="@style/AppTheme.TitleTextView"
                        android:layout_marginRight="40dp"
                        android:layoutMode="clipBounds">

                        <android.support.v7.widget.SearchView
                            android:id="@+id/search_view"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="right"
                            android:layout_centerVertical="true"
                            android:layout_alignParentRight="true"
                            android:foregroundTint="@color/white" />
                        </android.support.v7.widget.Toolbar>

                    <TextView
                        android:id="@+id/toolbar_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="90dp"
                        android:text="@string/app_name"
                        android:textSize="@dimen/title_text_size"
                        android:textColor="@color/white"
                        android:lines="1"
                        android:layout_marginLeft="72dp"
                        android:layout_centerVertical="true" />

                </RelativeLayout>

Résout le problème @ ankur-chaudhary mentionné ci-dessus.

Deepak GM
la source
2

Depuis android.support.v7.appcompat 24.2 Toolbara méthode setTitleTextAppearanceet vous pouvez définir sa police sans externe textview.

créer un nouveau style dans styles.xml

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

et l'utiliser

mToolbar.setTitleTextAppearance(this, R.style.RobotoBoldTextAppearance);
Faiseur de pluie
la source
2

J'ai passé plusieurs jours à chercher une solution universelle. Ma barre d'outils fonctionne avec le menu Android et l'icône de navigation.

Au début, vous devez créer une classe de barre d'outils personnalisée. Cette classe doit avoir calculé les positions centrées sur le titre (rembourrages):

    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)

}

Deuxièmement, vous devez créer une barre d'outils de mise en page:

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

C'est tout

Valery Boretsky
la source
2

Essayez de prendre la barre d'outils et le titre dans une vue distincte. Prenez une vue à l'extrémité droite et donnez-leur un poids égal au poids de la barre d'outils. De cette façon, votre titre viendra au centre.

<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>
Diya Bhat
la source
2

Vous pouvez insérer ce code dans votre fichier 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>
Uzair Ahmed
la source
Salut Uzair. Quel fichier xml? J'utilise un projet Android Studio 3.6.3 créé à partir d'un modèle d'activité vide. Merci.
Amour et paix - 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();
                }
            });
        }
    }
}
wklbeta
la source
1

Le cadre a android:gravity="center"fonctionné pour moi

Pas de style rien. La barre d'outils est fondamentalement ViewGrouptout ce que vous devez faire est de définir la gravité des éléments qu'elle contient.

        <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" />
Hitesh Sahu
la source
8
Ne fonctionne pas avecandroidx.appcompat.widget.Toolbar
tmm1
1

pour la police personnalisée dans la barre d'outils, vous pouvez remplacer la police textView dans le style, puis chaque textView dans votre application a également changé la police du titre de la barre d'outils je l'ai testée dans android studio 3.1.3

avec style:

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

puis dans votre thème, utilisez ceci:

<item name="android:textViewStyle">@style/defaultTextViewStyle</item>
Ali Khaki
la source
1

J'ai trouvé une autre façon d'ajouter une barre d'outils personnalisée sans aucun code Java / Kotlin supplémentaire.

  • Tout d'abord: créez un XML avec votre disposition de barre d'outils personnalisée avec AppBarLayout comme parent:

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

  • Deuxièmement: incluez la barre d'outils dans votre mise en page:

    <?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>
Ângelo Polotto
la source
1

Comme je le vois, vous avez deux options:

1) Modifiez le XML de la barre d'outils. Lorsque votre barre d'outils est ajoutée dans le XML, elle ressemble généralement à ceci:

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

si vous voulez le personnaliser, supprimez simplement le '/' à la fin et faites-le comme ça:

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

de cette façon, vous pouvez avoir une barre d'outils et personnaliser la vue de texte et le logo.

2) Modifiez par programme l'affichage et l'icône natifs du texte:

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

assurez-vous que votre barre d'outils n'est pas nulle avant d'y ajouter quoi que ce soit.

Idan Damri
la source
1

Vous pouvez avoir une personnalisation TextViewdans la barre d'outils comme ceci:

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

Donc, cela va centrer le texte. Si vous souhaitez ajouter une police personnalisée à une police normale Toolbar, procédez comme suit <style>:

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

Et ajoutez-le à la barre d'outils:

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

Pour la vue de texte dans la barre d'outils, vous pouvez la définir avec l' fontFamilyattribut:

<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>
Gourav
la source
1

J'étais confronté au même problème, résolu en faisant cela dans MainActivity

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

Et en morceaux

@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);
}
VINAY DANARADDI
la source