Marquee Text Android: Using RecyclerView like Ticker
Why this article?
Sometimes in our Android, apps need a marquee text effect, like a smooth auto scroll 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
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'
Create adapter for RecyclerView
yourRecyclerView.setLayoutManager(linearLayoutManager );
Your RecyclerView will be scrolled horizontally.
Creating auto scroll for RecyclerView
1. 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, 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. }
Create Smooth scroll automatically
1. 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. };
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
Sometimes in our Android, apps need a marquee text effect, like a smooth auto scroll 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
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'
Create adapter for RecyclerView
- Create adapter for RecyclerView. If you don't know how to create an adapter, please follow the link.
- For RecyclerView, we have to use LayoutManager. There is a method, which is stated below.
- LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity. this);
- linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
yourRecyclerView.setLayoutManager(linearLayoutManager );
Your RecyclerView will be scrolled horizontally.
Creating auto scroll for RecyclerView
1. 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.
2.
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.
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. }
Create Smooth scroll automatically
1. 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. };
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
Comments
Post a Comment