Add custom layout to ActionBar/Toolbar with no margins
I want to create a custom height toolbar and it works fine until I add content to it. Then my content is adjusted to be between the back arrow and the actionbar buttons.
How can I make my content take the entire width so I can create a layout like below? I guess the "+" icon needs to be in a parent layout of the toolbar?
The docs say:
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.
But I don't have the gravity set to CENTER_HORIZONTAL...
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:iosched="http://schemas.android.com/apk/res-auto"
iosched:theme="@style/ActionBarThemeOverlay"
iosched:popupTheme="@style/ActionBarPopupThemeOverlay"
android:id="@+id/toolbar_actionbar"
android:background="@color/theme_primary"
iosched:titleTextAppearance="@style/ActionBar.TitleText"
iosched:contentInsetStart="16dp"
iosched:contentInsetEnd="16dp"
android:layout_width="match_parent"
android:layout_height="128dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
... My Content
Currently my layout ends up like this when running with left margin set to 168:
I'm not sure if you still need help with this, but it has the most votes for an unanswered question in not only the android-5.0-lollipop tag, but also the android-toolbar tag right now. So, I thought I'd give it one.
This layout is pretty easy to achieve, especially with the new Design Support Library.
Implementation
The root of your hierarchy will need to be the CoordinatorLayout.
As per the docs:
Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.
So, we'll use this to position the FloatingActionButton where it needs to go.
The rest is pretty straightforward. We're going to use a vertical LinearLayout to position the Toolbar, text container, tab container, and then a ViewPager. So, the full layout looks like:
<android.support.design.widget.CoordinatorLayout
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="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#181E80"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:paddingTop="8dp">
<ImageView
android:id="@android:id/icon"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:importantForAccessibility="no"
android:src="@drawable/logo" />
<TextView
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@android:id/icon"
android:layout_marginStart="14dp"
android:layout_toEndOf="@android:id/icon"
android:text="Chelsea"
android:textColor="@android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="@android:id/text1"
android:layout_below="@android:id/text1"
android:text="England - Premier League"
android:textColor="@android:color/white"
android:textSize="12sp" />
</RelativeLayout>
<FrameLayout
android:id="@+id/tab_container"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#272F93">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabContentStart="70dp"
app:tabGravity="center"
app:tabIndicatorColor="#F1514A"
app:tabMode="scrollable"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="#99ffffff" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="16dp"
android:src="@drawable/ic_star_white_24dp"
app:backgroundTint="#F1514A"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="@id/tab_container"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
There's not a whole lot more to add, the only other thing I'd mention is how to use the TabLayout. If you're using a ViewPager like we are, you'd probably call one of the two:
Notes
I just kind of eyeballed the dimensions, trying to match the picture as much as possible.
Results
