Change box's background color when box appears in the middle of the screen

Question

I'm trying to make an app where the background color of the box will change when it appears in the middle of the screen. I was able to achieve this in javascript but I can't find any good methods in android java. Meaning I can't find similar methods as $this.scrollY, $this.innerHeight, box.offsetTop in android java to construct similar logic. So please assist me on achieving this.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:background="@color/skyblue"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">

        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        </LinearLayout>
    </ScrollView>
</android.support.constraint.ConstraintLayout>

MainActivity.java:

package com.example.test;

import android.support.v7.app.AppCompatActivity;
import android.os.*;
import android.widget.*;

public class MainActivity extends AppCompatActivity {

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

        LinearLayout content = findViewById(R.id.content);
        for (int x=0;x<25;x++) {
            RelativeLayout element = new RelativeLayout(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 400);
            params.setMargins(0, 0, 0, 50);
            element.setLayoutParams(params);
            element.setBackgroundResource(R.color.green);
            content.addView(element);
        }
    }
}

MY JAVASCRIPT WORKING EXAMPLE:

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}
var content = document.getElementById("content");
for (var x=0;x<25;x++) {
    var box = document.createElement("DIV");
    box.id = "box";
    content.appendChild(box);
}
content.children[0].style.backgroundColor = "#008100";
var current_box = content.children[0],
    scroll_timeout = undefined;

window.addEventListener("scroll", function () {
    var $this = this;
    window.clearTimeout(scroll_timeout);
    scroll_timeout = setTimeout(function() {
        var middle_line = $this.scrollY + ($this.innerHeight/2);
        for (var y=0;y<content.querySelectorAll("#box").length;y++) {
            var box = content.children[y];
            if ((box.offsetTop) < middle_line && (box.offsetTop + box.clientHeight + 50) > middle_line) {
                if (box != current_box) {
                    current_box.style.backgroundColor = "#6CABF7";
                    current_box = box;
                    current_box.style.backgroundColor = "#008100";
                }
                break;
            }
        }
    }, 100);
});

body {
    margin: 0;
}
#content {
    width: 60%;
    height: 100%;
    margin: 0% 20% 0% 20%;
}
#box {
    width: 100%;
    height: 500px;
    background-color: #6CABF7;
    overflow: hidden;
    margin-bottom: 50px;
}

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="content"></div>         
</body>
</html>

score 1 · Accepted Answer · answered Feb 01 '19 at 00:09

1

If you want to react to scroll events, then you need to listen for them. I didn't see any such listeners in your java code but there is a listener in your javascript code.

I found this StackOverflow question which I believe may help you.

listening to scroll events horizontalscrollview android

answered Feb 01 '19 at 00:09

Abra

19,142
7
29
41

Yeah i did that now. Its in my answer now – aman Feb 01 '19 at 00:49

score 1 · Answer 2 · answered Feb 01 '19 at 00:16

1

Check this View.OnScrollChangeListener

You can get X and Y scroll position from here

scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
        @Override
        public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            //work with parameters
        }
    });

Note : Available from API 23 only.

answered Feb 01 '19 at 00:16

Sunil Sunny

3,949
4
23
53

i'm using API 22 – aman Feb 01 '19 at 00:48

score 0 · Answer 3 · answered Feb 01 '19 at 00:47

I think I have perfectly made it, if someone can see any problems please let me know.

package com.example.test;

import android.support.v7.app.AppCompatActivity;
import android.os.*;
import android.view.*;
import android.widget.*;

public class MainActivity extends AppCompatActivity {
    LinearLayout content;
    RelativeLayout current_box;

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

        content = findViewById(R.id.content);
        for (int x=0;x<25;x++) {
            RelativeLayout element = new RelativeLayout(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 600);
            params.setMargins(0, 0, 0, 50);
            element.setLayoutParams(params);
            element.setBackgroundResource(R.color.skyblue);
            content.addView(element);
        }

        current_box = (RelativeLayout) content.getChildAt(0);
        current_box.setBackgroundResource(R.color.green);

        final Handler scroll_timeout = new Handler();
        ((ScrollView) content.getParent()).getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                scroll_timeout.removeCallbacksAndMessages(null);
                final Runnable run_able = new Runnable() {
                    @Override
                    public void run() {
                        ScrollView scroll_view = (ScrollView) content.getParent();
                        int middle_line = 75 + scroll_view.getScrollY() + (scroll_view.getHeight()/2);
                        for (int y=0;y<content.getChildCount();y++) {
                            RelativeLayout box = (RelativeLayout) content.getChildAt(y);
                            int offsettop = 75 + (box.getHeight()*y) + ((y>1?50:0)*y);
                            if (offsettop < middle_line && (offsettop + box.getHeight()) > middle_line) {
                                current_box.setBackgroundResource(R.color.skyblue);
                                current_box = box;
                                current_box.setBackgroundResource(R.color.green);
                            }
                        }
                    }
                };
                scroll_timeout.postDelayed(run_able, 100);
            }
        });
    }
}

Change box's background color when box appears in the middle of the screen

3 Answers3