Android 툴바 센터 제목 및 사용자 정의 글꼴


366

툴바 제목에 사용자 정의 글꼴을 사용하고 툴바의 중앙에 배치하는 올바른 방법을 찾으려고합니다 (클라이언트 요구 사항).

현재 나는 좋은 오래된 ActionBar를 사용하고 있으며 제목을 빈 값으로 설정하고 setCustomView사용자 정의 글꼴 TextView를 넣고 ActionBar.LayoutParams를 사용하여 중앙에 배치하는 데 사용했습니다.

더 좋은 방법이 있습니까? 새로운 툴바를 ActionBar로 사용합니다.

답변:


718

Toolbar당신이해야 할 모든 사용자 정의 제목을 사용하는 Toolbar것은 단지 멋진 ViewGroup이므로 다음과 같이 사용자 정의 제목을 추가 할 수 있다는 것입니다.

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

이것은 TextView단지 일반이기 때문에 원하는 스타일을 지정할 수 있음을 의미합니다 TextView. 따라서 활동에서 다음과 같이 제목에 액세스 할 수 있습니다.

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

5
대신 android : layout_width = "wrap_content"android : layout_height = "wrap_content"android : layout_gravity = "center"를 사용하는 것이 좋습니다.
SteelBytes

194
다른 사람이 기본 앱 이름 제목을 제거 할 수없는 경우 다음과 같이하십시오. 1. setSupportActionBar (yourToolbar)를 호출하십시오. 2. getSupportActionBar (). setDisplayShowTitleEnabled (false)를 호출하십시오.
Rick Sanchez

75
사용자 정의 텍스트 뷰에 대한 기본 스타일을 계속 사용하려면 같은 시도 style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"( 이 답변을 참조 ).
Jonik

5
android : paddingRight = "? attr / actionBarSize"를 추가하면 버튼 (홈, 내비게이션 서랍 등)이있는 경우 화면 중앙에 텍스트를 중앙에 배치 할 수 있습니다.
Gordak

5
툴바에 햄버거 아이콘이 있으면 어떻게 되나요? 전체 툴바 너비의 중앙에 있지 않고 ToolbarWidth-HamburgerIconWidth 중앙에 있습니다 .
Akshay

75

툴바 제목은 스타일이 지정 가능합니다. 테마에서 사용자 정의를 수행해야합니다. 예를 들어 보겠습니다.

툴바 레이아웃 :

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

스타일 :

<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
이것이 올바른 방법입니다. 다른 것을 추가 TextView하는 것은 약간 해킹이지만 반성 답변은 단순한 악입니다.
DariusL

9
깨끗하지만 스타일에서 사용자 정의 글꼴을 설정할 수는 없습니다. 슬프게도
niqueco

20
제목 정렬을 변경할 수도 없습니다.
Terry

7
@ user1560102 툴바에 TextView를 추가하는 것에 대한 해킹은 없습니다. 그것이 설계된 것입니다.
Tim Malseed

107
텍스트의 중심이 아닙니다.
Sebastian Roth

69

이것은 @Jonik 및 @Rick Sanchez 주석으로 @ MrEngineer13 답변 을 사용하여 모든 조각을 결합하여 제목을 쉽게 중심에 맞출 수 있도록 도와줍니다!

레이아웃 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>

올바른 순서로 달성하는 방법 :

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

@ MrEngineer13 답변을 찬성 하는 것을 잊지 마십시오 !!!

다음은 샘플 프로젝트 ToolbarCenterTitleSample입니다.

여기에 이미지 설명을 입력하십시오

다른 사람을 도울 수 있도록 노력하십시오.)


5
setDisplayHomeAsUpEnabled (true) 및 setDisplayShowHomeEnabled (true)를 설정하면; 뒤로 화살표를 enalbe. 그러면 제목이 나오지 않습니다. actionBar.setTitle ( ""); setDisplayShowTitleEnabled (false)를 설정하십시오. 그러나 여전히 문제를 해결할 수 없습니다
Prashanth Debbadwar

당신은 그것을 테스트 Scrolling Activity했습니까?
AN

뒤로 화살표를 사용하면 제목이 가운데에 있지 않습니다 (뒤 화살표 너비의 절반만큼 오른쪽으로 꺼져 있음). 필자가 실제로 결정했다면 텍스트를 가운데에 맞추기 위해 텍스트 상자의 오른쪽에 프로그래밍 방식으로 충분한 여백을 추가한다고 가정합니다.
누군가 어딘가에

52

툴바 제목 TextView에 직접 액세스 할 수 없으므로 리플렉션을 사용하여 액세스합니다.

  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
이것은 해킹이지만 툴바 텍스트보기에 액세스하는 방법을 찾은 후에이 솔루션이 효과적입니다. 감사합니다.
falc0nit3

1
타이틀을 훌륭하게 처리했습니다. 그러나 이와 같이 mSubtitleTextView를 얻으려고 할 때 예외가 발생했습니다. 원인 : java.lang.NullPointerException : null 객체 참조에서 가상 메소드 'void android.widget.TextView.setTypeface (android.graphics.Typeface)'를 호출하려고 시도
Vinod

5
참고 : 툴바 제목을 설정 한 후에 만 ​​"mTitleTextView"필드에 액세스 할 수 있습니다! 이 필드는 처음 사용하면 초기화가 지연됩니다.
funcoder

2
당신이 ProGuard를 사용하여 코드를 당황하게하고있는 경우 mTitleTextView가된다 abcde12345?
voghDev

1
이 경우 @voghDev getDeclaredField는 NoSuchFieldException을 발생시켜 코드가 작동하지 않습니다.
Jeremy

30

다음은 TextView에서 인스턴스 를 찾는 제목 텍스트 종속 접근 방식 입니다 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

다음 클래스를 정의하십시오.

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

... 그리고 다음 Toolbar과 같이 일반 대신 사용하십시오 .

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

여전히 Activity표준과 마찬가지로 다음 두 줄의 코드가 필요합니다 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);

그게 다야! 표준 왼쪽 정렬 제목을 숨길 필요가 없으며 동일한 XML 코드를 반복해서 복제 할 필요가 없으며 CenteredToolbar기본값 인 것처럼 사용 하십시오 Toolbar. 에 직접 액세스 할 수 있으므로 프로그래밍 방식으로 사용자 정의 글꼴을 설정할 수도 있습니다 TextView. 도움이 되었기를 바랍니다.


1
감사! 최상의 해결책은 툴바 "v7.widget"으로 가져 오는 것을 잊지 말아야합니다
David

나는 이것이 아주 오래된 것을 알고 있지만 ... 텍스트 색상을 어떻게 바꿀 수 있습니까? app : titleTextColor를 사용하여 XML과 centeredTitleTextView.setColor를 사용하여 코드에서 시도했습니다. @fraggjkee 어떤 아이디어?
Genaro Alberto Cancino Herrera

centeredTitleTextView.setTextColor(...)작동해야 함
fraggjkee

그렇지 LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)않습니까?
liminal

16

아무도 이것을 언급하지 않았지만 다음과 같은 속성이 있습니다 Toolbar.

app:titleTextColor 제목 텍스트 색상 설정

app:titleTextAppearance 제목 텍스트 모양 설정

app:titleMargin 여백 설정

그리고와 같은 다른 특정 측면 여백이 있습니다 marginStart.


1
Perfect Solution .. FontOverride를 알고 있다면 styles.xml에서 스타일을 만들어 <style name="customFontTextAppearanceStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> 툴바에 적용하십시오 app:titleTextAppearance="@styles/customFontTextAppearanceStyle"
Chinmay Thoriya

2
이 방법을 사용했지만 툴바에는 아무 변화가 없습니다! 새로운 '<style>' app:titleTextAppearanc="style name" 을 만들어 android.support.v7.widget.Toolbar태그 에 설정했습니다
AN

12

이 솔루션을 사용합니다.

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
잘 작동하지만 어떤 이유로 든 항목 단추가없는 도구 모음이 제대로 가운데에 있지 않습니다.
Munib

1
또한 툴바에 navdrawer 또는 뒤로 아이콘이 있으면 제목이 정확히 중앙에 유지되지 않습니다. 이 상황에 빈 설정 메뉴 아이콘을 추가합니다. 빈 메뉴 항목은 다음과 같습니다. <item android : id = "@ + id / empty"android : orderInCategory = "100"android : icon = "@ android : color / transparent"app : showAsAction = "always"tools : ignore = " MenuTitle "/>
Mete

10

툴바 TextView가 없으면 아래 코드를 사용하여 글꼴을 사용자 정의 할 수 있습니다

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
글꼴 만 변경하면 가장 깨끗한 솔루션처럼 보입니다. 참고 : TypefaceSpanString은 이것이다 stackoverflow.com/a/17961854
모 히브 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
솔루션은 마지막 두 줄의 코드를 넣을 때 효과적이며 for 루프 안에 있으면 안됩니다. // 제목 및 자막 복원 toolbar.setTitle (originalTitle); toolbar.setSubtitle (originalSubtitle);
Ivan Stojkovic

5

나열한 것:

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

암호:

    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
"int width = maxWidth-titleWidth * 2;"는 "int width = maxWidth-iconWidth * 2;"여야한다고 생각합니다!
oldfeel

4

이 솔루션을 해결했으며 다음 코드입니다.

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

그리고 활동에서 title / label을 변경하여 아래 코드를 작성할 수 있습니다.

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

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


4

다음과 같이 사용할 수 있습니다

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

setDisplayHomeAsUpEnabled (true) 및 setDisplayShowHomeEnabled (true)를 설정하면; 뒤로 화살표를 enalbe. 그러면 제목이 나오지 않습니다. actionBar.setTitle ( ""); setDisplayShowTitleEnabled (false)를 설정하십시오. 그러나 여전히 문제를 해결할 수 없습니다
Prashanth Debbadwar

4

매우 신속 하고 쉽게 사용자 정의 글꼴을 설정하는 방법은 사용자 정의를 사용하는 것입니다 titleTextAppearance로모그래퍼 fontFamily:

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>

당신의에서 고해상도 만들 폴더 글꼴 폴더 (예 : varela_round_regular.ttf )

자세한 내용은 공식 가이드를 참조 하십시오 https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html


3

appcompat 라이브러리에서 변경된 것이 있는지는 알지 못하지만 사소한 것이므로 반영 할 필요가 없습니다.

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

이 문제에 사용한 솔루션 :

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

중심 중력의 경우 레이아웃 매개 변수를 match_parent 가로로 변경 한 다음 다음과 같이 변경해야합니다.

tv.setGravity(Gravity.CENTER);

3

@ MrEngineer13의 답변에서 업데이트 : 햄버거 아이콘, 옵션 메뉴를 포함한 모든 경우 제목 센터를 정렬하려면 다음 FrameLayout과 같이 도구 모음에 도구 모음을 추가 할 수 있습니다 .

   <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

XML에서 이것을 시도하십시오 :

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

코드에서 :

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

2

툴바에 텍스트보기를 추가하면 제목 스타일 제한 문제를 해결할 수 있지만 문제가 있습니다. 레이아웃에 추가하지 않기 때문에 너비를 너무 많이 제어 할 수 없습니다. wrap_content 또는 match_parent를 사용할 수 있습니다.

이제 툴바의 오른쪽 가장자리에 버튼으로 searchView가있는 시나리오를 생각해보십시오. 제목 내용이 더 많으면 버튼 상단에 표시되어 제목이 가려집니다. 너비를 레이블로 설정하는 짧은 방법을 제어 할 수있는 방법은 없으며 반응 형 디자인을 원한다면 원하지 않는 방법입니다.

그래서 여기에 툴바에 텍스트보기를 추가하는 것과 약간 다른 해결책이 있습니다. 그 대신 도구 모음 및 텍스트보기를 상대 레이아웃에 추가하고 텍스트보기가 도구 모음 위에 있는지 확인하십시오. 그런 다음 적절한 여백을 사용하고 원하는 곳에 텍스트 뷰가 표시되도록 할 수 있습니다.

제목을 표시하지 않도록 도구 모음을 설정했는지 확인하십시오.

이 솔루션의 XML은 다음과 같습니다.

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

위에서 언급 한 @ ankur-chaudhary 문제를 해결하십시오.


2

android.support.v7.appcompat 24.2 Toolbar방법이 있으므로 setTitleTextAppearanceexternal없이 글꼴을 설정할 수 있습니다 textview.

styles.xml에 새로운 스타일을 만듭니다

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

그리고 그것을 사용하십시오

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

2

나는 며칠 동안 보편적 인 솔루션을 찾고있었습니다. 내 툴바는 안드로이드 메뉴 및 탐색 아이콘으로 작동합니다.

처음에는 사용자 정의 도구 모음 클래스를 작성해야합니다. 이 클래스에는 제목 중심 위치 (패딩)를 계산해야합니다.

    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)

}

둘째, 레이아웃 도구 모음을 만들어야합니다.

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

그게 다야


2

툴바를 가져와 별도의보기로 잡으십시오. 오른쪽 끝을보고 툴바 가중치와 동일한 가중치를 부여하십시오. 이런 식으로 당신의 잡담이 중심에 올 것입니다.

<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

이 코드를 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>

우자 에르 안녕하세요. 어떤 XML 파일입니까? 빈 활동 템플릿으로 만든 Android Studio 3.6.3 프로젝트를 사용하고 있습니다. 감사.
사랑과 평화-Joe 코드 웰

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

설정 android:gravity="center"은 나를 위해 일했다

스타일링이 없습니다. 툴바는 기본적으로ViewGroup 필요한 요소의 중력을 설정하기 만하면됩니다.

        <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
작동하지 않음androidx.appcompat.widget.Toolbar
tmm1

1

툴바의 사용자 정의 글꼴의 경우 textView 글꼴을 스타일로 재정의 한 다음 앱의 모든 textView도 툴바 제목 글꼴이 자동으로 변경되었습니다. Android Studio 3.1.3

스타일에서 그것을하십시오 :

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

그런 다음 테마에서 다음을 사용하십시오.

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

1

임의의 Java / Kotlin 코드없이 사용자 정의 도구 모음을 추가하는 다른 방법을 찾았습니다.

  • 첫째 : AppBarLayout을 부모로 사용하여 사용자 지정 도구 모음 레이아웃으로 XML을 만듭니다.

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

  • 둘째 : 레이아웃에 툴바를 포함시킵니다 :

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

내가 알듯이 두 가지 옵션이 있습니다.

1) 툴바 XML을 편집하십시오. 툴바가 XML로 추가되면 일반적으로 다음과 같습니다.

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

그렇게하면 툴바를 가지고 텍스트보기와 로고를 사용자 정의 할 수 있습니다.

2) 기본 텍스트보기 및 아이콘을 프로그래밍 방식으로 변경하십시오.

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

툴바를 설정하기 전에 툴바가 null이 아닌지 확인하십시오.


1

TextView툴바에서 다음과 같이 사용자 정의 를 가질 수 있습니다 .

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

텍스트의 중심이됩니다. 당신이 정상에 사용자 지정 글꼴을 추가 할 경우 Toolbar하는합니다 <style>:

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

그리고 툴바에 추가하십시오 :

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

툴바의 텍스트 뷰에 대해 fontFamily속성을 사용하여이를 정의 할 수 있습니다 .

<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

MainActivity 에서이 작업을 수행하여 동일한 문제에 직면했습니다.

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

그리고 조각으로

@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);
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.