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.