Видаліть вертикальну прокладку з горизонтального ProgressBar

За замовчуванням ProgressBar має певну підкладку над і під самою смужкою. Чи є спосіб видалити цю підкладку, щоб в кінці залишилася тільки смужка?

Я використовую наступне як вирішення цього питання.

android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"

Ось як я використав відповідь Юозаса:

висота моєї ProgressBar4dp. Таким чином , я створив FrameLayoutз висотою 4ДПОМ і встановіть layout_gravityз ProgressBarв center. Це працює як шарм.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="4dp">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="center"
        android:indeterminate="true"/>

</FrameLayout>

Я вирішив цю проблему за допомогою спеціальної бібліотеки. Більшість інших рішень працюють, але результати не відповідають усім пристроям.

MaterialProgressBar

• Послідовна поява на Android 4.0+.
• Правильна тонування на платформах.
• Можливість видалення внутрішньої прокладки рамки ProgressBar.
• Здатний приховати доріжку горизонтального рамки ProgressBar.
• Використовується як заміна, що випадає для рамки ProgressBar.

Щоб додати як ступінь залежності:

compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'

Щоб додати у ваш макет ProgressBar без внутрішньої прокладки:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="wrap_content"
    android:layout_height="4dp"
    android:indeterminate="true"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

app:mpb_useIntrinsicPadding="false"робить трюк. Детальніше дивіться на сторінці GitHub .

Якщо комусь ще потрібна допомога, спробуйте це:

<androidx.core.widget.ContentLoadingProgressBar
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    android:indeterminate="true"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guideline" />

Тут панель прогресу знаходиться всередині ConstraintLayout , а атрибути constraintTop_toTopOf та constraintBottom_toTopOf повинні бути застосовані до одного і того ж елемента (у цьому випадку це орієнтир).

*** ЗАВЕРШЕННЯ РІШЕННЯ: ***

<androidx.constraintlayout.widget.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="48dp">

<View
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

Можна прокреслити вертикально центрований ProgressBar всередині батьків, який би відрізав прокладку. Оскільки ProgressBar не може зробити себе більшим за батьківський, ми мусимо створити великий батько, щоб розмістити його всередині перегляду відсікання.

<FrameLayout
    android:id="@+id/clippedProgressBar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    tools:ignore="UselessParent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:layout_gravity="center_vertical">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="true"/>

    </FrameLayout>

</FrameLayout>

Щоб видалити вертикальну прокладку ProgressBar, можна зробити

• фіксуємо висоту ProgressBar
• Використовуйте шкала Y = "значення" (значення = висота / 4) (4 - висота смуги прогресу за замовчуванням)

Приклад містить 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dpProgressBar

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    ...
    android:layout_height="8dp"
    android:scaleY="2" />

Повноцінним рішенням цієї проблеми було б наступне. На всякий випадок, якщо комусь потрібні фрагменти коду, це я і зробив.

1. Скопійовано всі 8 невизначених горизонтальних малюнків смуги прогресу
2. Редагуйте малюнки за допомогою деякого маніпулятора зображень та видаліть зайві прокладки
3. Скопіював XML з назвою progress_indeterminate_horizontal_holo.xml з платформи Android
4. Скопіювали стиль Widget.ProgressBar.Horizontal та його батьків
5. Встановіть стиль і міні-висоту вручну в макеті

Ось progress_indeterminate_horizontal_holo.xml

<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
<item android:drawable="@drawable/progressbar_indeterminate_holo1" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo2" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo3" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo4" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo5" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo6" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo7" android:duration="50" />
<item android:drawable="@drawable/progressbar_indeterminate_holo8" android:duration="50" />

Ресурси стилю скопійовані у мій файл локальних стилів.

<style name="Widget">
    <item name="android:textAppearance">@android:attr/textAppearance</item>
</style>

<style name="Widget.ProgressBar">
    <item name="android:indeterminateOnly">true</item>
    <item name="android:indeterminateBehavior">repeat</item>
    <item name="android:indeterminateDuration">3500</item>
</style>

<style name="Widget.ProgressBar.Horizontal">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
</style>

І нарешті, встановіть мінімальну висоту в 4dp у моєму локальному файлі компонування.

<ProgressBar
    android:id="@+id/pb_loading"
    style="@style/Widget.ProgressBar.Horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:indeterminate="true"
    android:minHeight="4dp"
    android:minWidth="48dp"
    android:progressDrawable="@drawable/progress_indeterminate_horizontal_holo" />

Я зіткнувся з тією ж проблемою, використовуючи панель прогресу в горизонтальному стилі.

Першопричиною є те, що 9-патч за замовчуванням, який можна витягнути для панелі прогресу: (progress_bg_holo_dark.9.png) має кілька вертикальних прозорих пікселів як підкладки.

Остаточне рішення, яке працювало для мене: налаштувати малюнок прогресу, мій зразок коду таким чином:

custom_horizontal_progressbar_dravable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#33ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#ff9800" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#E91E63" />
            </shape>
        </clip>
    </item>
</layer-list>

Фрагмент макета:

<ProgressBar
    android:id="@+id/song_progress_normal"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_alignParentBottom="true"
    android:progressDrawable="@drawable/custom_horizontal_progressbar_drawable"
    android:progress="0"/>

Один фокус - додати негативні націнки на панель прогресу.

Нижче наводиться приклад коду XML, припускаючи, що він знаходиться на екрані:

<ProgressBar
    android:id="@+id/progressBar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-7dp"
    android:layout_marginBottom="-7dp"
    android:indeterminate="true" />

Відповідь Субіна, здається, є єдиною (на даний момент), яка не є тендітною хаккою, що підлягає злому в майбутніх випусках Android ProgressBar.

Але замість того, щоб переживати проблеми з вириванням ресурсів, їх зміною та збереженням на невизначений термін, я вирішив використовувати бібліотеку MaterialProgressBar , яка робить це для нас:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:layout_gravity="bottom"
    custom:mpb_progressStyle="horizontal"
    custom:mpb_showTrack="false"
    custom:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal.NoPadding"
/>

У build.gradle:

// Android horizontal ProgressBar doesn't allow removal of top/bottom padding
compile 'me.zhanghai.android.materialprogressbar:library:1.1.6'

Цей проект має гарну демонстрацію, яка показує відмінності між ним та вбудованим ProgressBar.

якщо хтось ще шукає рішення - перевірте цей коментар

встановити мінімальну висоту до 4 dp

   android:minHeight="4dp"

-

  <ProgressBar
    android:id="@+id/web_view_progress_bar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:min="0"
    android:progress="5"
    android:minHeight="4dp"
    android:progressTint="@color/vodafone_red"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:progress="60" />

Я використовую minHeight та maxHeigh. Це допомагає для різних версій Api.

<ProgressBar
    android:id="@+id/progress_bar"
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp" />

Для цього потрібно використовувати і те, і інше. Api 23 добре працює з

android:layout_height="wrap_content"
android:minHeight="0dp"

Але нижчі версії Api збільшують висоту смуги прогресу до maxHeight у цьому випадку.

Спробуйте наступне:

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progress="25"
    android:progressTint="@color/colorWhite"
    android:progressBackgroundTint="@color/colorPrimaryLight"
    android:layout_width="match_parent"
    android:layout_height="4dp" />

... а потім налаштуйте панель прогресу під свої потреби, оскільки спочатку вона буде відображати смугу середнього розміру з відтінком жовтого кольору з відтінком сірого фону прогресу. Також зауважте, що немає вертикальної прокладки.

Використовуйте так, як всередині Linearlayout

 <LinearLayout
        android:layout_width="match_parent"
        android:background="#efefef"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/progressBar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="gone"
            android:layout_marginTop="-7dp"
            android:layout_marginBottom="-7dp"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            />

    </LinearLayout>

додавання андроїда: progressDravable до списку шарів, визначеного в Dravable, вирішив проблему для мене. Це працює, маскуючи смуги прогесів у користувальницькому малюванні

приклад реалізації, описаний на https://stackoverflow.com/a/4454450/1145905

Я використовую, style="@style/Widget.AppCompat.ProgressBar.Horizontal"і позбутися маржі було досить просто. Цей стиль такий:

    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>

Я просто перевищив мінімум / максимальну висоту:

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:indeterminate="true"
        android:minHeight="2dp"
        android:maxHeight="2dp" />

Не потрібно завантажувати будь-який новий модуль або навіть ставити FrameLayout навколо своєї панелі прогресу. Це все просто хаки. Лише 2 кроки:

У своєму що-небудь.xml

<ProgressBar
    android:id="@+id/workoutSessionGlobalProgress"
    android:layout_width="match_parent"
    android:layout_height="YOUR_HEIGHT"
    android:progressDrawable="@drawable/progress_horizontal"
    android:progress="0"
    <!-- High value to make ValueAnimator smoother -->
    android:max="DURATION * 1000"
    android:indeterminate="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"/>

progress_horizontal.xml, Змінюйте значення за вашим бажанням.

Вам не подобаються закруглені кути?
Приберіть радіус кута

Вам не подобаються кольори? Зміна кольорів тощо. Готово!

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
                    />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                        />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                        />
            </shape>
        </clip>
    </item>

</layer-list>

Як правило, це кроки щодо зміни коду всього, що вам не подобається. Просто знайдіть вихідний код і з’ясуйте, що потрібно змінити. Якщо ви дотримуєтеся вихідного коду ProgressBar, ви знайдете файл, який називається progress_horizontal.xml, на який він посилається. В основному, як я вирішую всі свої проблеми з XML.

 <ProgressBar
        android:layout_marginTop="-8dp"
        android:layout_marginLeft="-8dp"
        android:layout_marginRight="-8dp"
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:indeterminate="false"
        android:indeterminateTint="@color/white"
        android:max="100"
        android:paddingStart="8dp"
        android:paddingRight="0dp"
        android:progressDrawable="@drawable/progress_bg" />

<androidx.core.widget.ContentLoadingProgressBar
                    android:id="@+id/progressBar"
                    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:indeterminate="true"
                    android:paddingTop="2dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

Просто використовуйте Material ProgressIndicator, який не має прихованої межі.

<com.google.android.material.progressindicator.ProgressIndicator
        android:id="@+id/progressBar"
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorColor="@color/colorPrimary"
        app:trackColor="@color/colorAccent" />

Просте рішення без жодних хитрощів, сумісне з будь-якою версією Android та не потребує зовнішніх бібліотек, підробляє ProgressBarдві Viewsвнутрішні LinearLayout. Це я і закінчив. Виглядає досить акуратно, і такий підхід є досить гнучким - ви можете анімувати його на приємні способи, додавати текст тощо.

Макет:

<LinearLayout
    android:id="@+id/inventory_progress_layout"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/inventory_progress_value"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/inventory_progress_remaining"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Код:

public void setProgressValue(float percentage) {
    TextView progressValue = (TextView) findViewById(R.id.inventory_progress_value);
    TextView progressRemaining = (TextView) findViewById(R.id.inventory_progress_remaining);

    LinearLayout.LayoutParams paramsValue = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    LinearLayout.LayoutParams paramsRemaining = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    paramsValue.weight = (100 - percentage);
    paramsRemaining.weight = percentage;

    progressValue.setLayoutParams(paramsValue);
    progressRemaining.setLayoutParams(paramsRemaining);

}

Результат (з деякою висотою додано):

Найкращим рішенням має бути

android:minHeight="0dp"

Не обходиться і працює як принадність.