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

D'utiliser un titre personnalisé dans votre Toolbar tout ce que vous devez faire est de vous souvenir est que Toolbar est juste une fantaisie de ViewGroup de sorte que vous pouvez ajouter un titre personnalisé comme suit:

<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 style de la TextView toutefois vous voulez parce que c'est juste un TextView. Donc, dans votre activité, vous pouvez accéder le titre comme suit:

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

C'est juste pour l'aider à se joindre toutes les pièces à l'aide de @MrEngineer13 répondre avec @Jonik et @Rick Sanchez commentaires avec le bon ordre pour aider à obtenir le titre centré facile!!

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>

Le moyen de l'atteindre 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);

S'il vous plaît n'oubliez pas de upvote @MrEngineer13 répondre !!!

Ici est un exemple de projet ToolbarCenterTitleSample

L'espoir d'aider quelqu'un d'autre 😉

Ici est le texte du titre de la personne à charge pour trouver TextView instance de 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;
}

Personne n'a parlé, mais il y a certains attributs Toolbar:

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

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

app:titleMargin pour le réglage de la marge

Et il existe d'autres du côté des marges comme marginStart, etc.

Sans barre d'outils TextView nous pouvons personnaliser la police à l'aide de 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);
}

Mise en page:

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

Un très rapide et facile façon à définir une police personnalisée est d'utiliser un titleTextAppearance avec un fontFamily:

Ajouter à 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 res dossier, créez un police dossier (Ex: varela_round_regular.ttf)

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

Solution que j'ai utilisé 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 centre de gravité, je pense qu'il serait nécessaire de changer de mise en page params à match_parent horizontalement et ensuite:

tv.setGravity(Gravity.CENTER);

Mise à jour de @MrEngineer13 réponse: pour aligner le titre de centre dans tous les cas, y compris Hamburger icône, menu, vous pouvez ajouter un FrameLayout dans 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" >
<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>

J'ai passé plusieurs jours à chercher une solution universelle. Ma barre d'outils de travail avec android menu et de la valeur liquidative de l'icône.

Au premier abord, vous avez besoin de personnaliser la barre d'outils de la classe. Cette classe doit avoir calculer titre centré positions (les 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 avez besoin de créer la mise en page de la barre d'outils:

<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

Même si l'ajout d'un affichage de texte de la barre d'outils peut résoudre le problème de la restriction de propriété style, il y a un problème avec elle. Comme nous ne sommes pas à l'ajouter à une mise en page, nous n'avons pas trop de contrôle sur sa largeur. On peut soit utiliser wrap_content ou match_parent.

Maintenant envisager un scénario où nous avons une searchView comme un bouton sur le bord droit de la barre d'outils. Si le contenu du titre sont plus, il va monter sur le sommet du bouton qui l'obscurcissent. Il n'y a aucun moyen de contrôle sur ce court de réglage de la largeur de l'étiquette et c'est quelque chose que vous ne voulez pas le faire si vous voulez avoir une conception réactive.

Donc, voici une solution qui a fonctionné pour moi qui est légèrement différent de l'ajout d'un textview de la barre d'outils. Au lieu de cela, ajouter la barre d'outils de texte et de vue d'un parent de mise en page et de s'assurer que l'affichage de texte en haut de la barre d'outils. Ensuite, nous pouvons utiliser les marges appropriées et assurez-vous que l'affichage de texte montre jusqu'où nous voulons qu'il se montre.

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

Voici le XML pour 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 de @maumau-chaudhary mentionnés ci-dessus.

Réglage android:gravity="center" a fonctionné pour moi

Pas de style de rien. Barre d'outils est en fait un ViewGroup tout ce que vous devez faire est de définir la gravité des éléments.

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

J'ai trouvé une autre façon d'ajouter de la barre d'outils personnalisée, sans adicional Java/Kotlin code.

• Première: créer un document XML avec votre barre d'outils personnalisée mise en page avec AppBarLayout en tant que 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ème: Inclure la barre d'outils à votre disposition:

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

Vous pouvez avoir un personnalisé TextView dans 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>

Ainsi, cela permettra de centrer le texte. Si vous souhaitez ajouter des polices personnalisées pour une normale Toolbar, faire un <style>:

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

Et l'ajouter à la barre d'outils:

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

Pour le textview dans la barre d'outils, vous pouvez définir avec le fontFamily attribut:

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

J'ai été confrontée au même problème, fixe en faisant cela, en MainActivity

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

Et Du Fragment

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

Vous pouvez insérez 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>

Vous avez juste à ajouter la ligne ci-dessous dans votre barre d'outils mise en page:

app:contentInsetStart="0dp"