Post
Ask Question

Creating A RecyclerView Like Marquee Text In Android

Why this blog?

Sometimes in our Android, apps need a marquee text effect,  like a smooth autoscroll horizontally or vertically.

Example

For breaking news apps, there is a necessary functionality, which shows the breaking news, such as on a horizontal scroll.

In share market apps, the top app should give an auto scroll effect to show the text.



In Android, there is no perfect library for marquee text but in this blog, I will give the simplest solution for marquee text.

Procedure

  1. Add RecyclerView

    Add RecyclerView, as per your desire and also add dependency.

    XML
    1. <android.support.v7.widget.RecyclerView  
    2.     android:id="@+id/rec_all_stocks"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:scrollbars="vertical"  
    6.     android:layout_alignParentLeft="true"  
    7.     android:layout_alignParentStart="true"></android.support.v7.widget.RecyclerView>  
    Gradle

    compile 'com.android.support:recyclerview-v7:24.2.0'

  2. Create adapter for RecyclerView

    Create adapter for RecyclerView. If you don't know how to create an adapter, please follow the link.

  3. Make horizontal scroll

    For RecyclerView, we have to use LayoutManager. There is a method, which is stated below.
    1. LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this);  
    2. linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);  
    Use this in RecyclerView, stated below.
    1. yourRecyclerView.setLayoutManager(linearLayoutManager );  
    Your RecyclerView will be scrolled horizontally.

  4. Creating auto scroll for RecyclerView

    I want to make a list, which will auto scroll like a news feed. Hence, I use a thread auto scroll. There is a method in RecyclerView, which is smoothScrollToPosition(), as it takes the position for the scroll's present position to the desired position. The counter is incremented when all the items are incremented and counter is started from the beginning.

    Here, I use a thread, which will perform autoscroll for the items of RecyclerView. There is a method in RecyclerView, which is smoothScrollToPosition(), which takes the position of recyclerview to scroll the position to current position. Hence, I use a thread to increment the position automatically, so an autoscroll is happening because the position is incremented automatically. When all the incremented positions are equal to the total item size, start from the beginning. In this way, an autoscroll effect has happened.

    Here, the code is mentioned below.
    1. public void autoScroll(){  
    2.     final int speedScroll = 0;  
    3.     final Handler handler = new Handler();  
    4.      final Runnable runnable = new Runnable() {  
    5.            int count = 0;  
    6.            @Override  
    7.            public void run() {  
    8.            if(count == scrollStockAdapter.getItemCount())  
    9.            count =0;  
    10.            if(count < scrollStockAdapter.getItemCount()){  
    11.                rec_scroll_stock.smoothScrollToPosition(++count);  
    12.                handler.postDelayed(this,speedScroll);  
    13.            }  
    14.        }  
    15.     };  
    16.     handler.postDelayed(runnable,speedScroll);  
    17. }  
  5. Create Smooth scroll automatically

    Now, the main problem is auto scroll speed, which is too fast. For RecyclerView, we have to declare a LayoutManager. In LayoutManager, there is a method, which is smoothScrollToPosition(), which is responsible for smooth scrolling. For scrolling, there is a velocity, where the default speed is 25f. To change this velocity, you have to override this method. If you want a smooth scroll, increase this value as you want. In my case, I use 4000f.
    1. LinearLayoutManager layoutManager = new LinearLayoutManager(MainActivity.this) {  
    2.     @Override  
    3.     public void smoothScrollToPosition(RecyclerView recyclerView,        RecyclerView.State state, int position) {  
    4.     LinearSmoothScroller smoothScroller = new                LinearSmoothScroller(MainActivity.this) {  
    5.       private static final float SPEED = 4000f;// Change this                value (default=25f)  
    6.       @Override  
    7.       protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {  
    8.                     return SPEED / displayMetrics.densityDpi;  
    9.           }  
    10.       };  
    11.       smoothScroller.setTargetPosition(position);  
    12.       startSmoothScroll(smoothScroller);  
    13.       }  
    14.   
    15. };   
    Set this LayoutManager to your RecyclerView, as shown below.

    yourRecyclerView.setLayoutManager(layoutManager);

Conclusion

In this way, you can get a look and feel like a marquee text or like a news feed.

Sample project https://github.com/aliahmedbd/Marquee-Text-Android