Intro

In this post we will show you how you can get the visibility of a view element in Android when you scroll the screen, how to determine how much of a view is visible on the screen at given time, to follow the changes in visibility of the given view. This could be useful if you want to trigger some action when scrolling and you need the view will be fully visible, or maybe more than 50% visible, depending on your specific needs. This is especially useful if you are implementing MRAID 3.0 (Mobile Rich Media Ad Interface) exposure change. You can find this implementation on page 60 in the MRAID 3.0 documentation here.

In the example we will be using three TextViews, and we will measure the visibility on screen of the middle element. We will be using Kotlin in this example.

The example

First we will create a new project in Android Studio with an empty activity and we will name the project VisibilityExposureChange. We will start with the layout. Our root layout element will be a ScrollView. Because a ScrollView can only have one direct child, we will add a Constraint layout inside the ScrollView that we will use as a frame. Inside the constraint layout we will add two TextViews and between them a WebView. We will set some dummy text in the TextViews. When we are done, our layout will look like this:

Now we go to the main activity. In order to measure the visibility of the view we will need two methods onScrollTouchListener() and getViewVisibilityOnScrollStopped().

In the onScrollTouchListener() method we will handle the user’s action as a MotionEvent and we will get A MotionEvent is an object that is used to report movement events (mouse, pen, finger, trackball). Motion events may hold either absolute or relative movements and other data, depending on the type of device.

Based on the user action we will get the ScrollView location on the screen using the getLocationOnScreen method of the View class and the Scroll view height. After that we will get our measured view as a child of the constraint layout element, and we will get the location and the height of our measured view. With this data as parameters we will call our second method to get the view’s visibility when the scrolling is stopped. The code for this method will look like this:

In our second method getViewVisibilityOnScrollStopped() we will use four parameters – location of the scroll view on screen, the height of the scroll view, the location of our measured view on screen and the height of our measured view on screen. In this method we will check the visibility of our measured view using the top and bottom of the measured view. If the bottom and the top of the view are both inside the scroll view, the visibility will be 100%, and if the view’s bottom is outside of the scroll view we will calculate the visible part by subtracting the measured view’s top from scroll view’s bottom. The code for this method will look like this:

The final result:

 

You can find the whole project here.

Happy coding!

Spread the love

Leave a Reply

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