Remove padding from bottom toolbar completely?

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:

Hi, no i dont need textview, just another two buttons below the first row to control brightness and speed. When pressed they should move the toolbar up and show two sliders to set the values. But thats my final goal, for now it would be just great to achieve the toolbar like in the picture example and know how to control the size effectively... — breakout, Nov 26 '15 at 13:56
The height of the Toolbar...i am plannuing to make it slimmer than the top Toolbar. — breakout, Nov 26 '15 at 14:00
Why are you using a toolbar ? Optimize your layout by putting all the views inside a RelativeLayout(No need for LinearLayout). the views are being measured twice inside the RelativeLayout and twice more because you're using weight in the LinearLayout. Finally, double the height of the RelativeLayout and put a negative margin, and when pressed, play a translateY animation. — Rami Jemli, Nov 26 '15 at 14:01
@RamiJemli I will give your solution a try...I picked toolbar because i thought it would be more convenient. — breakout, Nov 26 '15 at 14:11
Sorry, i am relatively new and just learning about all the widgets and how to use them. — breakout, Nov 26 '15 at 14:17
@breakout Music apps are consuming in terms of memory, so performance is a matter of great importance in your case. — Rami Jemli, Nov 26 '15 at 14:17
posible duplicate: http://stackoverflow.com/questions/26433409/android-lollipop-appcompat-actionbar-custom-view-doesnt-take-up-whole-screen-w — seba123neo, Nov 26 '15 at 14:19
@tinysunlight Toolbars are used to hold a search edittext or some controls like breakout did. It's not a bad choice, but perf matters. — Rami Jemli, Nov 26 '15 at 14:20
@seba123neo The solution in this post, using `app:contentInsetStart="0dp"` didnt work for me. — breakout, Nov 26 '15 at 14:25
try disable setHomeButtonEnabled in the code, i thinks is a space reserved for that. — seba123neo, Nov 26 '15 at 15:01
@seba123neo I didnt set the bottom Toolbar as SupportActionBar though. — breakout, Nov 26 '15 at 15:05
doesnt matter if you use it as SupportActionBar, try to use in the code and disable the setHomeButtonEnabled. I also had this problem and it works. Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar_bottom); mToolbar.setHomeButtonEnabled(false); — seba123neo, Nov 26 '15 at 15:11
@seba123neo I cant call this method on mToolbar. Dont know why? — breakout, Nov 26 '15 at 16:34

score 0 · Answer 1 · answered Nov 26 '15 at 14:32

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:

Set the parent RelativeLayout to have a height of wrap_content, then use the gravity center_vertical.
Set each child centered with android:layout_centerVertical="true".
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.

I edited according to your advise but i still have a lot of unwanted padding in my toolbar: — breakout, Nov 26 '15 at 14:49

Remove padding from bottom toolbar completely?

1 Answers1