水平プログレスバーから垂直パディングを削除します


127

デフォルトでは、ProgressBarにはバー自体の上下に特定のパディングがあります。最後にバーのみが表示されるようにこのパディングを削除する方法はありますか?


7
他のトピックで説明したように、の設定maxHeightは機能しません。
abergmeier 2013年

android:minHeight="4dp"
Sam Chen

回答:


71

この問題の回避策として次を使用します。

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

1
layout_marginBottomは必要ありませんでした。
AlikElzin-kilaka 14

11
android:layout_marginTop="-6dp"私のために働いた。それがデバイスに依存しているかどうか疑問に思いますか?私は唯一のXperia Z1上でテストしている
するThorbjörnカッペルハンセン

2
@ThorbjørnKappelHansenデバイスに依存します。Galaxy S6と-6dpのマージントップは期待どおりに機能しません。
ムハンマドアブドゥルラヒム

1
マージンはプログレスバーのサイズとAndroidのバージョンに依存すると思います。
ノエル

2
使用するFramelayoutこの回答のように、より良い解決策であり、電話のサイズ/タイプ/ OSバージョンに依存しない
koceeng

57

これは私がJuozasの答えをどのように使用したかです:

私の身長ProgressBarは4 dpです。私が作成したように、FrameLayout高さ4DPとし、設定layout_gravityProgressBarします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>

23
これは良いアイデアですが、Android 7.0ではサポートライブラリのプログレスバーを使用してもコードが機能しませんでした。バーは薄くなりましたが、まだ上部にパッドがありました。
サム

4
@Sam ProgressBarを作成します(例:height = 100dp)。FrameLayoutのため、4dpのままですが、バーはより太く見えます。
Megaetron

5
API 24以降では機能しません。設定したサイズに関係なく、バーは細くなります。
2018年

36

この問題を解決するためにカスタムライブラリを使用することになりました。他のほとんどのソリューションは機能しますが、結果はさまざまなデバイス間で一貫していません。

MaterialProgressBar

  • Android 4.0以降で一貫した外観。
  • プラットフォーム間の色合いを修正します。
  • フレームワークProgressBarの固有のパディングを削除することができます。
  • フレームワークの水平ProgressBarのトラックを非表示にすることができます。
  • フレームワークProgressBarのドロップイン代替として使用されます。

Gradle依存関係として追加するには:

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ページを参照してください


最初に、パディングを削除するためだけに別の依存関係を追加しないようにしました。しかし、他のすべてのソリューションは、いずれかの方法/バージョンで失敗し、最終的に、これを機能させるのに3分かかりました!! ありがとうございました。
ToniTornado 2018年

32
ビューのパディングを修正するためのライブラリ全体。Googleへの道。
デニー

あなたは(あなたのセットアップに応じて)上記のスタイル/ Widget.AppCompat.ProgressBar.Horizo​​ntal @使用することをお勧めします
ROR

31

誰かがまだ助けが必要な場合はこれを試すことができます:

<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属性は同じ要素に適用する必要があります(この場合はガイドラインです)。


4
これは完全に機能するため、正解としてマークする必要があります。
フィリオ2018

1
これが正解です。すべてのデバイス(負のマージンは提供されていません)およびandroidバージョン(フレームレイアウトソリューションでは提供されていません)と互換性があります。また、システムドローアブルをアプリにインポートすることで必要なすべての作業を行う必要はありません(これにより、システム全体ですべてのAndroidバージョンに一貫したUIが提供されません)。
Vaios

2
@Ali_Waris回答を投稿していただきありがとうございます。このソリューションを機能させることができないため、このソリューションを理解したいと思っています。回答を拡張して、ConstraintLayoutと回答のガイドラインを含めることができますか?
scottyab

ここでのガイドラインは何ですか?どこに行くの?
iamgopal

16

パディングを切り取る親の内部に垂直方向に中央揃えされた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>

1
これはAndroid 7.0では機能しましたが、Android 4.1.2を実行しているSony Xperia Mでプログレスバーが表示されませんでした。
サム

@Sam報告ありがとうございます!最初のFrameLayoutの高さを4 dpから48 dpに変更するとどうなりますか?
Juozas Kontvainis 2017年

進行状況バーが表示されますが、その下には多くのパディングがあり、その上に小さなパディングがあります。
サム

@Sam私は私の答えを更新しました。うまくいけば、Sonyデバイスで問題なく動作するでしょう。それでも問題が解決しない場合は、アプリケーションのテーマ構成を確認することをお勧めします。KitKatでHoloテーマを使用すると修正されます。
Juozas Kontvainis 2017年

15

の垂直パディングを削除するにはProgressBar、次のようにします

  • の高さを修正 ProgressBar
  • scaleY = "value"(value = height / 4)を使用(4はプログレスバーのデフォルトの高さ)

例には、1つのwrap_content ProgressBar、1 8dp ProgressBar、1 100dp が含まれていますProgressBar

ここに画像の説明を入力してください

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

14

この問題の完全な解決策は次のようになります。誰かがコードの断片を必要とする場合に備えて、これは私がやったことです。

  1. 8つの不確定な水平プログレスバードローアブルをすべてコピーしました
  2. 画像マニピュレータを使用してドローアブルを編集し、不要なパディングを削除しました
  3. Androidプラットフォームからprogress_indeterminate_horizo​​ntal_holo.xmlという名前のドローアブルXMLをコピーしました
  4. スタイルWidget.ProgressBar.Horizo​​ntalとその親をコピーしました
  5. レイアウトで手動でスタイルとmin_heightを設定します

これがprogress_indeterminate_horizo​​ntal_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>

最後に、ローカルレイアウトファイルで最小高さを4 dpに設定します。

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

手順1で説明したドローアブルをどこからコピーできますか?「1. 8つの不確定な水平プログレスバードローアブルをすべてコピーしました」?
Greenhand 2013

3
@JeffreyLinこの場所からコピーしました<your-sdk-folder>/platforms/android-17/data/res/drawable-hdpi/
Subin Sebastian

33
Androidのデフォルトでこのような常識的な振る舞いを実現するために、どれほどの労力を費やさなければならないのでしょうか。
SpaceMonkey 2015年

1
そして材料設計のために?
mrroboaat

@aatマテリアルガイドラインに同様のプログレスバーがあるとは思いません。この文書を通過してください:google.com/design/spec/components/...
SUBINセバスチャン

10

Horizo​​ntalスタイルでプログレスバーを使用しているときに同じ問題に遭遇しました。

根本的な原因は、プログレスバーのデフォルトの9パッチのドローアブル(progress_bg_holo_dark.9.png)にパディングとして垂直方向の透明なピクセルがあることです。

私のために働いた最後のソリューション:進行状況のドローアブルをカスタマイズし、私のサンプルコードを次のようにカスタマイズします。

custom_horizo​​ntal_progressbar_drawable.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"/>

これはおそらく最良の解決策です。ただし、サンプルコードでは、Android 4.1.2を実行しているSony Xperia Mでプログレスバーが生成されませんでした。
サム

8

1つのトリックは、プログレスバーに負のマージンを追加することです。

画面の上部にあると想定した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" />

コードの結果


負のマージンを追加すると、問題が解決しました。ありがとう!
icarovirtual

5

Subinの答えは、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

誰かがまだ解決策を探している場合-このコメントを確認してください

最小の高さを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" />

私はこの答えを好む。
Sam Chen

2

私は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に増加します。


2

以下を試してください:

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

...プログレスバーは、黄色のプログレスバックグラウンドティントと黄色のプログレスバックグラウンドティントを持つ中型のバーを最初に表示するため、必要に応じて構成します。また、垂直パディングがないことに注意してください。


2

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>

よく働く!次回は、コードの内容と変更内容について説明します。;-)
Jokelaの開発者

1

android:progressDrawableをドローアブルで定義されたレイヤーリストに追加すると、問題が解決しました。カスタムドローアブルの進捗バーをマスクすることで機能します

https://stackoverflow.com/a/4454450/1145905で説明されている実装例


1

私が使用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" />

私は一般的な進行状況バーに満足したことがなく、最終的にライブラリに目を向けました:me.zhanghai.android.materialprogressbar.MaterialProgressBar
Anthony

1

新しいモジュールをダウンロードしたり、プログレスバーの周りにFrameLayoutを配置したりする必要はありません。これらはすべてハックです。2つのステップのみ:

あなたのwhatever.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_horizo​​ntal.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_horizo​​ntal.xmlというファイルが見つかります。基本的に、XMLの問題をすべて解決する方法。


0
 <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" />

0
<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"/>

単にコードを投稿しないでください。あなたの答えにいくつかのコンテキストを与えます。
マーティンギャル

0

マージンが隠されていない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" />

-1

Androidのすべてのバージョンと互換性があり、外部ライブラリを必要としないシンプルなトリックソリューションはProgressBarViews内部に2つあり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);

}

結果(いくつかの高度が追加されています):

ここに画像の説明を入力してください


-1

最良の解決策は

android:minHeight="0dp"

回避策はなく、魅力のように機能します。


うまくいかなかった場合、なぜこれがうまくいくのか説明していただけますか?
humble_wolf

@humble_wolf私が答えを書いたとき、それは私の以前のプロジェクトで自分のために働いた。ライブラリの特定のバージョンに依存している可能性がありますか?プログレスバーのようなパディングがある理由は実際のパディングではないが、minHeight事前定義された0(たとえば32dp)より大きいaがあるため、これは機能するはずです。このプロパティを変更すると、別の外観になります。
アレックスファン

Inderminate = trueモードでは動作しませんでした。おそらく確定モードで動作しています。本当にこれが答えになりたい場合は、すべての条件を添えて説明を書き込んでください。
humble_wolf
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.