In android using a viewpager and a tab layout it is easy to display multiple screens in the same activity. But if you want to display two set of things in the same screen itself ,it may not be possible with the viewpager. Because you need to switch the screen by swiping left or right if you are using a viewpager. But this can be achieved using a custom layout like slidinguppanel.
Android SlidingUpPanel is a multi pane layout in which the user can switch between two layouts in which one will be sliding up layout appearing from bottom. In this example we will see how to use a SlidingUpPanel , it can be simply implemented by using the help of slidingUpPanel library.
If you find the tutorial useful please subscribe to our YouTube channel
Steps
- Create a project in android studio.
- Compile the sothree library in your build.gradle file
- Add the Slidinguppanel layout to your activity’s layout file
- Implement the listeners for slidinguppanel in your activity’s java file.
Create New 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.
Compile sothree library in your build.gradle file
As we mentioned above we need a library for creating the slidinguppanel custom widget. All you need to do is to add the following line inside dependency of build.gradle and click on sync now.
compile 'com.sothree.slidinguppanel:library:3.3.0'
Add the Slidinguppanel layout to your activity’s layout file
Now you need to add the slidinguppanel widget to the activity’s layout file . There will be two sections in which one will be upper layout and the another one will the bottom layout which you can drag upwards. Following the code for your layout file.
<com.sothree.slidinguppanel.SlidingUpPanelLayout android:id="@+id/sliding_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom" sothree:umanoPanelHeight="68dp" sothree:umanoShadowHeight="4dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--here comes your main layout --> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center|top"> <!-- here comes your sliding up panel layout--> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center|top" android:text="Sliding Up Panel" android:textSize="16sp" /> </LinearLayout> </com.sothree.slidinguppanel.SlidingUpPanelLayout>
You can adjust the umanoPanelHeight in the above layout to decide the height of layout which is sliding up.
Implement the listeners for slidinguppanel in your activity’s java file
Now you are ready with the layout. You can access the widget in your java file and give the functionalities required as like in normal activities and using the below code you can identify and give some actions when expand or collapse of sliding panel occurs
SlidingUpPanelLayout slidingUpPanelLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
slidingUpPanelLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
@Override
public void onPanelSlide(View panel, float slideOffset) {
}
@Override
public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
// Toast.makeText(getApplicationContext(),newState.name().toString(),Toast.LENGTH_SHORT).show();
if(newState.name().toString().equalsIgnoreCase("Collapsed")){
//action when collapsed
}else if(newState.name().equalsIgnoreCase("Expanded")){
//action when expanded
}
}
});
Now let us see a simple example which is making use of the above functionality. In the following example there will be one calendar in the main view and by selecting one dat in the calendar the selected date will be displayed in the sliding up layout. Here am just displaying the date in the TextView , but if you want you can use is as a filter by date
functionality if you are having a listview, gridview or recyclerview which is displaying huge data.
In this example we want a calendar view in main layout.Am using the below library for displaying calendar
compile 'com.prolificinteractive:material-calendarview:1.4.0'
Your layout file will become
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="@+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--here comes your main layout -->
<com.prolificinteractive.materialcalendarview.MaterialCalendarView
android:id="@+id/cv_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mcv_selectionColor="#00F"
app:mcv_showOtherDates="all" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top">
<!-- here comes your sliding up panel layout-->
<TextView
android:id="@+id/tv_selected_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="Sliding Up Panel"
android:textSize="16sp" />
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
Now Here is the full code of my Activity file
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
MaterialCalendarView cv_date;
TextView tv_selected_date;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
cv_date.setOnDateChangedListener(new OnDateSelectedListener() {
@Override
public void onDateSelected(MaterialCalendarView widget, CalendarDay date, boolean selected) {
tv_selected_date.setText(date.getDate().toString());
}
});
}
private void init() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
cv_date = (MaterialCalendarView) findViewById(R.id.cv_date);
cv_date.setSelectionMode(MaterialCalendarView.SELECTION_MODE_SINGLE);
tv_selected_date = (TextView) findViewById(R.id.tv_selected_date);
}
}
Now run the code you will get the output displayed in the beginning of the tutorial.
