Marquee is not working when seek bar gets updated

Question

I'm making a music player and have implemented a marquee for the song and artist name. But as soon as the seek bar gets updated, the text view comes back to the original position. So in this way, a kind of back and forth motion of text is seen.

Here is my XML code:

  <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/mainFullPlayerContainer"
      android:layout_width="match_parent"
      android:layout_height="match_parent"

   tools:context="com.musicplayer.integrated.sanket.music.MainFullPlayer"
    android:background="@color/defaultBackground">


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/relativeLayout"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true">

    <ImageView
        android:id="@+id/imageView_full_player_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="20dp"
        android:layout_marginRight="15dp"
        app:srcCompat="@drawable/icon_more" />
</RelativeLayout>

<ImageView
    android:id="@+id/imageView_full_player_album_art"
    android:layout_width="300dp"
    android:layout_height="300dp"
    app:srcCompat="@drawable/default_album_art"
    android:layout_marginTop="29dp"
    android:layout_below="@+id/relativeLayout"
    android:layout_centerHorizontal="true" />



<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:progressTint="@color/defaultTextColor"
    android:thumbTint="@color/defaultTextColor"
    android:layout_above="@+id/imageView_full_player_play"

    android:layout_marginBottom="37dp" />

<ImageView
    android:id="@+id/imageView_full_player_play"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="31dp"
    app:srcCompat="@drawable/icon_play_small" />

<ImageView
    android:id="@+id/imageView_full_player_next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView_full_player_play"
    android:layout_marginStart="39dp"
    android:layout_toEndOf="@+id/imageView_full_player_play"
    app:srcCompat="@drawable/icon_fast_next_small" />

<ImageView
    android:id="@+id/imageView_full_player_prev"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView_full_player_play"
    android:layout_marginEnd="38dp"
    android:layout_toStartOf="@+id/imageView_full_player_play"
    app:srcCompat="@drawable/icon_rewind_prev_small" />

<TextView
    android:id="@+id/textView_full_player_song"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/imageView_full_player_album_art"
    android:layout_alignStart="@+id/imageView_full_player_album_art"
    android:layout_below="@+id/imageView_full_player_album_art"
    android:layout_marginTop="12dp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:text="Song Name"
    android:textAlignment="center"
    android:textColor="@color/defaultTextColor"
    android:textSize="18sp" />

<TextView
    android:id="@+id/textView_current_time"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="0:00"
    android:textColor="@color/defaultTextColor"
    android:textSize="12sp"

    android:layout_marginBottom="18dp"
    android:layout_above="@+id/imageView_full_player_prev"
    android:layout_alignStart="@+id/textView_full_player_artist" />

<TextView
    android:id="@+id/textView_total_length"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="5:00"
    android:textSize="12sp"
    android:textColor="@color/defaultTextColor"
    android:layout_alignBaseline="@+id/textView_current_time"
    android:layout_alignBottom="@+id/textView_current_time"
    android:layout_alignEnd="@+id/textView_full_player_artist" />

<TextView
    android:id="@+id/textView_full_player_artist"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/textView_full_player_song"
    android:layout_alignStart="@+id/textView_full_player_song"
    android:layout_below="@+id/textView_full_player_song"
    android:layout_marginTop="12dp"
    android:text="Artist"
    android:textAlignment="center"
    android:textColor="@color/defaultTextColor"
    android:textSize="15sp"
    android:ellipsize="marquee"
    android:singleLine="true"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:scrollHorizontally="true"
    />

  </RelativeLayout>

Here is my Java code:

public class MainFullPlayer extends AppCompatActivity {

 private static RelativeLayout  fullPlayer;
 private static ImageView fullPlayer_play , fullPlayer_next , 
 fullPlayer_prev,fullPlayer_album;
 private static TextView fullPlayer_song , fullPlayer_artist , 
 fullPlayer_currentTime , fullPlayer_maxTime;
 private    static SeekBar seekBar;
 private Songs song;
 private static Handler progressHandler;
 private static Runnable   progressRunnable;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_full_player);
    fullPlayer = (RelativeLayout)findViewById(R.id.mainFullPlayerContainer);
    fullPlayer_play = (ImageView)findViewById(R.id.imageView_full_player_play);
    fullPlayer_next = (ImageView)findViewById(R.id.imageView_full_player_next);
    fullPlayer_prev = (ImageView)findViewById(R.id.imageView_full_player_prev);
    fullPlayer_album = (ImageView)findViewById(R.id.imageView_full_player_album_art);
    fullPlayer_song = (TextView)findViewById(R.id.textView_full_player_song);
    fullPlayer_artist = (TextView)findViewById(R.id.textView_full_player_artist);
    fullPlayer_currentTime = (TextView)findViewById(R.id.textView_current_time);
    fullPlayer_maxTime = (TextView)findViewById(R.id.textView_total_length);

    fullPlayer_maxTime.setText(MusicPlayback.getTime(MusicPlayback.mediaPlayer.getDuration()));

    seekBar = (SeekBar)findViewById(R.id.seekBar);

    song = MusicPlayback.allTracks.get(MusicPlayback.songPosition);
    fullPlayer_song.setSelected(true);
    fullPlayer_artist.setSelected(true);
    fullPlayer_song.setText(song.getSongName());
    fullPlayer_artist.setText(song.getArtist());


    if(MusicPlayback.getPlayingStatus()){
        fullPlayer_play.setImageResource(R.drawable.icon_pause_small);
    }
    else
    {
        fullPlayer_play.setImageResource(R.drawable.icon_play_small);
    }
    if(song.getAlbumArt()!= null){

        fullPlayer_album.setImageURI(Uri.parse(song.getAlbumArt()));
        fullPlayer.setBackground(FragmentAllTracks.d);
    }
    else{
        fullPlayer_album.setImageResource(R.drawable.default_album_art);
        fullPlayer.setBackgroundColor(Color.argb(255, 48, 48, 48));

    }
seekBar.setMax(MusicPlayback.mediaPlayer.getDuration());


    progressHandler = new Handler();

    progressRunnable = new Runnable() {
        @Override
        public void run() {
            seekBar.setProgress(MusicPlayback.mediaPlayer.getCurrentPosition());
            fullPlayer_currentTime.setText(MusicPlayback.getTime(MusicPlayback.mediaPlayer.getCurrentPosition()));


            progressHandler.postDelayed(progressRunnable,100);
        }
    };
    progressHandler.postDelayed(progressRunnable,100);
}


@Override
public void onBackPressed() {
    super.onBackPressed();
  this.overridePendingTransition(R.anim.left_exit_translate,R.anim.right_exit_translate);

}
}

Here is the result:

Answer 1

Try to use this MarqueeTextView class, it automatically set fixed size for TextView so it won't re-measure (the reason cause restart scroll animation):

public class MarqueeTextView extends AppCompatTextView implements View.OnLayoutChangeListener {
    public MarqueeTextView(Context context) {
        this(context, null);
    }

    public MarqueeTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MarqueeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setSingleLine();
        setEllipsize(TextUtils.TruncateAt.MARQUEE);
        setMarqueeRepeatLimit(-1);
        setSelected(true);

        addOnLayoutChangeListener(this);
    }

    @Override
    public boolean isFocused() {
        return true;
    }

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        if (hasWindowFocus) super.onWindowFocusChanged(hasWindowFocus);
    }

    @Override
    protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
        if (focused) super.onFocusChanged(focused, direction, previouslyFocusedRect);
    }

    @Override
    public void onLayoutChange(View v, int left, int top, int right, int bottom,
                               int oldLeft, int oldTop, int oldRight, int oldBottom) {
        ViewGroup.LayoutParams layoutParams = getLayoutParams();
        layoutParams.height = bottom - top;
        layoutParams.width = right - left;
        removeOnLayoutChangeListener(this);
        setLayoutParams(layoutParams);
    }
}

Answer 2

I had the same problem. It happens because of this line inside the runnable:

fullPlayer_currentTime.setText(MusicPlayback.getTime(MusicPlayback.mediaPlayer.getCurrentPosition()));

I found the answer here: https://stackoverflow.com/a/13841982/10334697.

You have to set fixed size for your TextView.

Answer 3

I think its because of focus. Please set your textview like this

<TextView
    android:id="@+id/textView_full_player_song"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/imageView_full_player_album_art"
    android:layout_alignStart="@+id/imageView_full_player_album_art"
    android:layout_below="@+id/imageView_full_player_album_art"
    android:layout_marginTop="12dp"
    android:singleLine="true" 
    android:ellipsize="marquee"
    android:marqueeRepeatLimit ="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true" 
    android:scrollHorizontally="true"
    android:text="Song Name"
    android:textAlignment="center"
    android:textColor="@color/defaultTextColor"
    android:textSize="18sp" />

add this your TextView,

android:focusable="true"
android:focusableInTouchMode="true"