Android-Symbolleiste Titel und benutzerdefinierter Schriftart zentrieren

Question

Ich versuche herauszufinden, wie man eine benutzerdefinierte Schriftart für den Symbolleistentitel verwendet und diesen in der Symbolleiste zentriert (Kundenanforderung).

Im Moment verwende ich die gute alte ActionBar und setze den Titel auf einen leeren Wert. Dann verwende ich setCustomView, um meine benutzerdefinierte Schriftart in einem TextView zu platzieren und sie mit ActionBar.LayoutParams zu zentrieren.

Gibt es einen besseren Weg, das zu tun? Verwendung der neuen Toolbar als meine ActionBar.

Answer 1

Mit den Material Components, beginnend ab der Version 1.4.x wie im Dokument beschrieben, können Sie die MaterialToolbar verwenden.

Fügen Sie einfach das Attribut app:titleCentered und/oder das Attribut app:subtitleCentered auf true zu Ihrer MaterialToolbar hinzu.

Etwas Ähnliches wie:

Mit Compose und dem Material3-Paket können Sie einfach CenterAlignedTopAppBar verwenden:

CenterAlignedTopAppBar(
    title = { Text("Centered TopAppBar") },
    navigationIcon = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(
                imageVector = Icons.Filled.Menu,
                contentDescription = "Localized description"
            )
        }
    }
)

Wenn Sie Compose und das Material2-Paket verwenden, gibt es keine integrierte Komponente, aber Sie können das Layout des Inhalts innerhalb des TopAppBar anpassen, wie in dieser Antwort beschrieben.

Answer 2

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); // Verknüpfung des Layouts mit dem Toolbar-Objekt
        setSupportActionBar(toolbar);

        customizeToolbar(toolbar);
    }

    public void customizeToolbar(Toolbar toolbar){
        // Aktuellen Titel und Untertitel speichern
        final CharSequence originalTitle = toolbar.getTitle();
        final CharSequence originalSubtitle = toolbar.getSubtitle();

        // Temporär Titel und Untertitel ändern, um jedes zu erkennen
        toolbar.setTitle("Titel");
        toolbar.setSubtitle("Untertitel");

        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("Titel")){
                    // Anpassung des Titel-TextViews
                    Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
                    params.gravity = Gravity.CENTER_HORIZONTAL;
                    textView.setLayoutParams(params);

                    // Anwendung der benutzerdefinierten Schriftart mit der Calligraphy-Bibliothek
                    Typeface typeface = TypefaceUtils.load(getAssets(), "fonts/meineschriftart-1.otf");
                    textView.setTypeface(typeface);

                } else if(textView.getText().equals("Untertitel")){
                    // Anpassung des Untertitel-TextViews
                    Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
                    params.gravity = Gravity.CENTER_HORIZONTAL;
                    textView.setLayoutParams(params);

                    // Anwendung der benutzerdefinierten Schriftart mit der Calligraphy-Bibliothek
                    Typeface typeface = TypefaceUtils.load(getAssets(), "fonts/meineschriftart-2.otf");
                    textView.setTypeface(typeface);
                }
            }
        }

        // Titel und Untertitel wiederherstellen
        toolbar.setTitle(originalTitle);
        toolbar.setSubtitle(originalSubtitle);
    }
}

Answer 3

Layout:

Code:

    Toolbar mToolbar = parent.findViewById(R.id.toolbar_top);
    TextView mToolbarCustomTitle = parent.findViewById(R.id.toolbar_title);

    // Breite des benutzerdefinierten Titels auf die Toolbar des Elternelements einstellen
    mToolbar.postDelayed(new Runnable()
    {
        @Override
        public void run ()
        {
            int maxWidth = mToolbar.getWidth();
            int titleWidth = mToolbarCustomTitle.getWidth();
            int iconWidth = maxWidth - titleWidth;

            if (iconWidth > 0)
            {
                // Symbole (Schublade, Menü) befinden sich auf der linken und rechten Seite
                int width = maxWidth - iconWidth * 2;
                mToolbarCustomTitle.setMinimumWidth(width);
                mToolbarCustomTitle.getLayoutParams().width = width;
            }
        }
    }, 0);

Answer 4

Eine sehr schnelle und einfache Möglichkeit, eine benutzerdefinierte Schriftart festzulegen, besteht darin, eine benutzerdefinierte titleTextAppearance mit einer fontFamily zu verwenden:

Fügen Sie styles.xml hinzu:

    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#FF202230</item>
    <item name="android:fontFamily">@font/varela_round_regular</item>

Erstellen Sie in Ihrem res-Ordner einen font-Ordner (z.B. varela_round_regular.ttf)

Weitere Informationen finden Sie im offiziellen Leitfaden https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

Answer 5

Verwenden Sie den com.google.android.material.appbar.MaterialToolbar und das app:titleCentered="true" Tag