Search code examples
androidxmlandroid-layouthorizontalscrollviewandroid-scrollview

How to make certain widgets in scroll view unscrollable or sticky at the top of screen like a header


I am creating an android application in which the user can view the channel list and programme list on the same screen. For ex :-

The image of the channel will be on left and the programmes scheduled will be on the right and the user can horizontally scroll the programme listing and since there will be many channels the user can also scroll the complete layout vertically. All this has been implemented but what i can not get done is the header should be sticky at the top.

The header has 2 parts :- 1. Simple Image View on left side above the channels list of images and should remain sticky at top and not be scrollable 2. Timings list header like 00:00 , 01:00 , 02:00 on the right of the above image view and on the above of the programme list and should not be scrollable vertically but should be scrollable horizontally.

The following is the code that i am using to display the layout all i can not get it done are the above two points. They just dont remain sticky they also scroll up and down with the rest of layout

        <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content">

                        <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
                                        android:layout_alignParentLeft="true" android:id="@+id/image_layout">
                                        <ImageView android:layout_gravity="center_vertical|center_horizontal" android:layout_width="wrap_content"
                                                   android:layout_height="wrap_content"  android:src="@drawable/tv_guide_channels" 
                                                   android:scaleType="fitCenter" android:id="@+id/channel_img_header"
                                                  android:layout_alignParentTop="true"/>
                                        <LinearLayout android:id="@+id/layout_to_add_channel_image" android:layout_width="wrap_content"
                                                      android:layout_height="wrap_content" android:orientation="vertical"
                                                      android:background="@color/White" android:layout_below="@id/channel_img_header" 
                                                      android:layout_alignParentBottom="true"/>
                       </RelativeLayout>

                       <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
                                       android:layout_alignParentRight="true" android:layout_toRightOf="@id/image_layout"
                                       android:id="@+id/programme_layout">
                                        <HorizontalScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
                                                        <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
                                                                    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
                                                                                    android:orientation="horizontal" android:id="@+id/table_header"
                                                                                    android:layout_alignParentTop="true">
                                                                    </LinearLayout>
                                                                    <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"
                                                                                android:layout_below="@id/table_header">
                                                                    <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
                                                                                    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
                                                                                                    android:gravity="center_vertical" android:background="@color/greyblue"
                                                                                                    android:orientation="vertical" android:id="@+id/table_programme"
                                                                                                    android:layout_alignParentBottom="true">
                                                                                     </LinearLayout>    

                                                                        </RelativeLayout>
                                                                        </ScrollView>
                                                            </RelativeLayout>
                                         </HorizontalScrollView>
                       </RelativeLayout>

        </RelativeLayout>

<LinearLayout android:layout_height="2dip" android:layout_width="fill_parent" android:background="@color/Black"></LinearLayout>


Solution

  • Well thanks for the link but i found the solution :-

    One can always use custom widgets and its not that scary also :) In my case i used to custom scroll views and in xml mentioned their packagename+className

    For ex :

    <org.vision_asia.utils.MyScrollView1
    android:id="@+id/sv1"
    android:layout_below="@id/channel_img_header"
    android:layout_height="fill_parent"
    android:layout_width="wrap_content"
    android:scrollbars="none">
    
    <LinearLayout
        android:background="@color/White"
        android:id="@+id/layout_to_add_channel_image"
        android:layout_alignParentBottom="true"
        android:layout_below="@id/channel_img_header"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="vertical" />
    

    and you want to synchronize this ScrollView with other scroll view such that if user scrolls this scroll view then simultaneously the other scroll view must get scrolled as if all the elements are under one scroll view only

    public class MyScrollView1 extends ScrollView {
    
        public MyScrollView2 sv2;
    
        public MyScrollView1(Context context) {
            super(context);
            // TODO Auto-generated constructor stub
        }
    
        public MyScrollView1(Context context, AttributeSet attrs) {
            super(context, attrs);
            // TODO Auto-generated constructor stub
        }
    
        @Override
        protected void onScrollChanged(int l, int t, int oldl, int oldt) {
            // TODO Auto-generated method stub
            sv2.scrollTo(oldt, t);
            super.onScrollChanged(l, t, oldl, oldt);
        }
    }
    

    and in your main activity you must call the custom scroll view like this :-

    sv1 = (MyScrollView1)channelsList.findViewById(R.id.sv1);
    sv1.sv2 = sv2;
    

    where sv2 is the scrollview which should be synchronized

    For complete synchronization you will need 2 custom scroll views

    Enjoy