How to place progress bar at the top of cardview?

Question

I am placing the progressBar in the cardView at the top with the following code:

<com.google.android.material.card.MaterialCardView
    style="@style/Widget.MaterialComponents.CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/keyline_4"
    android:layout_marginTop="@dimen/keyline_2"
    android:layout_marginEnd="@dimen/keyline_4"
    android:minHeight="200dp"
    android:translationZ="8dp"
    app:cardCornerRadius="@dimen/keyline_2"
    app:cardElevation="@dimen/cardview_default_elevation"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="PrivateResource">

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/forgotPassword"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/keyline_4"
            android:layout_marginTop="@dimen/keyline_1"
            android:layout_marginEnd="@dimen/keyline_4"
            android:layout_marginBottom="@dimen/keyline_4"
            android:text="Forgot Password ?"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/signIn" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signIn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/keyline_4"
            android:backgroundTint="@color/color_secondary"
            android:text="Sign In"
            android:textColor="?colorOnSecondary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textInputPassword" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputPassword"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/keyline_2"
            android:paddingStart="@dimen/keyline_4"
            android:paddingEnd="@dimen/keyline_4"
            app:layout_constraintTop_toBottomOf="@id/textInputEmail"
            app:passwordToggleEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editTextPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputEmail"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/keyline_2"
            android:paddingStart="@dimen/keyline_4"
            android:paddingEnd="@dimen/keyline_4"
            app:layout_constraintTop_toBottomOf="@id/rel">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editTextMail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email"
                android:inputType="textEmailAddress" />
        </com.google.android.material.textfield.TextInputLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

So. I have tried doing this.. But result is as follows -

I would like to place it to the extreme top of the cardview like this. It belongs to the google app. Can anyone help me regarding this. I have tried coordinator layout, constraint layout, relative layout, etc. I also tried to change the gravity of the progressBar. It didn't work. Please help.

wrap your cardview under a view group like linear layout and place a progress bar on top. — Raghunandan, Aug 15 '19 at 08:00
But the progressBar will not be trimmed with rounded edges .. like example from google app — Anuj Kumar, Aug 15 '19 at 08:04

Andrés R.C. · Accepted Answer · 2019-08-15T10:50:48.843

Activity.xml

<LinearLayout>
...
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/cv_bg_input_text"
    android:layout_margin="10dp"
    app:cardCornerRadius="50dp"
    app:cardElevation="5dp">

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

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="@null"
            android:inputType="textPersonName"
            android:text="Name" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-2dp"
            android:indeterminate="true"
            android:scaleY="4" />
    </FrameLayout>

</androidx.cardview.widget.CardView>
...
</LinearLayout>

Create cv_bg_input_text.xml in Drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#10000000" android:width="1dp"/>
    <solid android:color="#fff"/>
</shape>

Result

Now for your case just change:

android:layout_gravity="bottom" to android:layout_gravity="top"
android:layout_marginBottom="-2dp" android:layout_marginTop="-2dp"

in <ProgressBar>:

Thank You for your response. I am trying it as fast as I can. If it works I will accept your answer. Have a great day :) — Anuj Kumar, Aug 15 '19 at 12:09

How to place progress bar at the top of cardview?

1 Answers1