Showing posts with label android.support.v7.widget.Toolbar. Show all posts
Showing posts with label android.support.v7.widget.Toolbar. Show all posts

Tuesday, June 20, 2017

Add ProgressBar in ToolBar

This example show how to add android.support.v7.widget.Toolbar to layout and add ProgressBar to the ToolBar.


New a project of empty activity in Android Studio.

Edit res/values/styles.xml to change style to "Theme.AppCompat.Light.NoActionBar".
<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>


Refer to the above video, add a ToolBar to the layout, and add a ProgressBar to the ToolBar, using Android Studio's graphical design tool.

res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.blogspot.android_er.toolbarprogressbar.MainActivity">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar"
app:layout_constraintVertical_bias="0.501" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:visibility="gone"/>

</android.support.constraint.ConstraintLayout>


MainActivity.java
package com.blogspot.android_er.toolbarprogressbar;

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

TextView tvTitle;
ProgressBar myProgressBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

tvTitle = (TextView)findViewById(R.id.title);
myProgressBar = (ProgressBar)findViewById(R.id.progressBar);

tvTitle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getBaseContext(),
"ProgressBar start running",
Toast.LENGTH_LONG).show();
tvTitle.setClickable(false);
MyAsyncTask myAsyncTask = new MyAsyncTask();
myAsyncTask.execute();
}
});
}

public class MyAsyncTask extends AsyncTask<Void, Integer, Void> {

@Override
protected void onPreExecute() {
myProgressBar.setVisibility(View.VISIBLE);
myProgressBar.setProgress(0);
}

@Override
protected Void doInBackground(Void... voids) {
for(int i=0; i<100; i++){
publishProgress(i);
SystemClock.sleep(100);
}
return null;
}

@Override
protected void onProgressUpdate(Integer... values) {
myProgressBar.setProgress(values[0]);
}

@Override
protected void onPostExecute(Void aVoid) {
myProgressBar.setVisibility(View.GONE);
tvTitle.setClickable(true);
}
}
}


Result:

To replace the indeterminate ProgressBar to Horizontal Progress Bar, edit res/layout/activity_main.xml. (maybe you want to set android:visibility="gone" as in progressBarStyle, depends on your case)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.blogspot.android_er.toolbarprogressbar.MainActivity">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar"
app:layout_constraintVertical_bias="0.501" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintBottom_toBottomOf="@+id/toolbar"
app:layout_constraintLeft_toLeftOf="@+id/toolbar"
app:layout_constraintRight_toRightOf="@+id/toolbar" />

</android.support.constraint.ConstraintLayout>



More examples of:
- android.support.v7.widget.Toolbar
- ProgressBar