How to make the bottom Sheet adjust its size on different screen sizes?

Question

I have tried to make a bottom sheet and it contains two rows , I want the first row only to be visible to the user when he opens the app . When I ran the app on the emulator it was great but when i tried to run it on a real device (Samsung J7) the first row and a part of the second row appeared. My question is how can I adjust my code so only 1 row appears on different screen sizes

Emulator Image

Real device screenshot

My xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:padding="0dp">
    <fragment
        xmlns:map="http://schemas.android.com/apk/res-auto"

        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.dell.drawroutes.MapsActivity" />

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:background="@android:color/white"
        android:clipToPadding="true">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingTop="@dimen/card_margin"
            android:columnCount="3">

            <android.support.v7.widget.CardView
                android:id="@+id/distancecard"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/Card_View_Height"
                android:layout_margin="@dimen/card_margin"
                android:layout_columnSpan="1"
                android:layout_column="0"
                android:layout_gravity="fill"
                android:layout_row="0"
                android:layout_columnWeight="1">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Info"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Hello World !" />

                </LinearLayout>

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

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="@dimen/Card_View_Height"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin"
                android:layout_columnSpan="1"
                android:layout_gravity="fill"
                android:layout_column="1"
                android:layout_row="0"
                android:layout_columnWeight="1">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Friends"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Hello World !" />

                </LinearLayout>

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

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="@dimen/Card_View_Height"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin"
                android:layout_columnSpan="1"
                android:layout_column="2"
                android:layout_gravity="fill"
                android:layout_row="0"
                android:layout_columnWeight="1">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Related"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Hello World !" />

                </LinearLayout>

            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:id="@+id/durationcard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin"
                android:layout_columnSpan="3"
                android:layout_column="0"
                android:layout_gravity="fill_horizontal"
                android:layout_row="1">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Duration"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Hello World !" />

                </LinearLayout>

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


        </GridLayout>
    </android.support.v4.widget.NestedScrollView>

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

Java Code

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps2);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);


        View bottomSheet = findViewById(R.id.bottom_sheet);
       BottomSheetBehavior bottomSheetBehavior = bottomSheetBehavior.from(bottomSheet);
        bottomSheetBehavior.setPeekHeight(300);
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

Answer 1

Your single card has a height (according to your layout):

@dimen/card_view_height

Pass this value to setPeekHeight function:

bottomSheetBehavior.setPeekHeight(getContext().getResources().getDimension(R.dimen.card_view_height));