Android toolbar Layout issue

Question

I am trying to make a bottom bar using the toolbar and aligning it to the parent bottom. This is how it looks:

Bottom Toolbar

But somehow as mentioned in the image, their is a lot of empty space due to which the layout is not exactly centered. Why is that happening?

bottom_tool_bar.xml

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/ColorPrimaryLight"
android:elevation="4dp"
android:layout_alignParentBottom="true"
>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/origin_select"
        android:src="@mipmap/ic_action_play"
        android:background="@drawable/feedback_background"
        android:onClick="choose_origin_button"
        />


    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/destination_select_select"
        android:src="@mipmap/ic_action_stop"
        android:background="@drawable/feedback_background"
        android:onClick="choose_destination_button"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/poi_select"
        android:src="@mipmap/ic_action_pause"
        android:background="@drawable/feedback_background"
        android:onClick="choose_interest_button"/>


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

The layout file for the concerned activity:

<include
    android:id="@+id/tool_bar"
    layout="@layout/tool_bar"
    >
</include>

<include
    android:id="@+id/bottom_tool_bar"
    layout="@layout/bottom_tool_bar">
</include>

<fragment
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/plot_path_map"
    android:layout_below="@+id/tool_bar"
    android:layout_above="@+id/bottom_tool_bar"
    android:name="com.google.android.gms.maps.MapFragment"
    />
<Button
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/submit_button"
    android:text="Submit"
    android:textColor="#FFFFFF"
    android:layout_centerHorizontal="true"
    android:background="@drawable/feedback_background"
    android:layout_centerVertical="true"
    android:textSize="20sp"
    android:layout_alignParentBottom="true"
    android:visibility="invisible"
    android:onClick="submit_button_click"
    />
</RelativeLayout>

http://stackoverflow.com/questions/26455027/android-api-21-toolbar-padding — Egor Neliuba, Jul 20 '15 at 12:38

score 1 · Accepted Answer · answered Jul 20 '15 at 12:48

If you want to place the toolbar at the bottom, this is what you should be doing.

Use a LinearLayout with alignParentBottom="true"

<RelativeLayout
android:id="@+id/mainLyt"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Some layout things -->

<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/bottomBar">

<!-- some scrolling content -->
</ScrollView>

<LinearLayout
android:id="@+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">

<!-- Some Buttons -->
</LinearLayout>

</RelativeLayout>

As you mentioned about spacing, which I believe is another question, you can modify it by using the following attributes inside your ToolBar.

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

It kinda worked. The space on the left has now disappeared and the layout is centered. However the space on the top and the bottom still exists. Any solution for that? — Bluesir9, Jul 21 '15 at 18:11

score 0 · Answer 2 · answered Jul 20 '15 at 12:06

0

Make a separate layout file and name it tool_bar.xml and make sure LinearLayout is your root layout.

Then in your activity type this:

<include
    android:id="@+id/tool_bar"
    layout="@layout/tool_bar"
    ></include>

Then give weight of 0.3 to all your ImageViews and layout:width and layout:height as wrap_content

answered Jul 20 '15 at 12:06

rusted brain

1,052
10
23

This already is a separate layout file that I include in the activity layout file. Your changes didn't make any improvement. – Bluesir9 Jul 20 '15 at 12:13
In your posted xml, you haven't included any layout files. if you have updated the xml please edit the OP. – rusted brain Jul 20 '15 at 12:18

CommonSenseCode · Answer 3 · 2015-07-20T12:54:20.103

For centering the Views you have many options two are the following (I believe the second is best):

First include weigthsum in your linearlayout, I like to use 100 since this helps me think in percentage, then include 2 stump framelayout in order to push your imageviews to the horizontal center and to let them keep responsive properties by using weight like this:

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="100"
        android:orientation="horizontal"
        >
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="30"/>
        <ImageView
            android:id="@+id/origin_select"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="13"
            android:background="@drawable/feedback_background"
            android:onClick="choose_origin_button"
            android:src="@mipmap/ic_action_play"
            />


        <ImageView
            android:id="@+id/destination_select_select"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="13"
            android:background="@drawable/feedback_background"
            android:onClick="choose_destination_button"
            android:src="@mipmap/ic_action_stop"/>

        <ImageView
            android:id="@+id/poi_select"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="13"
            android:background="@drawable/feedback_background"
            android:onClick="choose_interest_button"
            android:src="@mipmap/ic_action_pause"/>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="30"/>

    </LinearLayout>

As you can see both framelayout have nothing inside but they help you push your other ImageViews to the center they both give you 60% of space used and leave you just another 40% for your ImageViews thus they have each 13%.

On the other hand you can use a RelativeLayout as your parent element instead of LinearLayout and position Imageview with id: destination_select_select align center to parent both horizontal and vertical and then position the other two imageviews at the side of the one centered in the middle. This option might be the best:

Like this:

  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <ImageView
            android:id="@+id/origin_select"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@drawable/feedback_background"
            android:onClick="choose_origin_button"
            android:src="@mipmap/ic_action_play"
            android:layout_alignLeft="@+id/destination_select_select"
            />


        <ImageView
            android:id="@+id/destination_select_select"
            android:layout_width="wrap_content"
            android:layout_centerInParent="true"
            android:layout_height="match_parent"
            android:background="@drawable/feedback_background"
            android:onClick="choose_destination_button"
            android:src="@mipmap/ic_action_stop"/>

        <ImageView
            android:id="@+id/poi_select"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignRight="@+id/destination_select_select"
            android:background="@drawable/feedback_background"
            android:onClick="choose_interest_button"
            android:src="@mipmap/ic_action_pause"/>

    </RelativeLayout>

score 0 · Answer 4 · answered Jul 20 '15 at 12:47

Use below line to avoid left side gap in activity class.

mToolbar.setContentInsetsAbsolute(0, 0);

Look below code for avoid top and bottom space.

 <ImageView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@+id/origin_select"
            android:src="@mipmap/ic_action_play"
            android:background="@drawable/feedback_background"
            android:onClick="choose_origin_button"
            />

In your image view width should be a wrap_content and height should be 0dp

score 0 · Answer 5 · answered Feb 04 '17 at 12:37

0

To avoid top and bottom spaces,

Add this line

android:minHeight="0dp"

to the <android.support.v7.widget.Toolbar> properties.

answered Feb 04 '17 at 12:37

zoubair Omar

106
1
5

Android toolbar Layout issue

5 Answers5