ساخت و طراحی پروگرس بار progressBar پیشرفته در اندروید

طراحی پروگرس بار در اندروید ، ساخت progressbar در اندروید . امروز یکی از پرکاربردترین ابزارهای اپلیکیشن های اندرویدی که پروگرس بار progressbar هستش رو مورد بررسی قرار میدیم.تقریبا ۹۹درصد اپ ها چه لوکال و چه آنلاین زمانی که میخوان دیتارو لود کنن یا هرکاری ک ممکنه چند ثانیه کاربر رو منتظر نگه داره از پروگرس بار استفاده میکنن پس همه با این ویو کاربردی آشنا هستیم.

اما مشکلی که اکثر برنامه نویسا باهاش روبرو هستن سبک های روتین و تکراریه پروگرس بار هاست و باید کمی زمان بذاریم تا بتونیم یه پروگرس بار جذاب و کاستومایز شده (پروگرس بار سفارشی در اندروید) رو طراحی و پیاده کنیم.

اینجا چندتا طرح جالب با ترکیب تگ های layerlist , shape , rotate ایجاد کردم که میتونید از همین طرح ها استفاده کنید و یا با ادیت های خیلی کوچیک طرح متمایز خودتون رو ایجاد کنید و استفاده کنید.در ادامه در نمونه هایی از استایل های متفاوت برای پروگرس بارها آورده ایم:

۱- استایل (style) برای پروگرس بار در اندروید نمونه اول

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="3600"
>

   <item >
      <rotate
            android:fromDegrees="3600">

         <shape xmlns:android="http://schemas.android.com/apk/res/android"

                android:useLevel="true"
                android:innerRadiusRatio="2.0"
                android:shape="ring"
                android:thickness="1dp">

            <solid android:color="#ff614a"/>

         </shape>
      </rotate>

   </item>


   <item >
      <rotate
            android:toDegrees="3600">

         <shape xmlns:android="http://schemas.android.com/apk/res/android"

                android:useLevel="true"
                android:innerRadiusRatio="2.8"
                android:shape="ring"
                android:thickness="1dp">

            <solid android:color="#ff614a"/>

         </shape>
      </rotate>

   </item>

</layer-list>

طراحی پروگرس بار در اندروید

۲- استایل (style) برای پروگرس بار در اندروید نمونه دوم

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="3600"
>

   <item >
      <rotate
            android:fromDegrees="3600">

         <shape xmlns:android="http://schemas.android.com/apk/res/android"

                android:useLevel="true"
                android:innerRadiusRatio="2.0"
                android:shape="ring"
                android:thickness="1dp">

            <stroke android:color="@color/colorAccent"
                    android:dashWidth="5dp"
                    android:dashGap="20dp"
                    android:width="1dp"/>

         </shape>
      </rotate>

   </item>


   <item >
      <rotate
            android:toDegrees="3600">

         <shape xmlns:android="http://schemas.android.com/apk/res/android"

                android:useLevel="true"
                android:innerRadiusRatio="2.8"
                android:shape="ring"
                android:thickness="1dp">

            <stroke android:color="@color/colorAccent"
                    android:dashWidth="5dp"
                    android:dashGap="20dp"
                    android:width="1dp"/>

         </shape>
      </rotate>

   </item>

</layer-list>

طراحی پروگرس بار در اندروید

۳- استایل (style) برای پروگرس بار در اندروید نمونه سوم

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
            >

   <item>
      <rotate

            android:fromDegrees="3600">

         <shape
               android:dither="true"
               android:innerRadius="30dp"
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thickness="1dp">

            <gradient android:startColor="#b42519"
                      android:endColor="#2c27ae"
                      android:angle="-90"
            android:type="sweep"
            android:gradientRadius="6dp"/>
         </shape>
      </rotate>

   </item>


   <item>
      <rotate
                android:toDegrees="360"
            android:fromDegrees="0">

         <shape
               android:dither="true"
               android:innerRadius="40dp"
               android:innerRadiusRatio="2.5"
               android:shape="ring"
               android:thickness="1dp">

            <gradient android:startColor="#b42519"
                    android:endColor="#2c27ae"
                    android:angle="-90"
                    android:type="sweep"
                    android:gradientRadius="6dp"/>
         </shape>
      </rotate>

   </item>


</layer-list>

ساخت progressbar در اندروید

۴- استایل برای طراحی progressbar در اندروید نمونه چهارم

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromDegrees="3600">

   <item>
      <rotate
            android:fromDegrees="3600">

         <shape
                android:innerRadiusRatio="1.5"
                android:shape="ring"
                android:thickness="1dp">


            <gradient android:startColor="#b42519"
                      android:endColor="#2c27ae"
                      android:angle="-90"
            android:type="sweep"
            android:gradientRadius="6dp"/>
         </shape>
      </rotate>

   </item>
</layer-list>

ساخت progressbar در اندروید

۵- استایل برای طراحی progressbar در اندروید نمونه پنجم

<pre><?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
            >

   <item>
      <rotate
            android:fromDegrees="3600">

         <shape
               android:dither="true"
               android:innerRadius="30dp"
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thickness="1dp">

            <gradient android:startColor="#b42519"
                      android:endColor="#2c27ae"
                      android:angle="-90"
            android:type="sweep"
            android:gradientRadius="6dp"/>
         </shape>
      </rotate>

   </item>


   <item>
      <rotate
            android:fromDegrees="-3600">

         <shape
               android:dither="true"
               android:innerRadius="40dp"
               android:innerRadiusRatio="2.5"
               android:shape="ring"
               android:thickness="1dp">

            <gradient android:startColor="#b42519"
                    android:endColor="#2c27ae"
                    android:angle="-90"
                    android:type="sweep"
                    android:gradientRadius="6dp"/>
         </shape>
      </rotate>

   </item>

   <item>
      <rotate
            android:fromDegrees="3600">

         <shape
               android:dither="true"
               android:innerRadius="50dp"
               android:innerRadiusRatio="2.5"
               android:shape="ring"
               android:thickness="1dp">

            <gradient android:startColor="#b42519"
                    android:endColor="#2c27ae"
                    android:angle="-90"
                    android:type="sweep"
                    android:gradientRadius="6dp"/>
         </shape>
      </rotate>

   </item>
</layer-list>

ساخت progressbar در اندروید

۶- استایل برای طراحی progressbar در اندروید نمونه ششم

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="3600"
>

   <item >
      <rotate
            android:toDegrees="360"
            android:fromDegrees="0">

         <shape xmlns:android="http://schemas.android.com/apk/res/android"

                android:useLevel="true"
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thickness="1dp">

            <stroke android:color="@color/colorAccent"
                    android:dashWidth="5dp"
                    android:dashGap="10dp"
                    android:width="1dp"/>

         </shape>
      </rotate>

   </item>


</layer-list>

ساخت progressbar در اندروید

در انتها هرکدام از این استایل های بالا رو میتونید بصورت زیر در ویو پروگرس بار استفاده کنید

<?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">

<ProgressBar
android:id="@+id/progressBar2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:indeterminate="true"
android:indeterminateDrawable="@drawable/progress_1"
android:progress="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

امیدوارم این آموزش براتون مفید بوده باشه و ازش استفاده کنید. از طریق راه های ارتباطی زیر میتونید با ما برای درخواست آموزش های اختصاصی و انواع پروژه ها در ارتباط باشید.