툴바 이미지 중앙

툴바 이미지 중앙

---

마지막을 사용하여 android.support.v7.widget.Toolbar도구 모음에서 이미지를 중앙에 배치하고 싶지만 계속 왼쪽에 유지됩니다.

나에게 가장 좋은 방법은 toolbar.setLogo()방법 을 사용 하고 로고를 중앙에 배치하는 것이지만 방법이 보이지 않습니다.

다음에 대한 레이아웃을 사용합니다 Toolbar.

  <android.support.v7.widget.Toolbar style="@style/ToolBarStyle"
                                   xmlns:android="http://schemas.android.com/apk/res/android"
                                   android:layout_width="match_parent"
                                   android:layout_height="wrap_content"
                                   android:background="?attr/colorPrimary"
                                   android:minHeight="@dimen/abc_action_bar_default_height_material">

</android.support.v7.widget.Toolbar>

도구 모음에 이미지 (로고)를 추가하고 중앙에 배치 할 가능성이 있습니까? 프로그래밍 방식으로 또는 레이아웃에서?

---

툴바는 ViewGroup 일 뿐이며 원하는만큼 사용자 지정할 수 있습니다.

이 시도 :

<android.support.v7.widget.Toolbar
   style="@style/ToolBarStyle"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:minHeight="@dimen/abc_action_bar_default_height_material">

    <ImageView
        android:layout_width="wrap_content"
        android:contentDescription="@string/logo"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

 </android.support.v7.widget.Toolbar>

툴바 중앙에 imageView가 표시됩니다.

---

보기가 있고 로고를 중앙에 맞출 수없는 경우 중앙 정렬은 전체 도구 모음이 아니라 남은 공간을 기반으로하기 때문입니다.

로고가 중앙에 오도록하려면 이미지를보기로 사용하는 대신 레이어 목록을 도구 모음의 배경으로 사용해보십시오.

toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/toolbar_background"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>

toolbar_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="@color/colorPrimary" />
    </shape>
  </item>
  <item>
    <bitmap android:src="@drawable/logo" android:gravity="center" />
  </item>
</layer-list>

특정 배경색으로 중앙에 로고가 있어야합니다.

---

이것이 최선의 해결책은 아니지만 위로 버튼이나 메뉴 항목이있는 경우에도 작동하는 해결 방법입니다.

시험

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
       style="@style/ToolBarStyle"
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:minHeight="@dimen/abc_action_bar_default_height_material"/>

    <ImageView
        android:layout_width="wrap_content"
        android:contentDescription="@string/logo"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

</FrameLayout>

---

나는 단순성 때문에 Ruben Yoo의 답변이 제공하는 접근 방식을 좋아합니다 . 명시적이고 따르기 쉬우 며 모든 코드 변경 사항을 함께 유지합니다.

다음은 약간의 개선 사항이 포함 된 업데이트 된 버전입니다.

<android.support.design.widget.AppBarLayout
    android:id="@+id/layout_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">
        </android.support.v7.widget.Toolbar>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            android:src="@mipmap/ic_launcher"/>
    </FrameLayout>

</android.support.design.widget.AppBarLayout>

---

변경 사항 :

1. 소개 된 AppBarLayout부모
2. ?attr/actionBarSize프레임 및 툴바에 명시적인 크기 제공
3. ImageView 너비 및 높이의 상위 치수와 일치
4. 로고 크기가 centerInside

---

비슷한 문제가있었습니다. Blueberry가 제안한 레이어 목록 접근 방식을 사용하려고했지만 로고에 고해상도 자산을 넣으면 솔루션이 더 이상 작동하지 않습니다. 레이어 목록의 비트 맵에는 버그가 있습니다. 공간에 맞게 작은 이미지를 확대하지만 큰 이미지를 축소하지는 않습니다. 따라서 확대했을 때 거칠거나 픽셀 화되어 보이는 작은 이미지를 사용해도 괜찮다면 레이어 목록이 잘 작동합니다.

이 문제를 해결하고 고해상도 로고를 중앙에 배치하기 위해 android:background툴바 에서 속성을 완전히 제거하고 부모 android:background="?attr/colorPrimary"에게 추가 AppBarLayout한 다음이 끔찍한 코드를 내 활동의 onCreate메서드에 넣었습니다 .

    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    ActionBar ab = getSupportActionBar();
    if (ab != null && toolbar != null)
    {
        // Hide the title text.
        ab.setDisplayShowTitleEnabled(false);

        // Convert and show the logo.
        toolbar.addOnLayoutChangeListener(new View.OnLayoutChangeListener()
        {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom)
            {
                ActionBar ab = getSupportActionBar();
                if (ab != null)
                {
                    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.logo);
                    Bitmap bmp2 = Bitmap.createBitmap(toolbar.getWidth(), toolbar.getHeight(), bmp.getConfig());
                    Bitmap bmp3 = Bitmap.createScaledBitmap(bmp, bmp.getWidth() * toolbar.getHeight() / bmp.getHeight(), toolbar.getHeight(), true);
                    Canvas canvas = new Canvas(bmp2);
                    canvas.drawBitmap(bmp3, (toolbar.getWidth() / 2) - (bmp3.getWidth() / 2), 0, null);
                    BitmapDrawable background = new BitmapDrawable(getResources(), bmp2);
                    ab.setBackgroundDrawable(background);
                }
            }
        });
    }

It works by creating a canvas the size of the toolbar and a ratio-scaled version of the logo, drawing the newly resized logo onto the canvas in the center, and finally setting the bitmap being drawn on as the background of the action bar.

On the plus side, this approach gives you total control over placement, sizing, etc. Not limited to whatever you can do in XML. It's terrible because it is called pretty regularly whenever the toolbar layout changes, which means there are performance implications. But, when you are required by your design team (that cares not about the first thing regarding Material Design) to have a background logo and waste five hours looking for the solution above, performance stops mattering - you just want the damn thing to work. The above code reeks pretty badly of desperation.

I'll let someone more capable than me in Android development point out that "I'm doing it wrong" and fix whatever performance issues/bugs there are with the above code. It doesn't change the fact that layer-list bitmap is broken and this is a hack (that should not exist) to fix a stupid bug (that should also not exist) in Android.

---

If user set :

activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true); activity.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_iconmenu);

and after do something like

<Toolbar ... >
   <ImageView ...>
   </ImageView>
</Toolbar>

then image inside toolbar will not be centered as well cause home button eat some space from layout.Image's horizontal center will be biased on home icon width.So best solution:
1.Create 9-patch png from your original image .png resource.
2.Create drawable from 9-patch with xml using layer-list as example toolbar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/white"/><!-- fill color under image(optional) -->
    <item>
        <nine-patch
        android:src="@drawable/toolbar_image" />
    </item>
</layer-list>

Then set toolbar_background resource as background at Toolbar element:

<Toolbar android:background="toolbar_background" ...>
</Toolbar>

That's all.

---

If you need to center a more complicated layout in the Toolbar than just an image, this is what I placed to my Activity's onCreate():

mToolbar.addOnLayoutChangeListener(
            new View.OnLayoutChangeListener() {
                @Override
                public void onLayoutChange(View view, int i, int i1, int i2, int i3, int i4, int i5, int i6, int i7) {
                    // Push layout to the center
                    int toolbarCenterX = (int) (mToolbar.getWidth() / 2.0 - mMiddleToolbarLayout.getWidth() / 2.0));
                    if(mMiddleToolbarLayout.getX() != toolbarCenterX) {
                        mMiddleToolbarLayout.setX(toolbarCenterX);
                    }
                }
            }
    );

When onLayoutChange is called, your layout's width is already determined so you just push it to the center.

NOTE: It is important to only center toolbar (see the if condition) when it is not centered, otherwise this callback would be re-called in an infinite loop.

The XML file will look like this:

<android.support.v7.widget.Toolbar
...
>
    <LinearLayout
        android:id="@+id/middle_toolbar_layout"
        ...
    >
</android.support.v7.widget.Toolbar>

---

you can use this code:

     <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="250dp"
            android:layout_height="match_parent"
            android:src="@drawable/apptitle"/>

참고URL : https://stackoverflow.com/questions/27534343/toolbar-image-centered