Android Bottom Sheet Example

A bottom sheet is a layout that slides up from the bottom edge of the screen. Now a days bottom sheet is becoming common in all popular mobile applications .We can use different views like recycler view,gridview,listviews or just a linear layout with buttons and edittext inside a bottom sheet.

In this tutorial we will learn how to implement a bottom sheet in android .This bottom sheet example project  will contain an activity with a button which on click will popup a bottom sheet with listview .

Steps

  1. Create new project in android studio
  2. Add the button for opening bottom sheet to your layout file
  3. Create layout for the bottom sheet
  4. Implement the java code for opening bottom sheet on click of the button

Expected Output

android bottom sheets

Create project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Add the button for opening bottom sheet to your layout file

A layout file will be automatically created while you are doing this as new project ,if not right click on res->layout folder and click on New -> Layout resource file. Now add the following code in to the XML file created . Now you can place the following button in your layout file

<Button
android:id="@+id/btn_open_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Open Bottom Sheet"
android:background="@color/colorPrimary"
android:textColor="@color/white"
/>

Create a layout for the bottom sheet

Now you need to create a layout “layout_bottom_sheet.xml” in res/layout  and implement the following code. This will be layout inflating for bottom sheet dialog. In this example we are having a listview inside bottom sheet . You can have layout based on your requirement.

layout_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ListView
android:id="@+id/lv_languages"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</ListView>
</RelativeLayout>

Develop Java code

Now finally add the below code to your MainActivity onClick of the button. The code will inflate the layout which we created and will show it inside a bottom dialog.

View view = getLayoutInflater().inflate(R.layout.layout_bottom_sheet, null);
lv_languages = (ListView) view.findViewById(R.id.lv_languages);
lv_languages.setAdapter(list_adapter);
bottomSheetDialog = new BottomSheetDialog(this);
bottomSheetDialog.setContentView(view);
bottomSheetDialog.show();

Following is the full code the activity’s java file.

MainActivity.java

package codes4.com.bottomsheets;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.BottomSheetDialog;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

Toolbar toolbar;
Button btn_open_bottom_sheet;
ListView lv_languages;
BottomSheetDialog bottomSheetDialog;
ArrayAdapter list_adapter;
String[] languages = new String[] { "SQL",
"JAVA",
"JAVA SCRIPT",
"C#",
"PYTHON",
"C++",
"PHP",
"IOS",
"ANDROID"
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

init();

}

private void init() {

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
btn_open_bottom_sheet = (Button) findViewById(R.id.btn_open_bottom_sheet);
btn_open_bottom_sheet.setOnClickListener(this);
list_adapter = new ArrayAdapter(getApplicationContext(),android.R.layout.simple_list_item_1, android.R.id.text1,languages){

@Override
public View getView(int position, View convertView, ViewGroup parent) {
TextView textView = (TextView) super.getView(position, convertView, parent);
textView.setTextColor(getResources().getColor(R.color.black));
return textView;
}
};
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}

@Override
public void onClick(View v) {

if(v.getId() == R.id.btn_open_bottom_sheet){

ShowBottomSheet();

}
}

private void ShowBottomSheet() {

View view = getLayoutInflater().inflate(R.layout.layout_bottom_sheet, null);
lv_languages = (ListView) view.findViewById(R.id.lv_languages);
lv_languages.setAdapter(list_adapter);
bottomSheetDialog = new BottomSheetDialog(this);
bottomSheetDialog.setContentView(view);
bottomSheetDialog.show();
}
}

Note

Following are the colors used in the above code which should be added to your colors.xml file.

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="white">#FFFFFF</color>
<color name="black">#000000</color>
</resources>

Now just run the application. You can see the app opens with the expected output shown at beginning of the tutorial

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *