Mvvmcross Native Android Progressbar Move Element With The Current Progress

I have a progressbar as shown in the following image. My problem is that I want to move the TextView that shows the current step of the progress, along with the progress. So in th

Solution 1:

I suggest take help of constraint layout which give you the best mechanism to implement First, create one constraint layout and put your progress bar inside it also put text view in which you want to set text amount process and move bias as per your process percent like bellow

Layout

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:id="@+id/mConstraintLayout"
            android:layout_height="wrap_content">

            <ProgressBar
                android:layout_width="match_parent"
                android:id="@+id/mProgressBar"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:id="@+id/mTVValue"
                android:text="7/10"
                app:layout_constraintStart_toStartOf="@+id/mProgressBar"
                app:layout_constraintEnd_toEndOf="@+id/mProgressBar"
                android:layout_height="wrap_content" />
        </androidx.constraintlayout.widget.ConstraintLayout>

Then After doing the bellow code in your class

/**
     * Method move progress label as per progress change
     * @param constraintLayout constraint layout object 
     * @param textViewId text view id which you want to move also text id same which you used in design
     * @param percentProgress Progress in percentages means total moved progress percent which from 100
     */privatevoid moveProgressPercent(ConstraintLayout constraintLayout,int textViewId,float percentProgress){
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);
        constraintSet.setHorizontalBias(textViewId, percentProgress / 100);
        constraintSet.applyTo(constraintLayout);
    }

As per the above view it like

ConstraintLayout constraintLayout=findViewById(R.id.mConstraintLayout);
moveProgressPercent(constraintLayout,R.id.mTVValue,25);

Solution 2:

This is my solution. I created a class and extended it with RelativeLayout, inflated the layout (which you can see in the above question).

Added a Listener to listen to layout changes _progressBar.ViewTreeObserver.GlobalLayout += ViewTreeObserver_GlobalLayout;

privatevoidViewTreeObserver_GlobalLayout(object sender, EventArgs e)
        {
            _progressBar.ViewTreeObserver.GlobalLayout -= ViewTreeObserver_GlobalLayout;

            SetProgressTextPosition();
        }

and then I just calculate the current progress and SetX accordinly.

//_progressBar = FindViewById<Android.Widget.ProgressBar>(Resource.Id.progressBar);//_currentProgressStep = FindViewById<TextView>(Resource.Id.currentProgressStep);privatevoidSetProgressTextPosition()
        {
            if (!TotalStepCount.HasValue || !CurrentStep.HasValue)
            {
                return;
            }

            if (CurrentStep.Value > TotalStepCount.Value)
            {
                thrownew ArgumentOutOfRangeException($"Please ensure that the current step does not exceed the total step amount.");
            }

            _currentProgressStep.Text = $"{CurrentStep.Value} / {TotalStepCount.Value}";

            float startPosition = _progressBar.GetX();
            float totalWidth = startPosition + _progressBar.Width;
            float stepSize = totalWidth / TotalStepCount.Value;
            float currentPosition = stepSize * CurrentStep.Value;

            _currentProgressStep.SetX(currentPosition - _currentProgressStep.Width);
        }