Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove top and bottom padding from android.support.v7.widget.Toolbar?

I am trying to place a SlidingTabLayout inside my android.support.v7.widget.Toolbar but for some reason there is extra top and bottom padding in portrait layout. As shown in this screenshot:

Portrait

In landscape layout the android.support.v7.widget.Toolbar is shorter and the extra padding is gone:

Landscape

I am aware of the contentInsertStart and contentInsetEnd attributes but there does not appear to be anything for top and bottom. Here is my layout:

<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="?attr/actionBarTheme"
    >

    <!-- Changing the size of the toolbar fixed the problem below but I don't like the solution since the height difference is perceptible -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/colorPrimary"
        android:padding="0dp"
        app:popupTheme="?attr/actionBarPopupTheme"
        >

        <!-- TODO: BUG - This isn't filling out the action bar in portrait (see note above) -->
        <com.myapplication.views.widgets.SlidingTabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/pink_400"
            />

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

</android.support.design.widget.AppBarLayout>

As indicated in the comments if I manually set the height of the android.support.v7.widget.Toolbar to 48dp then the SlidingTabLayout fills it out but there are two problems here:

  1. The toolbar is a different height than the standard toolbar which is noticeable when changing activities.
  2. The icons in the Toolbar are no longer vertically centered if I change it's height

So as the title says, how do I remove top and bottom padding from android.support.v7.widget.Toolbar?

like image 717
Cory Charlton Avatar asked Mar 06 '16 06:03

Cory Charlton


People also ask

What is the difference between toolbar and Action bar in android?

What is the difference between the toolbar and the action bar? The most obvious difference between the two is the updated visual design of the toolbar. The toolbar no longer includes an icon on the left side and decreases some of the spacing between the action items on the right side.

What is androidx appcompat widget toolbar?

androidx.appcompat.widget.Toolbar. A standard toolbar for use within application content. A Toolbar is a generalization of action bars for use within application layouts.

What is android studio toolbar?

In Android applications, Toolbar is a kind of ViewGroup that can be placed in the XML layouts of an activity. It was introduced by the Google Android team during the release of Android Lollipop(API 21). The Toolbar is basically the advanced successor of the ActionBar.


1 Answers

Ok so @RaviSravanKumar comment helped me figure this out. When I changed my layout back to:

<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="?attr/actionBarTheme"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="?attr/actionBarPopupTheme"
        >

        <com.myapplication.views.widgets.SlidingTabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="wrap_content"
            android:layout_height="?attr/actionBarSize"
            />

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

</android.support.design.widget.AppBarLayout>

With the heights set to ?attr/actionBarSize I noticed the SlidingTabLayout was actually filling the entire height. I only noticed this because of the pink background I had set for debugging.

The reason I missed this originally was because the underline indicator was still not at the bottom (as shown in the screenshot in the original question). I had to make the following changes to the SlidingTabLayout code:

Original:

public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    // Disable the Scroll Bar
    setHorizontalScrollBarEnabled(false);
    // Make sure that the Tab Strips fills this View
    setFillViewport(true);

    mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

    mTabStrip = new SlidingTabStrip(context);
    addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
}

New: (note the change from LayoutParams.WRAP_CONTENT to LayoutParams.MATCH_PARENT:

public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    // Disable the Scroll Bar
    setHorizontalScrollBarEnabled(false);
    // Make sure that the Tab Strips fills this View
    setFillViewport(true);

    mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

    mTabStrip = new SlidingTabStrip(context);
    addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}

Original:

protected TextView createDefaultTabView(Context context) {
    TextView textView = new TextView(context);
    textView.setGravity(Gravity.CENTER);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
    textView.setTypeface(Typeface.DEFAULT_BOLD);
    textView.setLayoutParams(new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

    TypedValue outValue = new TypedValue();
    getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
            outValue, true);
    textView.setBackgroundResource(outValue.resourceId);

    if (Build.VERSION.SDK_INT >= 14) {
        textView.setAllCaps(true);
    }

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    textView.setPadding(padding, padding, padding, padding);

    return textView;
}

New: (note the change to the layout params and padding)

protected TextView createDefaultTabView(Context context) {
    TextView textView = new TextView(context);
    textView.setGravity(Gravity.CENTER);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
    textView.setTypeface(Typeface.DEFAULT_BOLD);
    textView.setLayoutParams(new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));

    TypedValue outValue = new TypedValue();
    getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
            outValue, true);
    textView.setBackgroundResource(outValue.resourceId);

    if (Build.VERSION.SDK_INT >= 14) {
        textView.setAllCaps(true);
    }

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    textView.setPadding(padding, 0, padding, 0);

    return textView;
}
like image 69
Cory Charlton Avatar answered Nov 15 '22 17:11

Cory Charlton