问题
Been trying to center a logo inside my toolbar. When i navigate to the next activity, the "up affordance" icon is present, and it will push my logo slightly to the right. How can I keep my logo at the center of the toolbar, without removing the up affordance icon?
This is my toolbar tag
<android.support.v7.widget.Toolbar
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:background="@color/primaryColor"
android:paddingTop="@dimen/app_bar_top_padding"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
app:theme="@style/CustomToolBarTheme">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_android_logo"
android:layout_gravity="center"
android:paddingBottom="3dp"/>
</android.support.v7.widget.Toolbar>
回答1:
In javadoc, it says:
One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
It means you cannot do it unless you create a custom toolbar or remove the icon.
回答2:
You can do it as following it works for me :
<androidx.appcompat.widget.Toolbar
android:id="@+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="@dimen/abc_action_bar_default_height_material">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/headerLogo"
android:contentDescription="@string/app_name" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
回答3:
You can do programmatically, that is the only way I've managed to fully center a logo in the toolbar.
Add to you activity:
@Override
public void onWindowFocusChanged(boolean hasFocus){
// set toolbar logo to center programmatically
Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
ImageView logo = (ImageView) findViewById(R.id.logo);
int offset = (toolbar.getWidth() / 2) - (logo.getWidth() / 2);
// set
logo.setX(offset);
}
and your toolbar_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/bg_yellow"
android:elevation="4dp"
android:fontFamily="@string/font_family_thin"
app:contentInsetStartWithNavigation="0dp"
android:layout_gravity="center_horizontal">
<TextView
android:id="@+id/title_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@string/font_family_light"
android:textColor="@color/text_dark_xxx"
android:textSize="@dimen/text_default"
android:layout_centerVertical="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/logo"
android:id="@+id/logo"
android:paddingTop="5dp" />
</android.support.v7.widget.Toolbar>
回答4:
I am bit late to answer this , but have wonderful solution
<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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:contentDescription="@string/app_name"
android:id="@+id/logoImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="@drawable/toolbar_background" />
</RelativeLayout>
</FrameLayout>
</android.support.design.widget.AppBarLayout>
and here is my toolbar_background.xml drawable
<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/splash" android:gravity="center"
/>
</item>
回答5:
Set the image as a background of the toolbar, not as a child view.
<android.support.v7.widget.Toolbar
android:id="@+id/detail_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:background="@drawable/my_image"
app:theme="@style/CustomToolBarTheme">
回答6:
For the devs who are using vector drawable or SVG images.
This can be your background for toolbar, drawable_toolbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/primary"/>
</shape>
</item>
<item
android:width="@dimen/toolbar_app_icon_width"
android:height="@dimen/toolbar_app_icon_height"
android:drawable="@drawable/ic_app_logo"
android:gravity="center"/>
</layer-list>
and Yes, you have to fix the width and height of item inside drawable, although the vector drawable is already having fixed size.
This is your toolbar view,
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/drawable_toolbar_background"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"/>
回答7:
You need to use the AppBarLayout widget with the Toolbar widget and setting the contentInsetStart to 0dp. Otherwise the Toolbar will about 8dp of padding at the start (to insert the navigation buttons if needed)
Here's the working code:
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:fitsSystemWindows="false"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="@drawable/company_logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Also, make sure you use ?attr/actionBarSize as the height for the toolbar as this is the default actionBar height and will adjust to all the different screen sizes.
回答8:
The easiest solution that works even with menu actions present is this:
<android.support.design.widget.AppBarLayout
android:id="@+id/apbMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/tlbMain"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
app:navigationContentDescription="@null"
app:title="@null"
app:subtitle="@null"
app:popupTheme="@style/AppTheme.PopupOverlay">
<ImageButton
android:id="@+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:scaleType="centerInside"
android:background="@null"
android:onClick="onBackClickListener"
android:src="@drawable/ic_navigation_back"
android:visibility="@{showBackBtn ? View.VISIBLE : View.INVISIBLE}" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_gravity="center"
android:src="@drawable/toolbar_icon" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
回答9:
I came up with this solution. Put your Toolbar and ImageView inside ConstraintLayout and constraint all their sides to parent:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="@drawable/icon" />
<ImageView
android:layout_width="148dp"
android:layout_height="@dimen/dim_24x"
android:contentDescription="@string/accs_label"
android:src="@drawable/label"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I feel this is the easiest way. Granted, on smaller phones, if you have a lot of menu items, the image view will overlap with menu items.
I find it very difficult to center a view inside toolbar's layout itself because the position is calculated relative to the navigation button and menu items. So it will be centered between the navigation button and menu items and not between the actual toolbar start and end.
来源：https://stackoverflow.com/questions/28443786/how-to-center-imageview-in-a-toolbar