How to create a marquee effect for a text of smaller length not exceeding the screen size in Android?

Question

I have been trying to give the marquee effect for the word HELLO in my application but android does not allow the same unless the length of the text exceeds the screen size. Is there a solution around it?

PS: As simple as this seems I haven't got my hands on ANY solution yet.

score 11 · Accepted Answer · answered May 04 '13 at 06:31

I used simple light weight of ticker like animation which I developed in my early Android days.

below is complete code.

Hope this helps.

Works for all API levels of Android

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setticker("Hello", this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    public  void setticker(String text, Context contx) {
        if (text != "") {
            LinearLayout parent_layout = (LinearLayout) ((Activity) contx)
                    .findViewById(R.id.ticker_area);

            TextView view = new TextView(contx);
            view.setText(text);

            view.setTextColor(Color.BLACK);
            view.setTextSize(25.0F);
            Context context = view.getContext(); // gets the context of the view

            // measures the unconstrained size of the view
            // before it is drawn in the layout
            view.measure(View.MeasureSpec.UNSPECIFIED,
                    View.MeasureSpec.UNSPECIFIED);

            // takes the unconstrained width of the view
            float width = view.getMeasuredWidth();
            float height = view.getMeasuredHeight();

            // gets the screen width
            float screenWidth = ((Activity) context).getWindowManager()
                    .getDefaultDisplay().getWidth();

            view.setLayoutParams(new LinearLayout.LayoutParams((int) width,
                    (int) height, 1f));

            System.out.println("width and screenwidth are" + width + "/"
                    + screenWidth + "///" + view.getMeasuredWidth());

            // performs the calculation
            float toXDelta = width - (screenWidth - 0);

            // sets toXDelta to -300 if the text width is smaller that the
            // screen size
            if (toXDelta < 0) {
                toXDelta = 0 - screenWidth;// -300;
            } else {
                toXDelta = 0 - screenWidth - toXDelta;// -300 - toXDelta;
            }
            // Animation parameters
            Animation mAnimation = new TranslateAnimation(screenWidth,
                    toXDelta, 0, 0);
            mAnimation.setDuration(15000);
            mAnimation.setRepeatMode(Animation.RESTART);
            mAnimation.setRepeatCount(Animation.INFINITE);
            view.setAnimation(mAnimation);
            parent_layout.addView(view);
        }
    }


}

in activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/ticker_area"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#9CB1DD"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

score 4 · Answer 2 · edited Apr 06 '17 at 08:04

4

There is a simple solution

You have to create a WebView and display marquee like this code below.

webView = (WebView)findViewById(R.id.web);

String summary = "<html><FONT color='#fdb728' FACE='courier'><marquee behavior='scroll' direction='left' scrollamount=10>"
                + "Hello Droid" + "</marquee></FONT></html>";

webView.loadData(summary, "text/html", "utf-8");

edited Apr 06 '17 at 08:04

Ghasem

14,455
21
138
171

answered May 04 '13 at 06:31

Newts

1,354
14
23

score 1 · Answer 3 · answered May 04 '13 at 06:15

1

Try using a Tickerview from Git Hub.

answered May 04 '13 at 06:15

MarsAtomic

10,436
5
35
56

score 0 · Answer 4 · answered Jun 25 '15 at 12:13

Here is the Full Code for Your Problem:

Main_Activity.java Code:'

 WebView webView;

webView = (WebView)findViewById(R.id.web);


String summary = "<html><FONT color='#fdb728' FACE='courier'><marquee behavior='scroll' direction='left' scrollamount=10>"
        + "Hello Droid" + "</marquee></FONT></html>"; 

webView.loadData(summary, "text/html", "utf-8"); // Set focus to the textview'

main_activity.xml code:

<WebView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/web"
        ></WebView>

score 0 · Answer 5 · answered Nov 06 '17 at 07:01

To apply tickr/marquee animation on text view(even for short text length), it creates an translatory animation from extreme right(+1f) to extreme left(-1f) and then restarts the animation.

public void setTickerAnimation(View view) {
    Animation animation = new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, +1f,
            Animation.RELATIVE_TO_SELF, -1f,
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, 0f);
    animation.setRepeatCount(Animation.INFINITE);
    animation.setRepeatMode(Animation.RESTART);
    animation.setInterpolator(new LinearInterpolator());
    animation.setDuration(4000);
    view.startAnimation(animation);
}

score 0 · Answer 6 · answered Apr 09 '21 at 15:47

The short way i found is to call this method and pass TextView to it.

    fun addMarquee(textView: TextView) {
    textView.viewTreeObserver.addOnGlobalLayoutListener(object :
        ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            val pixels = textView.measuredWidth - 1
            val params = textView.layoutParams
            params.width = pixels
            textView.layoutParams = params
            textView.isSelected = true
            textView.ellipsize = TextUtils.TruncateAt.MARQUEE
            textView.isSingleLine = true
            textView.marqueeRepeatLimit = -1
            textView.viewTreeObserver.removeOnGlobalLayoutListener(this)
        }
    })
}

NOTE: this method only work when textView width is wrap_content.

How to create a marquee effect for a text of smaller length not exceeding the screen size in Android?

6 Answers6

Linked