blocks|key|1669103|text|<ProgressBar
android:id="@%2Bid/loading_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/your_customized_color"
android:layout_gravity="center"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1669104|效果看起来像这样：|unstyled|1669105|​|1669106|📷|atomic|offset|length|1669107|1669108|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/a51089441afbe08cd66413c8691a2ee9.gif|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|F|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|F|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<pre><code>&lt;ProgressBar
android:id="@+id/loading_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/your_customized_color"
android:layout_gravity="center" /&gt;
</code></pre>

The effect looks like this:

<img src="https://4.bp.blogspot.com/-tqB3UP6KYaM/VItDu0F9kdI/AAAAAAAAATs/QB0X4AqWWY0/s1600/spinningwheel.gif" alt="img">

blocks|key|1669006|text|材料设计循环进度条的很好的实现(来自rahatarmanahmed/CircularProgressView)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1669007|<com.github.rahatarmanahmed.cpv.CircularProgressView
++++xmlns:app="http://schemas.android.com/apk/res-auto"
++++android:id="@%2Bid/progress_view"
++++android:layout_width="40dp"
++++android:layout_height="40dp"
++++app:cpv_indeterminate="true"/>|code-block|syntax|javascript|1669008|​|1669009|📷|atomic|1669010|1669011|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rahatarmanahmed/CircularProgressView|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/a77276c61a3860e60ce224ae62b22852.gif|imageAlt^0|I|10|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|N|3|J|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|X|S|Y|C|$Z|10|11|-4]]]]

Nice implementation for material design circular progress bar (from <a href="https://github.com/rahatarmanahmed/CircularProgressView" rel="noreferrer">rahatarmanahmed/CircularProgressView</a>),

<pre><code>&lt;com.github.rahatarmanahmed.cpv.CircularProgressView
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/progress_view"
 android:layout_width="40dp"
 android:layout_height="40dp"
 app:cpv_indeterminate="true"/&gt;
</code></pre>

<img src="https://i.stack.imgur.com/Qilh9.gif" alt="enter image description here">

blocks|key|1883202|text|我已经将三个Material+Design进度绘图程序移植到了Android4.0，它可以作为常规ProgressBar的插件替代，具有完全相同的外观。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1883203|这些绘图包还支持着色API(和RTL支持)，并使用?colorControlActivated作为默认着色。为了方便起见，还引入了扩展ProgressBar的MaterialProgressBar小部件。|1883204|DreaminginCodeZH/MaterialProgressBar|1883205|此项目也已被afollestad/material-dialogs用于进度对话。|1883206|在Android+4.4.4上：|1883207|​|1883208|📷|atomic|1883209|1883210|在Android+5.1.1上：|1883211|1883212|1883213|1883214|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/DreaminginCodeZH/MaterialProgressBar|1|https://github.com/afollestad/material-dialogs/releases/tag/0.8.1.0|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ad6a27dc29a747b776fbea74c03e6b1c.png|imageAlt|3|https://ask.qcloudimg.com/http-save/yehe-900000/37793fb16f65b11fe2f489f8eb334944.png^0|1D|B|0|P|M|1V|B|27|J|0|0|10|0|0|6|R|1|0|0|0|0|1|2|0|0|0|0|0|1|3|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|J|3|K|5|6|7|1U|8|@]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|L|3|M|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|S|3|O|5|6|7|24|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|25|8|@]|D|@]|E|$]]|$1|V|3|O|5|6|7|26|8|@]|D|@]|E|$]]|$1|W|3|Q|5|R|7|27|8|@]|D|@$9|28|A|29|1|2A]]|E|$]]|$1|X|3|O|5|6|7|2B|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|2C|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]|18|$5|19|12|1A|E|$1B|1C|1D|-4]]|1E|$5|19|12|1A|E|$1B|1F|1D|-4]]]]

I've backported the three Material Design progress drawables to Android 4.0, which can be used as a drop-in replacement for regular <code>ProgressBar</code>, with exactly the same appearance.

These drawables also backported the tinting APIs (and RTL support), and uses <code>?colorControlActivated</code> as the default tint. A <code>MaterialProgressBar</code> widget which extends <code>ProgressBar</code> has also been introduced for convenience.

<a href="https://github.com/DreaminginCodeZH/MaterialProgressBar" rel="noreferrer">DreaminginCodeZH/MaterialProgressBar</a>

This project has also been adopted by <a href="https://github.com/afollestad/material-dialogs/releases/tag/0.8.1.0" rel="noreferrer">afollestad/material-dialogs</a> for progress dialog.

On Android 4.4.4:

<a href="https://i.stack.imgur.com/6FbyN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6FbyN.png" alt="Android 4.4.4"></a>

On Android 5.1.1:

<a href="https://i.stack.imgur.com/i6Qjk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/i6Qjk.png" alt="Android 5.1.1"></a>

blocks|key|1882975|text|该平台使用矢量可绘制，因此您不能像在旧版本中那样重用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1882976|但是，支持库v4包含这个可绘制的后端口：http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java它有一个@hide注释(在这里是为了SwipeRefreshLayout)，但是没有什么能阻止您在代码库中复制这个类。|offset|length|style|CODE|1882977|entityMap|0|LINK|mutability|MUTABLE|url|http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java^0|0|3Z|5|K|3B|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@$D|T|E|U|1|V]]|A|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

The platform uses a vector drawable, so you can't reuse it as in in older versions. 
However, the support lib v4 contains a backport of this drawable : 
<a href="http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java" rel="noreferrer">http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java</a>
It has a <code>@hide</code> annotation (it is here for the SwipeRefreshLayout), but nothing prevents you from copying this class in your codebase.

blocks|key|1883216|text|正在寻找一种使用简单xml来完成此任务的方法，但是找不到任何有用的答案，所以想出了这个。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1883217|这也适用于前棒棒糖版本，并且非常接近材料设计进度条。您只需要将此drawable用作ProgressBar布局中的indeterminate+drawable。|1883218|<?xml+version="1.0"+encoding="utf-8"?>
<rotate+xmlns:android="http://schemas.android.com/apk/res/android"
++++android:fromDegrees="0"
++++android:toDegrees="360">
++++<layer-list>
++++++++<item>
++++++++++++<rotate+xmlns:android="http://schemas.android.com/apk/res/android"
++++++++++++++++android:fromDegrees="-90"
++++++++++++++++android:toDegrees="-90">
++++++++++++++++<shape
++++++++++++++++++++android:innerRadiusRatio="2.5"
++++++++++++++++++++android:shape="ring"
++++++++++++++++++++android:thickness="2dp"
++++++++++++++++++++android:useLevel="true">

++++++++++++++++++++<gradient
++++++++++++++++++++++++android:angle="0"
++++++++++++++++++++++++android:endColor="#007DD6"
++++++++++++++++++++++++android:startColor="#007DD6"
++++++++++++++++++++++++android:type="sweep"
++++++++++++++++++++++++android:useLevel="false"+/>
++++++++++++++++</shape>
++++++++++++</rotate>
++++++++</item>
++++++++<item>
++++++++++++<rotate+xmlns:android="http://schemas.android.com/apk/res/android"
++++++++++++++++android:fromDegrees="0"
++++++++++++++++android:toDegrees="270">
++++++++++++++++<shape
++++++++++++++++++++android:innerRadiusRatio="2.6"
++++++++++++++++++++android:shape="ring"
++++++++++++++++++++android:thickness="4dp"
++++++++++++++++++++android:useLevel="true">
++++++++++++++++++++<gradient
++++++++++++++++++++++++android:angle="0"
++++++++++++++++++++++++android:centerColor="#FFF"
++++++++++++++++++++++++android:endColor="#FFF"
++++++++++++++++++++++++android:startColor="#FFF"
++++++++++++++++++++++++android:useLevel="false"+/>
++++++++++++++++</shape>
++++++++++++</rotate>
++++++++</item>
++++</layer-list>
</rotate>|code-block|syntax|javascript|1883219|在ProgressBar中设置上述可绘制内容，如下所示：|1883220|++android:indeterminatedrawable="@drawable/above_drawable"|1883221|entityMap^0|A|3|0|W|8|16|B|1L|M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

Was looking for a way to do this using simple <code>xml</code>, but couldn't find any helpful answers, so came up with this.

This works on pre-lollipop versions too, and is pretty close to the material design progress bar. You just need to use this <code>drawable</code> as the <code>indeterminate drawable</code> in the <code>ProgressBar</code> layout.

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;!--&lt;layer-list&gt;--&gt;
&lt;rotate xmlns:android="http://schemas.android.com/apk/res/android"
 android:fromDegrees="0"
 android:toDegrees="360"&gt;
 &lt;layer-list&gt;
 &lt;item&gt;
 &lt;rotate xmlns:android="http://schemas.android.com/apk/res/android"
 android:fromDegrees="-90"
 android:toDegrees="-90"&gt;
 &lt;shape
 android:innerRadiusRatio="2.5"
 android:shape="ring"
 android:thickness="2dp"
 android:useLevel="true"&gt;&lt;!-- this line fixes the issue for lollipop api 21 --&gt;

 &lt;gradient
 android:angle="0"
 android:endColor="#007DD6"
 android:startColor="#007DD6"
 android:type="sweep"
 android:useLevel="false" /&gt;
 &lt;/shape&gt;
 &lt;/rotate&gt;
 &lt;/item&gt;
 &lt;item&gt;
 &lt;rotate xmlns:android="http://schemas.android.com/apk/res/android"
 android:fromDegrees="0"
 android:toDegrees="270"&gt;
 &lt;shape
 android:innerRadiusRatio="2.6"
 android:shape="ring"
 android:thickness="4dp"
 android:useLevel="true"&gt;&lt;!-- this line fixes the issue for lollipop api 21 --&gt;
 &lt;gradient
 android:angle="0"
 android:centerColor="#FFF"
 android:endColor="#FFF"
 android:startColor="#FFF"
 android:useLevel="false" /&gt;
 &lt;/shape&gt;
 &lt;/rotate&gt;
 &lt;/item&gt;
 &lt;/layer-list&gt;
&lt;/rotate&gt;
</code></pre>

set the above drawable in ProgressBar as follows:

<pre><code> android:indeterminatedrawable="@drawable/above_drawable"
</code></pre>

blocks|key|1669334|text|带背景的加载器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1669335|添加到您的布局中：|1669336|<androidx.constraintlayout.widget.ConstraintLayout
++++android:id="@%2Bid/loader"
++++android:layout_width="35dp"
++++android:layout_height="35dp"
++++android:visibility="visible"
++++app:layout_constraintStart_toStartOf="parent"
++++app:layout_constraintBottom_toBottomOf="parent"
++++app:layout_constraintEnd_toEndOf="parent"
++++app:layout_constraintTop_toTopOf="parent">

++++<ImageView
++++++++android:id="@%2Bid/background_loader"
++++++++android:layout_width="match_parent"
++++++++android:layout_height="match_parent"
++++++++android:src="@drawable/background_loader"
++++++++app:layout_constraintStart_toStartOf="parent"
++++++++app:layout_constraintTop_toTopOf="parent"
++++++++app:layout_constraintEnd_toEndOf="parent"
++++++++app:layout_constraintBottom_toBottomOf="parent"+/>

++++<ProgressBar
++++++++android:id="@%2Bid/spinner_loader"
++++++++android:layout_width="31dp"
++++++++android:layout_height="31dp"
++++++++android:indeterminateTintMode="src_atop"
++++++++android:indeterminateTint="@color/blue"
++++++++app:layout_constraintTop_toTopOf="parent"
++++++++app:layout_constraintStart_toStartOf="parent"
++++++++app:layout_constraintBottom_toBottomOf="parent"
++++++++app:layout_constraintEnd_toEndOf="parent"+/>
</androidx.constraintlayout.widget.ConstraintLayout>|code-block|syntax|javascript|1669337|然后将background_loader.xml文件添加到res/drawable：|1669338|<?xml+version="1.0"+encoding="utf-8"?>
<shape
++++xmlns:android="http://schemas.android.com/apk/res/android"
++++android:shape="oval">
++++<solid+android:color="#ffffff"/>
++++<size+android:width="35dp"+android:height="35dp"/>
</shape>|1669339|在代码中管理加载器的可见性：|1669340|class+MainActivity+:+AppCompatActivity()+{
++++private+lateinit+var+loader:+ConstraintLayout
++++
++++override+fun+onCreate(savedInstanceState:+Bundle?)+{
++++++++super.onCreate(savedInstanceState)
++++++++setContentView(R.layout.activity_main)
++++++++
++++++++loader+=+findViewById(R.id.loader)
++++++++loader.visibility+=+View.VISIBLE
++++}
}|1669341|结果：|1669342|​|1669343|📷|atomic|offset|length|1669344|1669345|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/755351389a2f691b3a59a1f718adf21d.gif|imageAlt^0|0|0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1E|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1I|8|@]|9|@$X|1J|Y|1K|1|1L]]|A|$]]|$1|Z|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17|18|-4]]]]

Loader with background.
Add to your layout:
<pre><code>&lt;androidx.constraintlayout.widget.ConstraintLayout
 android:id=&quot;@+id/loader&quot;
 android:layout_width=&quot;35dp&quot;
 android:layout_height=&quot;35dp&quot;
 android:visibility=&quot;visible&quot;
 app:layout_constraintStart_toStartOf=&quot;parent&quot;
 app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
 app:layout_constraintEnd_toEndOf=&quot;parent&quot;
 app:layout_constraintTop_toTopOf=&quot;parent&quot;&gt;

 &lt;ImageView
 android:id=&quot;@+id/background_loader&quot;
 android:layout_width=&quot;match_parent&quot;
 android:layout_height=&quot;match_parent&quot;
 android:src=&quot;@drawable/background_loader&quot;
 app:layout_constraintStart_toStartOf=&quot;parent&quot;
 app:layout_constraintTop_toTopOf=&quot;parent&quot;
 app:layout_constraintEnd_toEndOf=&quot;parent&quot;
 app:layout_constraintBottom_toBottomOf=&quot;parent&quot; /&gt;

 &lt;ProgressBar
 android:id=&quot;@+id/spinner_loader&quot;
 android:layout_width=&quot;31dp&quot;
 android:layout_height=&quot;31dp&quot;
 android:indeterminateTintMode=&quot;src_atop&quot;
 android:indeterminateTint=&quot;@color/blue&quot;
 app:layout_constraintTop_toTopOf=&quot;parent&quot;
 app:layout_constraintStart_toStartOf=&quot;parent&quot;
 app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
 app:layout_constraintEnd_toEndOf=&quot;parent&quot; /&gt;
&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
</code></pre>
Then add the background_loader.xml file to res/drawable:
<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;shape
 xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 android:shape=&quot;oval&quot;&gt;
 &lt;solid android:color=&quot;#ffffff&quot;/&gt;
 &lt;size android:width=&quot;35dp&quot; android:height=&quot;35dp&quot;/&gt;
&lt;/shape&gt;
</code></pre>
Managing the visibility of the loader in the code:
<pre><code>class MainActivity : AppCompatActivity() {
 private lateinit var loader: ConstraintLayout
 
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_main)
 
 loader = findViewById(R.id.loader)
 loader.visibility = View.VISIBLE
 }
}
</code></pre>
Result:
<a href="https://i.stack.imgur.com/nThAE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nThAE.gif" alt="enter image description here" /></a>

I want to make a material design circular progress bar like the one in Inbox by Gmail android app. How do I achieve this (in pre-lollipop devices)?
Am trying to achieve a similar effect like this.
<a href="https://drive.google.com/file/d/0B2WfHQxy1J_Ob29NNlpkbFJjaWc/view?usp=sharing" rel="noreferrer">Inbox by Gmail material design circular progress bar</a>

How to implement a material design circular progress bar in android

Android

我想做一个材料设计的圆形进度条，就像Gmail android应用程序收件箱中的那个一样。如何实现这一点(在预装棒棒糖的设备中)？我正在尝试达到类似的效果。

问如何在android中实现材料设计循环进度条
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在android中实现材料设计循环进度条EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在android中实现材料设计循环进度条
EN