how to put circular progress bar in action bar?

Question

i have a play button in my action bar and i want that when i click on play button then the waiting time that it will take to connect to my live stream it will show the circular progress bar and when it connects with stream them pause and play button will appear.like following image

here is my code that i use

action_bar_progress.xml
    <?xml version="1.0" encoding="utf-8"?>
   <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    style="@android:style/Widget.ActionButton">
<ProgressBar
    android:id="@+id/actionProgressBar"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:visibility="visible"
    android:layout_gravity="center" />
</FrameLayout>

Menu.xml class

enter code here
         <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
    android:title="play"
    android:icon="@drawable/ic_play_arrow_black_24dp"
    android:id="@+id/actionPlay"
    app:showAsAction="always"/>
<item
    android:title="pause"
    android:icon="@drawable/ic_pause_black_24dp"
    android:id="@+id/actionPause"
    app:showAsAction="always"
    android:visible="false"/>
<item
    android:title="stop"
    android:icon="@drawable/ic_stop_black_24dp"
    android:id="@+id/actionStop"
    app:showAsAction="always"
    android:visible="false"/>
<item
    android:id="@+id/action_working"
    android:actionLayout="@layout/action_bar_progress"
    app:showAsAction="always"
    android:title="@string/loadingActionBar"
    />

MainActivity.java

     @Override
public boolean onPrepareOptionsMenu(Menu menu) {
    mnuPlay = menu.findItem(R.id.actionPlay);
    mnuStop=menu.findItem(R.id.actionStop);
    mnuPause=menu.findItem(R.id.actionPause);
    mnuProgressBar = menu.findItem(R.id.action_working);


    if(bConnected){
        if(mediaPlayer.isPlaying()){
            mnuPlay.setVisible(false);
            mnuPause.setVisible(true);
            mnuStop.setVisible(true);
            mnuProgressBar.setVisible(false);
        }else {
            if (bShouldPlay) {
                mnuPlay.setVisible(false);
                mnuPause.setVisible(false);
                mnuStop.setVisible(false);
                mnuProgressBar.setVisible(true);
            }else{
                mnuPlay.setVisible(true);
                mnuPause.setVisible(false);
                mnuStop.setVisible(false);
                mnuProgressBar.setVisible(false);
            }
        }
    }else{
        mnuPlay.setVisible(true);
        mnuPause.setVisible(false);
        mnuStop.setVisible(false);
        mnuProgressBar.setVisible(false);
    }

    return super.onPrepareOptionsMenu(menu);
}
//Menu  Item  function start
@Override
public boolean onOptionsItemSelected(MenuItem item) {


    switch (item.getItemId())
    {
        case R.id.actionPlay:
            if (bConnected)
            {
                mediaPlayer.start();
                mnuPlay.setVisible(false);
                mnuProgressBar.setVisible(false);
                mnuPause.setVisible(true);
                mnuStop.setVisible(true);
                Toast.makeText(getBaseContext(), "Playing...", Toast.LENGTH_LONG).show();

            }
            else
            {
                mnuPlay.setVisible(false);
                mnuPause.setVisible(false);
                mnuStop.setVisible(false);
                bShouldPlay = true;
                getMedia();
                mnuProgressBar.setVisible(true);
                //Toast.makeText(getBaseContext(), "Still connecting...", Toast.LENGTH_LONG).show();
            }

            break;

        case R.id.actionPause:
            //bPaused=true;
            if (mediaPlayer.isPlaying())
            {
                mediaPlayer.pause();
                bPaused=true;
                mnuPause.setVisible(false);
                mnuPlay.setVisible(true);
                mnuStop.setVisible(true);
                mnuProgressBar.setVisible(false);
                Toast.makeText(MainActivity.this, "Paused!", Toast.LENGTH_SHORT).show();
            }
            break;

        case R.id.actionStop:
            if (mediaPlayer.isPlaying() || bPaused)
            {
                Toast.makeText(this, "Stopping...", Toast.LENGTH_LONG).show();

                mediaPlayer.stop();
                mediaPlayer.release();
                bConnected = false;
                bPaused=false;
                bShouldPlay = false;
                mnuPlay.setVisible(true);
                mnuPause.setVisible(false);
                mnuStop.setVisible(false);
                mnuProgressBar.setVisible(false);

                Toast.makeText(this, "Stopped!", Toast.LENGTH_LONG).show();

            }
            break;
        default:
            break;
    }
    return super.onOptionsItemSelected(item);
}

when i click on play button then it show the text what i have written in title ..i need the circular progress bar instead of that text and one more thing how to set the error messages.for example if stream is not available means goes offline then how after few minute of connecting it will show message to user the stream is not available..

Just remove **title** property if you only want to show progress bar — sodhankit, Mar 09 '17 at 08:00
Please check the link http://stackoverflow.com/questions/21333866/how-to-create-a-circular-progressbar-in-android-which-rotates-on-it — Pranita, Mar 09 '17 at 08:24

score 1 · Answer 1 · answered Nov 13 '19 at 23:44

1

Change

android:actionLayout="@layout/action_bar_progress"

to

app:actionLayout="@layout/action_bar_progress"

answered Nov 13 '19 at 23:44

Armel Gildas Fagbedji

140
9

score 0 · Accepted Answer · answered Mar 09 '17 at 11:01

You can do it using a progress bar inside Toolbar. Toolbar is just a ViewGroup:

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#2196F3"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".70"
            android:gravity="center"
            android:orientation="horizontal"
            android:text="left">

            <TextView
                android:id="@+id/toolbar_title"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Tital"
                android:textColor="@color/white"
                android:textSize="20dp"
                android:textStyle="bold" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight=".30"
            android:text="right">

            <ProgressBar
                android:id="@+id/actionProgressBar"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_gravity="center"
                android:visibility="visible" />
        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.Toolbar>

thnx @saquib but i don't want to hide my action bar..is their any way to put circular bar in action bar — Parv, Mar 09 '17 at 13:15

how to put circular progress bar in action bar?

2 Answers2