完全从底部工具栏删除填充？

Question

i am building a bottom Toolbar for my app. It should look exactly like this example from the Google design:

My problem is that i cant get the small "P" image on the left of the bottom Toolbar to fill the entire Toolbar. There is always a small padding. Also the image buttons for skip and pause dont center nicely in the toolbar when i change the Toolbar size manually to be slimmer. Take a look at my current Toolbar:

Check out my layout file for the Toolbar:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar_bottom"
    android:layout_width="match_parent"
    android:layout_height="24dp"
    android:background="@android:color/white"
    android:minHeight="24dp"
    android:layout_alignParentBottom="true"
    app:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetRight="0dp"
    android:padding="0dp"
    android:layout_margin="0dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:src="@mipmap/ic_launcher"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3">
            <ImageButton
                android:id="@+id/btn_skip_previous"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/ic_skip_previous_black"
                style="@style/Widget.AppCompat.ActionButton" />
            <ImageButton
                android:id="@+id/btn_playpause"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_toRightOf="@id/btn_skip_previous"
                android:src="@drawable/ic_pause_black"
                style="@style/Widget.AppCompat.ActionButton" />
            <ImageButton
                android:id="@+id/btn_skip_next"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_toRightOf="@id/btn_playpause"
                android:src="@drawable/ic_skip_next_black"
                style="@style/Widget.AppCompat.ActionButton" />
        </RelativeLayout>
    </LinearLayout>
</android.support.v7.widget.Toolbar>

Please help me, how can i get the bottom Toolbar like in the first picture??

EDIT: Here is what i got with Daniel Lews tips. The symbols are arranged better now, but there is still a lot of padding all over the place:

Answer 1

You have android:minHeight="24dp" set on the Toolbar , and thus it's guaranteed to be at least 24dp tall. Try removing android:minHeight .

(Most of the other attributes you've set in an attempt to fix it could also probably be removed.)

---

As for centering the controls - there's no layout attributes telling them to be centered right now! There are a variety of ways to solve this problem:

1. Set the parent RelativeLayout to have a height of wrap_content , then use the gravity center_vertical .
2. Set each child centered with android:layout_centerVertical="true" .
3. Set each child's height to be match_parent and then use android:gravity to set where the content inside each child should go.

...And I'm sure there are more ways.

You might want to change the RelativeLayout to a LinearLayout with weights so that you can have all the buttons be correctly spaced in a horizontal manner.