Search code examples
androidbuttontoolbarandroid-wrap-content

buttons on toolbar too wide (android)


I have two buttons on the toolbar which are not obeying the "wrap_content" layout_width directive. I have added green and red background colors to make their true widths apparent in the screenshot. I have padding set to 0dp and also no margins. I have looked in my brief styles.xml and see nothing relevant, and I haven't noticed anywhere else in the app which this is happening. Any tips would be appreciated.

Thanks.

enter image description here

<android.support.v7.widget.Toolbar
    android:id="@+id/pdf_renderer_toolbar"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/primaryColor"
    android:theme="@style/MyStyle"
    app:layout_scrollFlags="scroll|enterAlways"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Docs"
        android:layout_gravity="right"
        android:layout_marginRight="0dp"
        android:padding="0dp"
        android:background="@color/green_button_color"
        android:textColor="@color/solid_white"
        android:textSize="18sp"
        android:id="@+id/pdf_docs_button"
        android:textAllCaps="false"
        style="?android:attr/borderlessButtonStyle"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Edit"
        android:layout_gravity="right"
        android:padding="0dp"
        android:layout_marginRight="0dp"
        android:background="@color/red_button_color"
        android:textColor="@color/solid_white"
        android:textSize="18sp"
        android:id="@+id/pdf_edit_button"
        android:textAllCaps="false"
        style="?android:attr/borderlessButtonStyle"
        />
</android.support.v7.widget.Toolbar>

Solution

  • Try this:

    add:

     android:minHeight="0dp"
     android:minWidth="0dp" 
    

    for both the buttons:

     <?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/pdf_renderer_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary"
        android:theme="@style/MyStyle"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    
        <Button
            android:id="@+id/pdf_docs_button"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="right"
            android:layout_marginRight="0dp"
            android:background="@color/color_red"
            android:minHeight="0dp"
            android:minWidth="0dp"
            android:padding="0dp"
            android:text="Docs"
            android:textAllCaps="false"
            android:textColor="@color/color_black"
            android:textSize="18sp" />
    
        <Button
            android:id="@+id/pdf_edit_button"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="right"
            android:layout_marginRight="0dp"
            android:background="@color/color_green"
            android:minHeight="0dp"
            android:minWidth="0dp"
            android:padding="0dp"
            android:text="Edit"
            android:textAllCaps="false"
            android:textColor="@color/color_black"
            android:textSize="18sp" />
    </android.support.v7.widget.Toolbar>
    

    output:

    enter image description here