Omar Alaa Omar Alaa - 3 months ago 25
Android Question

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

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

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));
Comments