Posted on

Android Popup With Activities


android popup
Designed by Freepik

I love implementing designs and here’s what we have today. Filter popup. Let’s do this

 

Which Part

First of all, I’m not going to go through all the fancy icons, slider, those are just a tedious design work: finding icons, creating vector drawables and it brings basically no value to you. What I want to show is how to implement that top popup in a different cool way, which you might not expect to

So the natural way is implement from how it looks – it looks like a bottom sheet, but a top one, so you might think of using Top Sheet and messing up with Toolbars to change name, buttons

And definitely, there’s many ways to implement this design, but what I want to show is how to do it with different Activities!

android popup

Why Activities

It’s kind of looks it the design itself like it’s a different activities already. Just close the actual content with a hand and leave Toolbar only. Looks like two activities, right?

Plus it gives you more like object oriented design, with filter stuff delegated to FilterActivity and keeping you main one clean

So first you need to create an activity for this filter, I called it FilterActivity, populate menu with icons, set home button enabled and create a filter layout. That’s just an empty popup background

Translucent Window

Now by default there’s a white background for all activities and here’s where magic comes. With this attribute you can make activity background translucent/any color you want

And even more: when you apply windowIsTranslucent for your activity – you can see previous activity right through it, just like second activity is a popup. Fist activity is just in onPause

Activity Transitions

Half way done, but there’s no sliding animation. By default there’s a fade animation between activities. You need to create slide transition file, I called it filter_enter.xml

That’s a slide from top transition, which applied only to the activity content. Now the tricky part was slideEdge attribute. By default slide transition goes from bottom. And if you try to look for attributes with autofill – there isn’t any for direction or something like that

By going through class reference I figured that there’s an attribute that does exactly what I need! Btw, I couldn’t find anybody mentioning that on Stack, only some ugly solutions

Now to apply this transition – add those attributes to FilterActivity style

And start that activity this way

What you’ll get is top sliding animation just like it looks in the design and implemented in a very clean way

Return Result

Since it’s two different activities, you need to return filtered result to first activity and it’s easy with passing Intent as an activity result. Few changes to the first actiivty

And pass result Intent in FilterActivity when clicked on toolbar buttons

Click Outside

The whole thing is almost done, the only thing was missing is to cancel this popup when clicked outside of the actual popup layout. I added a background view for FilterActivity to handle those clicks

goBack method is only triggered when you click outside of popup, this is done by setting focusable and clickable to true for the popup view

 

 

That’s it, if you didn’t know about setting windowIsTranslucent – it’s a cool attribute. You can get source code here. I kind of like this approach, what do you think of it? Also check this post to read more about popup animations

 

 


  • Andres Garcia

    Love it !!

    • Oh yeah, those designers go completely bananas on some of the designs out there. Surprisingly, I see so many web implementations yet, for sick stuff like gooey animations etc