CODEWITHSUNDEEP
androidandroid-coordinatorlayoutbottom-sheet
Raducu Mihai
Raducu Mihai

Reputation: 343

How to set height for Coordinator Layout's childs in percentage?

I want to design a layout composed from: a toolbar at the top of the layout (which should take 20% of the screen), then, vertically,underneath, a ViewPager (which should take 60% of the screen) and then, still vertically underneath, a BottomSheet (which should take 20% of the screen when it is collapsed and to take 100% of the screen when it is expanded).
Now I have declared the bottomsheet like this: 

<LinearLayout
    android:id="@+id/BSSECONDTOOLBAR"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="???"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:layout_gravity="bottom"
    android:gravity="bottom"
    android:background="#f44242" />

Since this should be a direct child of a CoordinatorLayout I cannot use the layout_weight attribute.

My question is how do I set the BottomSheet height in percentage?

Upvotes: 7

Views: 4878

Answers (2)

JaiminKumar Patel
JaiminKumar Patel

Reputation: 11

I know that this is too late but this answer might help someone...

I achieved the half screen layout through below code.

BottomSheetBehavior.from(bottom_sheet).peekHeight =
        (Resources.getSystem().getDisplayMetrics().heightPixels)/2

I wanted to cover the half screen of any size device, thus I divided with 2 you can cover your desired device screen size amount by above code through changing the divider.

put this code in activity where your bottom sheet will pop up. (in onCreate method)

in code, bottom_sheet is the id given to bottom sheet root layout.

Upvotes: 1

Ben P.
Ben P.

Reputation: 54234

There are two things to address in your question. The first is how to make the bottom sheet fill the parent when it is expanded.

This is quite simple: set android:layout_height="match_parent"

Then we have to address setting the peek height of the bottom sheet to be 20% of the parent. This is not possible to do in XML because CoordinatorLayout doesn't support weights or percentages. Therefore, we have to set it in Java. You can add this code to your onCreate() method:

// assume `coordinator` is your CoordinatorLayout

coordinator.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        coordinator.getViewTreeObserver().removeOnGlobalLayoutListener(this);

        int twentyPercent = (coordinator.getHeight() / 5);

        // make the toolbar 20% of the screen
        View toolbar = findViewById(R.id.your_toolbar_id);
        ViewGroup.LayoutParams toolbarParams = toolbar.getLayoutParams();
        toolbarParams.height = twentyPercent;
        toolbar.setLayoutParams(toolbarParams);

        // make the viewpager the rest of the screen (60%)
        View pager = findViewById(R.id.your_viewpager_id);
        ViewGroup.MarginLayoutParams pagerParams = (ViewGroup.MarginLayoutParams) pager.getLayoutParams();
        pagerParams.topMargin = twentyPercent;
        pagerParams.height = (coordinator.getHeight() - (twentyPercent * 2));
        pager.setLayoutParams(pagerParams);

        // make the bottomsheet 20% of the screen
        View bottomSheet = findViewById(R.id.BSSECONDTOOLBAR);
        BottomSheetBehavior<View> behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setPeekHeight(twentyPercent);
    }
});

Upvotes: 5

Related Questions