Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Developing Custom Android Sheet Sliding From Top of Device Screen

Or simplified, writing your own TopSheetBehavior using androidx.* modules

 

 
Elvina Sh
Marketing associate at Navigine.com — Integrated software platform for precise positioning.
Published: August 10, 2020
Tweet
Share
 

Photo by Gaspart from Dribbble

 

Hi there! In the Navigine team, we’ve been providing indoor and outdoor positioning mobile technologies that enable advanced indoor navigation and proximity solutions for eight years.

In the previous article, we told you about the Bottom Sheet Behavior and how to animate the button on top of it. Today we want to tell you one interesting feature we implemented in our Navigine Android app which will make your UI more attractive. It is very much tied to the previous article. Actions speak louder than words, so let’s not pull too long with the intro and get down to the important things right away.

 

What about the top?

Well, we figured out with pulling the view from the bottom, learned how to use its sliding, placed different UI components, and even had to fight a little with the scroll view inside, but this is not a problem either. But then we decided that we want a pull-out window from the top of the screen so that we can show the debug message, because at some moments these messages can be very useful, at least for some clients.

 

 

We decided to search if Google has anything ready for this case, however, we were disappointed because we could not find anything. Then we decided to write our own Top Sheet Behavior as the analog of Bottom Sheet Behavior. Let’s understand how these two classes differ from each other and write our own top sheet behavior. Above is the init example of top sheet behavior, it looks pretty similar to the bottom sheet.

 

Programming part

An obvious change that now the view is shown on top and hides when scrolling up. Therefore, it is important and sufficient for us to know how the coordinate system works on android. The image below shows how it works. As soon we work with the vertical coordinates, we only need to know that the top is zero.

 

Image for post

The image presents both orientations (Landscape/Portrait)

 

Since programmers are lazy and do not want to write a lot of code, we will also use the code of the bottom sheet and just rewrite some parts of it. First, we need to set the max offset as zero and now it will be the same as min offset for bottom sheet. Here is the code part when it all set up.

 

 

The next important parts are scrolling and touching because the top sheet should have another behavior than bottom sheet. In other words, it should hide when scrolled up and expand when scrolled down. Therefore, the main thing here is to perform reciprocal actions, and then everything will turn out right. The code below shows how the main logic of onNestedPreScroll will look like.

 

 

As I said, everything is happening here opposite to the Bottom Sheet Behavior. And another important thing to change is setting the state. When we set the collapsed state, the view should disappear at the top of device screen and its bottom should be equal to the min offset. (Because sometimes top sheet behavior could be not hideable.) Here is the code snippet on how the set state function should be changed inside.

 

 

It seems that we have described the most important changes to be made in the code of the bottom sheet behavior. So now let’s see how it works in our application.

 

Our usage results

As you can see in the screenshot below there is a semi-transparent window on top of the main device menu with the single word Hello. This is the thing we wanted for showing the logs. We made it open when pulled with three fingers from the top of the screen. Firstly, we didn’t want everyone to be able to use it, secondly, most of the other gestures were already involved in our map.

 

Image for post

Screenshot from Navigine mobile app

 

As you can see, we have not yet added the display of logs to the end, since we were busy with other nuances, however, we decided to leave this window as an easter egg, in case someone finds it, he will see this simple and familiar message and will be happy. Unfortunately, so far no one has informed us about such a find, but we still hope that someone succeeded.

 

Summary

Summing up, I would like to say that if you wish, you can also create left sheet and right sheet behaviors, it’s up to you. As you can see above, not much code needs to be written, and not so many changes to be made in the existing code to get the result. You can find the full code for bottom sheet behavior in this gist. Feel free to ask your questions.

 

 

Tags: Android,Programming,Android App Development,AndroidDev,Material Design

 

View original article at: 


 

Originally published: July 26, 2020

Android News
Our Engineering Roadmap
Our Engineering Roadmap

By Mark Ng

We just completed our engineering road map for our Android apps at Australia Post. Each year we get together and try to decide on what we are going to do from an engineering perspective for the next 12 months. Each team gets to decide on what should be done now, what they want to complete by the end of the year and whats on the horizon for next year.

By ProAndroidDev -
Android News
Android Activity Lifecycle considered harmful
Android Activity Lifecycle considered harmful

By Eric Silverberg

The Android activity lifecycle is one of the first architectural concepts learned by a new Android developer. Ask any Android dev and they’ll likely all have seen this handy diagram from Google: 

By ProAndroidDev -
Android News
Our Safe Approach to Android Jetpack Navigation in a Multi-Modular App
Our Safe Approach to Android Jetpack Navigation in a Multi-Modular App

By Alejandro Weichandt

It has been a year since we started working on the Android version of the mobile app at Sync. During that year, we faced more than once that moment when we had to choose which path to follow on an Architectural decision. This story is about Navigation.

By ProAndroidDev -
Android News
Custom KotlinX Serializers
Custom KotlinX Serializers

By Jobin Lawrance

Let’s say we have a third-party class that we are using as a type in one of our data class that we want to be serialized, then we have to write a custom serializable for @Serializable to work.

 

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One