工具栏下面有水平ProgressBar

时间:2014-10-21 15:27:14

标签: android android-appcompat android-toolbar

借助Android Lollipop和AppCompat-v7中的新工具栏API,他们正在删除许多自动功能,以使Toolbar / ActionBar更加强大。其中一个是进度条。由于Toolbar只是一个ViewGroup,我假设添加一个ProgressBar很简单。但是,我似乎无法让它正常工作。

我已完成以下操作(使用SmoothProgressBar库):

    // I instantiate the toolbar and set it as the actionbar
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);

    // I create a ProgressBar and set the drawable to the SmoothProgressBar drawable
    ProgressBar progressBar = new ProgressBar(this);
    progressBar.setIndeterminateDrawable(new SmoothProgressDrawable.Builder(this).color(Color.BLUE).interpolator
            (new DecelerateInterpolator()).sectionsCount(4).separatorLength(8).speed(2f).mirrorMode(true).build());
    // I add the progressbar to the view with what I thought were the proper LayoutParams.
    Toolbar.LayoutParams params = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 20);
    params.gravity = Gravity.BOTTOM;
    mToolbar.addView(progressBar, params);
    progressBar.setIndeterminate(true);

我认为这样可行,因为我只是将一个ProgressBar添加到ViewGroup的底部。但是,它根本没有显示,正在删除标题。下面你可以看到前后。有谁知道如何解决这个问题?我的目标是在操作栏下面放置一个ProgressBar。

之前 Before picture

After picture

3 个答案:

答案 0 :(得分:5)

最简单的方法是直接在XML-Layout文件中添加ProgressBar

1。一次解决方案

以root身份使用RelativeLayout并使用android:layout_belowProgressBar和主要内容保留在工具栏下方。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"/>

    <fr.castorflex.android.smoothprogressbar.SmoothProgressBar
        android:id="@+id/loadProgressBar"
        style="@style/LoadProgressBar"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_below="@+id/toolbar"
        android:indeterminate="true"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:orientation="vertical">
        <!-- Your Content here -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Content Text"/>

    </LinearLayout>

</RelativeLayout>

现在,您可以访问Toolbar ProgressBar方法中的ActivitiyonCreate

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    progressBar = (SmoothProgressBar) findViewById(R.id.loadProgressBar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
    }
}

2。使用include

的常规解决方案

更通用的方法是将ToolbarProgressBar放在单独的XML布局文件中,并将其包含在活动布局中。

<强> toolbar.xml

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimaryDark"/>

    <fr.castorflex.android.smoothprogressbar.SmoothProgressBar
        android:id="@+id/loadProgressBar"
        style="@style/LoadProgressBar"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_below="@+id/toolbar"
        android:indeterminate="true"/>

</merge>

<强> activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <include
        layout="@layout/toolbar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:orientation="vertical">
        <!-- Your Content here -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Content Text"/>

    </LinearLayout>

</RelativeLayout>

答案 1 :(得分:1)

这将在工具栏下方显示水平工具栏:

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

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

    </RelativeLayout>

</android.support.design.widget.AppBarLayout>

您可以访问我的github了解更多信息Horizontal Progressbar below toolbar,或观看此YouTube教程Toolbar with Horizontal Progressbar

答案 2 :(得分:0)

尝试此操作,将显示在statusBar

<androidx.coordinatorlayout.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp"
    android:elevation="0dp">
    <ProgressBar
        android:id="@+id/progressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:max="100"
        android:layout_marginTop="-7dp"
        android:layout_marginBottom="-7dp"
        android:visibility="visible" />
    <androidx.appcompat.widget.Toolbar