Título del centro de la barra de herramientas de Android y fuente personalizada


366

Estoy tratando de encontrar la manera correcta de usar una fuente personalizada para el título de la barra de herramientas y centrarla en la barra de herramientas (requisito del cliente).

En este momento, estoy usando el viejo ActionBar, y estaba configurando el título en un valor vacío, y usando setCustomViewpara poner mi fuente personalizada TextView y centrarla usando ActionBar.LayoutParams.

¿Hay una mejor manera de hacer eso? Usando la nueva barra de herramientas como mi ActionBar.

Respuestas:


718

Para usar un título personalizado en Toolbartodo lo que necesita hacer es recordar que Toolbares solo un ViewGroup elegante para que pueda agregar un título personalizado como este:

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

Esto significa que puede diseñar el estilo que TextViewdesee, ya que es solo un habitual TextView. Entonces, en su actividad, puede acceder al título de la siguiente manera:

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

55
sugiero usar android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" en su lugar.
SteelBytes

194
Si alguien más no puede eliminar el título predeterminado del nombre de la aplicación, haga lo siguiente: 1. Llame a setSupportActionBar (yourToolbar) 2. Llame a getSupportActionBar (). SetDisplayShowTitleEnabled (falso);
Rick Sanchez

75
Para seguir usando estilos predeterminados para TextView personalizado, intente algo como style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"( vea esta respuesta ).
Jonik

55
agregar android: paddingRight = "? attr / actionBarSize" puede ayudar a centrar el texto en el medio de la pantalla en caso de que tenga un botón (inicio, cajón de navegación, etc.)
Gordak

55
¿Qué sucederá cuando haya un icono de hamburguesa en la barra de herramientas? No estará en el centro del ancho completo de la barra de herramientas, estará en el centro de ToolbarWidth - HamburgerIconWidth .
Akshay

75

El título de la barra de herramientas tiene estilo. Cualquier personalización que realice debe hacerse en el tema. Te voy a dar un ejemplo.

Diseño de barra de herramientas:

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

Estilos:

<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
Esta es la forma correcta. Agregar otro TextViewes un poco raro, pero la respuesta de reflexión es simplemente malvada.
DariusL

99
Limpio, pero no puede establecer una fuente personalizada a partir del estilo. Tristemente.
niqueco

20
Tampoco puedes cambiar la alineación del título.
Terry

77
@ user1560102 no hay nada de extravagante en agregar un TextView a la Barra de herramientas. Para eso fue diseñado.
Tim Malseed

107
Esto no centra el texto.
Sebastian Roth

69

¡Esto es solo para ayudar a unir todas las piezas usando la respuesta de @ MrEngineer13 con los comentarios de @Jonik y @Rick Sanchez en el orden correcto para ayudar a lograr un título centrado fácilmente!

El diseño 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>

La forma de lograr con el orden correcto:

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

Por favor, no olvide votar a favor @ MrEngineer13 respuesta !!!

Aquí hay un proyecto de ejemplo ToolbarCenterTitleSample

ingrese la descripción de la imagen aquí

Espero ayudar a alguien más;)


55
si configuro setDisplayHomeAsUpEnabled (true) y setDisplayShowHomeEnabled (true); para enalbe la flecha hacia atrás. Entonces el título no viene al centro. He intentado como configurar actionBar.setTitle (""); y setDisplayShowTitleEnabled (falso). Pero todavía no puede resolver el problema
Prashanth Debbadwar

¿Lo has probado para un Scrolling Activity?
AN

Es cierto que con la flecha hacia atrás, el título no está centrado (está a la derecha a la mitad del ancho de la flecha hacia atrás). Supongo que si estuviera realmente determinado, agregaría programáticamente suficiente margen a la derecha del cuadro de texto según sea necesario para centrar el texto.
Alguien en algún lugar

52

no tenemos acceso directo al título TextView de la barra de herramientas, por lo que utilizamos la reflexión para acceder a él.

  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
Aunque esto es hacky, esta solución funciona para mí después de tratar de encontrar una manera de acceder a la vista de texto de la barra de herramientas. Gracias.
falc0nit3

1
Funcionó muy bien para el título. Pero cuando trató de obtener el mSubtitleTextView como este, resultó en una excepción. Causado por: java.lang.NullPointerException: intento de invocar el método virtual 'void android.widget.TextView.setTypeface (android.graphics.Typeface)' en una referencia de objeto nulo
Vinod

55
Nota: ¡Solo puede acceder al campo "mTitleTextView", después de configurar el título de la barra de herramientas! El campo es perezoso inicializado por su primer uso.
Funcoder

2
¿Qué pasaría si ofuscar el código con ProGuard y mTitleTextViewse convierte abcde12345?
voghDev

1
@voghDev getDeclaredField arrojará NoSuchFieldException en ese caso, lo que provocará que el código no funcione.
Jeremy

30

Aquí está el enfoque dependiente del texto del título para encontrar la TextViewinstancia 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

Defina la siguiente clase:

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

... y luego solo utilízalo en lugar de regular Toolbarcomo este:

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

Todavía necesita estas 2 líneas de código en su Activity(como con el estándar 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);

¡Eso es! No necesita ocultar el título estándar alineado a la izquierda, no necesita duplicar el mismo código XML una y otra vez, etc., solo use CenteredToolbarcomo si fuera el predeterminado Toolbar. También puede configurar su fuente personalizada mediante programación, ya que ahora tiene acceso directo a TextView. Espero que esto ayude.


1
¡Gracias! La mejor solución, solo para no olvidar importar a la barra de herramientas el "v7.widget"
David

Sé que esto es bastante antiguo, pero ... ¿cómo puedo cambiar el color del texto? He intentado en XML con la aplicación: titleTextColor y en código con centradoTitleTextView.setColor. ¿Alguna idea, @fraggjkee?
Genaro Alberto Cancino Herrera

centeredTitleTextView.setTextColor(...)debería funcionar
fraggjkee

¿No debería ser LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)?
liminal

16

Nadie ha mencionado esto, pero hay algunos atributos para Toolbar:

app:titleTextColor para configurar el color del texto del título

app:titleTextAppearance para configurar la apariencia del texto del título

app:titleMargin para establecer el margen

Y hay otros márgenes del lado específico como marginStart, etc.


1
Solución perfecta ... si conoce FontOverride , simplemente cree un estilo en styles.xml <style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> y aplíquelo en la barra de herramientas app:titleTextAppearance="@styles/customFontTextAppearanceStyle"
Chinmay Thoriya

2
¡Utilicé este método pero no pasó nada con mi barra de herramientas! Creé un nuevo '<style>' y lo configuré app:titleTextAppearanc="style name" en el android.support.v7.widget.ToolbarTAG
AN

12

Yo uso esta solución:

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
Funciona muy bien, pero por alguna razón no se centra correctamente con barras de herramientas que no tienen un botón de elemento.
Munib

1
Una adición: si tiene un icono de navegación o de retroceso en la barra de herramientas, el título no permanece exactamente en el centro. Agrego un icono de menú de configuración vacío para esta situación. Mi elemento de menú vacío es: <item android: id = "@ + id / empty" android: orderInCategory = "100" android: icon = "@ android: color / transparent" app: showAsAction = "always" tools: ignore = " MenuTitle "/>
Mete

10

Sin la barra de herramientas TextView, podemos personalizar la fuente usando el siguiente código

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
Si solo necesita cambiar la fuente, esta parece ser la solución más limpia. NOTA: TypefaceSpanString es solo esto: 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 solución funciona muy bien cuando saca las dos últimas líneas de código, no debería estar dentro del ciclo for: // Restaurar título y subtítulo toolbar.setTitle (originalTitle); toolbar.setSubtitle (originalSubtitle);
Ivan Stojkovic

5

Diseño:

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

Código:

    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
Creo que "int width = maxWidth - titleWidth * 2;" debería ser "int width = maxWidth - iconWidth * 2;", piensa!
oldfeel

4

Resolví esta solución, y este es un código siguiente:

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

Y puede cambiar el título / etiqueta, en Actividad, escriba los siguientes códigos:

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

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


4

Puedes usar como el siguiente

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

si configuro setDisplayHomeAsUpEnabled (true) y setDisplayShowHomeEnabled (true); para enalbe la flecha hacia atrás. Entonces el título no viene al centro. He intentado como configurar actionBar.setTitle (""); y setDisplayShowTitleEnabled (falso). Pero todavía no puede resolver el problema
Prashanth Debbadwar

4

Una forma muy rápida y fácil de configurar una fuente personalizada es usar una personalizada titleTextAppearancecon fontFamily:

Añadir 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>

En su carpeta res, cree una carpeta de fuentes (Ej: varela_round_regular.ttf )

Lea la guía oficial para obtener más información https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html


3

No sé si algo cambió en la biblioteca de appcompat, pero es bastante trivial, no es necesario reflexionar.

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

Solución que utilicé para este 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;
                }
            }
        }
    }

Para la gravedad central, creo que sería necesario cambiar los parámetros de diseño para emparejar_parent horizontalmente y luego:

tv.setGravity(Gravity.CENTER);

3

Actualización de la respuesta de @ MrEngineer13: para alinear el centro de títulos en cualquier caso, incluido el icono de hamburguesa, los menús de opciones, puede agregar una FrameLayoutbarra de herramientas como esta:

   <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

En XML intente esto:

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

En codigo:

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

2

Aunque agregar una vista de texto a la barra de herramientas puede resolver el problema de la restricción del estilo del título, hay un problema con él. Como no lo estamos agregando a un diseño, no tenemos demasiado control sobre su ancho. Podemos usar wrap_content o match_parent.

Ahora considere un escenario donde tenemos un searchView como un botón en el borde derecho de la barra de herramientas. Si el contenido del título es mayor, irá encima del botón que lo oculta. No hay forma de controlar este corto de establecer un ancho en la etiqueta y es algo que no desea hacer si desea tener un diseño receptivo.

Entonces, aquí hay una solución que funcionó para mí, que es ligeramente diferente de agregar una vista de texto a la barra de herramientas. En lugar de eso, agregue la barra de herramientas y la vista de texto a un diseño relativo y asegúrese de que la vista de texto esté en la parte superior de la barra de herramientas. Luego, podemos usar los márgenes apropiados y asegurarnos de que la vista de texto aparezca donde queremos que aparezca.

Asegúrese de configurar la barra de herramientas para que no muestre el título.

Aquí está el XML para esta solución:

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

Resuelve el problema @ ankur-chaudhary mencionado anteriormente.


2

Dado que android.support.v7.appcompat 24.2 Toolbartiene método setTitleTextAppearancey puede configurar su fuente sin externa textview.

crear un nuevo estilo en styles.xml

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

y úsalo

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

2

Pasé varios días buscando una solución universal. Mi barra de herramientas funciona con el menú de Android y el icono de navegación.

Al principio, necesita crear una clase de barra de herramientas personalizada. Esta clase debe tener calcular las posiciones centradas en el título (rellenos):

    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)

}

En segundo lugar, necesita crear la barra de herramientas de diseño:

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

Eso es todo


2

Intente tomar la barra de herramientas y el título en una vista separada. Eche un vistazo al extremo derecho y déles un peso igual al peso de la barra de herramientas. De esta manera su título vendrá 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

Puede insertar este código en su archivo 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>

Hola uzair ¿Qué archivo xml? Estoy usando un proyecto de Android Studio 3.6.3 creado a partir de una plantilla de Actividad vacía. Gracias.
Amor y paz - 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

El ajuste android:gravity="center"funcionó para mí

Sin peinar nada. La barra de herramientas es básicamente ViewGrouptodo lo que necesita hacer es establecer la gravedad de los elementos en ella.

        <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
No funciona conandroidx.appcompat.widget.Toolbar
tmm1

1

para la fuente personalizada en la barra de herramientas, puede anular la fuente textView en estilo y luego cada textView en su aplicación también cambia la fuente del título de la barra de herramientas automáticamente. Lo probé en Android Studio 3.1.3

con estilo hazlo:

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

y luego en tu tema usa esto:

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

1

Encontré otra forma de agregar una barra de herramientas personalizada sin ningún código adicional de Java / Kotlin.

  • Primero: cree un XML con su diseño de barra de herramientas personalizado con AppBarLayout como padre:

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

  • Segundo: incluya la barra de herramientas en su diseño:

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

Según lo veo, tienes dos opciones:

1) Edite la barra de herramientas XML. Cuando su barra de herramientas se agrega en el XML, generalmente se ve así:

<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 desea personalizarlo, simplemente elimine el '/' al final y hágalo así:

<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 esa manera puede tener una barra de herramientas y personalizar la vista de texto y el logotipo.

2) Cambie programáticamente la vista de texto y el icono nativos:

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

asegúrese de que su barra de herramientas no sea nula antes de configurar algo en ella.


1

Puede tener una costumbre TextViewen la barra de herramientas como esta:

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

Entonces, esto centrará el texto. Si desea agregar una fuente personalizada a una normal Toolbar, haga un <style>:

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

Y agréguelo a la barra de herramientas:

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

Para la vista de texto en la barra de herramientas, puede definirla con el fontFamilyatributo:

<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

Estaba enfrentando el mismo problema, solucionado haciendo esto en MainActivity

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

Y en fragmento

@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);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.