How to implement Scroll View with views getting aligned at the top?

Question

I came across this UI and am trying to use it.

In the image what I guess is, the root layout is a Scroll view.
The top view inside the ScrollView is Relative layout and below it is ListView which gets loaded depending on the dates selected. (not sure)
When the view is scrolled up the button present on the top View aligns itself to the top of the parent layout.
And then the rest is scrolled like a listview.
When scrolled down again the top view is visible.

NB: I have tried to apply what I feel like has been used for such effect. But I am not able to align the button of the top view to the parent layout. If needed I can post the code.

Please help me to find what exactly is the logic behind this effect. Thanks.

SimplyProgrammer · Accepted Answer

I solved the problem myself.

For getting the same look and feel as mentioned in the image.

I did the following:

1) Defined 3 layouts used in ListView.

list_top_one -> for top view having from date and to date text view

b) list_item_in_middle -> for having button like feel

c) list_items -> for holding the dynamically loaded value.

2) Main activity layout.

a) Contains a listview

b) And includes a layout that is to be shown as button.

Reference: Making a middle element to get stuck in the header (ScrollView/ListView)

3) ListAdapter class

    public class ListAdapter extends BaseAdapter {
        public Context mContext;
        TextView btCurrent;
        ArrayList newarrays = new ArrayList<>();

        ListAdapter(Context context,Integer[] arrval) {
            mContext = context;
            newarrays.addAll(Arrays.asList(arrval));
        }

        public void InitializeValues(Integer[] arrval){
            newarrays.addAll(Arrays.asList(arrval));
        }

        @Override
        public int getCount() {
            return newarrays.size();
        }

        @Override
        public Object getItem(int arg0) {
            return newarrays.get(arg0);
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            if(position == 0){
                convertView = inflater.inflate(R.layout.list_item_in_middle, null);//Adding btn layout
            }else {
                convertView = inflater.inflate(R.layout.list_items, null);// Adding other elements
                btCurrent = (TextView) convertView.findViewById(R.id.button1);

                if ((Integer) getItem(position) == 3) {
                    btCurrent.setText("Number " + getItem(position) + " is sticky");
                } else {
                    btCurrent.setText("" + getItem(position));
                }
            }
            return convertView;
        }
    }

4) MainActivity

a) OnScrollListener for attaching the btn like list item on top.

    llHeader = (LinearLayout) findViewById(R.id.llHeader);//from the list_item_in_middle layout
    listView.setOnScrollListener(new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {

        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            if (firstVisibleItem > 0) {        // 1st row will stick
                llHeader.setVisibility(View.VISIBLE);
            } else {
                llHeader.setVisibility(View.GONE);
            }
        }
    });

b) OnItemClickListener of listview

    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            int a = 0;
            if(position == 0){//for clicking from date and to date.
                TextView frm = (TextView) view.findViewById(R.id.frmdate);
                frm.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"From date clicked",Toast.LENGTH_SHORT).show();
                    }
                });
                TextView to = (TextView) view.findViewById(R.id.todate);
                to.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"to date clicked",Toast.LENGTH_SHORT).show();
                    }
                });
            }else {
                if(position == 1) {//for clicking the btn like list element.

                    swap();
                    Toast.makeText(MainActivity.this,"Header clicked",Toast.LENGTH_SHORT).show();
                }else {
                    Toast.makeText(MainActivity.this, parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
                }
            }
        }
    });

c) Linearlayout click function for element that gets stuck to the top

    llHeader.setOnClickListener(new View.OnClickListener() { //for clicking the elements that gets stuck to the top
        @Override
        public void onClick(View v) {
            swap();
            Toast.makeText(MainActivity.this,"Header clicked",Toast.LENGTH_SHORT).show();
        }
    });

d) swap function called from linearlayout and the list element at position 1

    public void swap(){
        ltAdapter.notifyDataSetChanged();
        new1 = new Integer[]{20, 21, 22, 23, 24, 25, 26, 27, 28};
        ltAdapter.InitializeValues(new1);
    }

NB:If any focusable view is taken in the listview, the OnItemclickListener doesnot work, read in stackoverflow itself

Finally the output:

before the second element click

after clicking

after scrolling

How to implement Scroll View with views getting aligned at the top?

Answers (2)

Related Questions