android - usar - ¿Cómo superponer una vista en una restricción de reproducción?

uso de constraint layout

Question

Tengo este diseño de mi actividad de inicio de sesión. Quiero superponer progressBar como se puede hacer usando FrameLayout . ¿Cómo hacer esto usando ConstraintLayout ?

<layout>

    <data>

        <variable
            name="vm"
            type="com.app.android.login.vm" />
    </data>

    <ScrollView 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:fillViewport="true"
        tools:context="com.app.android.login.LoginActivity"
        tools:ignore="missingPrefix">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/default_view_margin_bottom_8dp">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/til_login_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                android:textColorHint="@color/colorSecondaryText"
                app:hintTextAppearance="@style/AppTheme.InputLayoutStyle"
                app:layout_constraintBottom_toTopOf="@+id/til_login_password"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed">

                <android.support.design.widget.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/login_email"
                    android:imeOptions="actionNext"
                    android:singleLine="true"
                    android:text="@={vm.emailField}"
                    android:textColor="@color/colorPrimaryText" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/til_login_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                android:textColorHint="@color/colorSecondaryText"
                app:hintTextAppearance="@style/AppTheme.InputLayoutStyle"
                app:layout_constraintBottom_toTopOf="@+id/btn_login_login"
                app:layout_constraintTop_toBottomOf="@+id/til_login_email"
                app:layout_constraintVertical_chainStyle="packed">

                <android.support.design.widget.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/login_password"
                    android:imeOptions="actionDone"
                    android:inputType="textPassword"
                    android:singleLine="true"
                    android:text="@={vm.passwordField}"
                    android:textColor="@color/colorPrimaryText" />
            </android.support.design.widget.TextInputLayout>

            <Button
                android:id="@+id/btn_login_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                android:layout_marginTop="48dp"
                android:onClick="@{vm::login}"
                android:text="@string/login_btn_text"
                android:textColor="@color/colorWhite"
                app:layout_constraintBottom_toTopOf="@+id/textview_login_forgot_password"
                app:layout_constraintTop_toBottomOf="@+id/til_login_password"
                app:layout_constraintVertical_chainStyle="packed" />

            <TextView
                android:id="@+id/textview_login_forgot_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                android:layout_marginTop="36dp"
                android:gravity="center"
                android:text="@string/login_forgot_password"
                app:layout_constraintBottom_toTopOf="@+id/btn_login_register"
                app:layout_constraintTop_toBottomOf="@+id/btn_login_login"
                app:layout_constraintVertical_chainStyle="packed" />

            <Button
                android:id="@+id/btn_login_register"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                android:text="@string/login_sign_up"
                android:textColor="@color/colorWhite"
                app:layout_constraintBottom_toBottomOf="parent" />

            <ProgressBar
                android:id="@+id/progressBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="@{vm.progressVisibility}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </android.support.constraint.ConstraintLayout>
    </ScrollView>
</layout>

Se parece a esto:

Estoy buscando una solución que debería funcionar para API nivel 19+. No quiero agregar más jerarquía en mi diseño envolviendo Button o ProgressBar dentro de ViewGroup o menos.

Answer 1

Aquí está su solución API 19. Pone un CircularProgressDrawable en una superposición encima de su ConstraintLayout .

Esto es lo que parece:

Lo que tienes que hacer es:

1. Deshazte de la barra de ProgressBar XML.

2. Asigne un ID a su ConstraintLayout XML, por ejemplo:

   android:id="@+id/cl"

3. Agregue este código a su MainActivity:

   public class MainActivity extends AppCompatActivity implements View.OnClickListener {
       boolean toggle;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           final ConstraintLayout cl = findViewById(R.id.cl);
           cl.setOnClickListener(this);
       }
   
       @Override
       public void onClick(final View view) {
           toggle ^= true;
           if (toggle) {
               startProgress();
           } else {
               stopProgress();
           }
       }
   
       void startProgress() {
           final ConstraintLayout cl = findViewById(R.id.cl);
           final CircularProgressDrawable progressDrawable = new CircularProgressDrawable(this);
           progressDrawable.setColorSchemeColors(Color.MAGENTA);
           progressDrawable.setCenterRadius(50f);
           progressDrawable.setStrokeWidth(12f);
           progressDrawable.setStrokeCap(Paint.Cap.BUTT);
           cl.post(new Runnable() {
               @Override
               public void run() {
                   progressDrawable.setBounds(0, 0, cl.getWidth(), cl.getHeight());
                   cl.getOverlay().add(progressDrawable);
               }
           });
           progressDrawable.start();
       }
   
       void stopProgress() {
           final ConstraintLayout cl = findViewById(R.id.cl);
           final CircularProgressDrawable progressDrawable = new CircularProgressDrawable(this);
           progressDrawable.setColorSchemeColors(Color.MAGENTA);
           progressDrawable.setCenterRadius(50f);
           progressDrawable.setStrokeWidth(12f);
           progressDrawable.setStrokeCap(Paint.Cap.BUTT);
           cl.post(new Runnable() {
               @Override
               public void run() {
                   cl.getOverlay().clear();
               }
           });
           progressDrawable.stop();
       }
   }

Answer 2

Establecer una elevación en el ProgressBar 2dp parece funcionar.

android:elevation="2dp"

También puede intentar configurar la translationZ como se sugiere en la answer a una pregunta similar . Para mí, esto funciona en un emulador que ejecuta la API 17 y la barra de progreso apareció en la parte superior como se esperaba. Si recibe alguna advertencia, compruebe su versión de compilación.

Answer 3

Hay dos opciones, en cada caso, agrega un atributo a su etiqueta <ProgressBar/> . Es bien

android:translationZ="2dp"

o

android:elevation="2dp"

El nivel de API debe ser> = 21.

Answer 4

Otra forma fácil de resolver esto es cambiar el Button para View , cambiar el fondo y el tamaño. TextView con TextView para reemplazar el texto antiguo del Button y otra View para hacer clic más tarde

Answer 5

Puede probar una de estas opciones: 1. Agregue un diseño relativo fuera de su diseño como here

 <RelativeLayout
   android:id="@+id/relativelayout_progress"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:visibility="gone"
   android:background="#aa000022" >

   <ProgressBar 
       android:layout_centerInParent="true"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:indeterminateOnly="true" />

</RelativeLayout>

2. Agregue una vista de superposición en onCreate de su actividad como se describe aquí.

Answer 6

Puedes lograr tu objetivo configurando la traducción Z para la vista.

Coloque este método en una clase auxiliar (por ejemplo: UIUtils ) y utilícelo para su vista:

/**
 * Set the ''Z'' translation for a view
 *
 * @param view         {@link View} to set ''Z'' translation for
 * @param translationZ ''Z'' translation as float
 */
public static void setTranslationZ(View view, float translationZ) {
    ViewCompat.setTranslationZ(view, translationZ);
}

USO:

UIUTils.setTranslationZ(YOUR_VIEW, 5);

Answer 7

Quiero ofrecerle una alternativa a la solución XML.
También puede agregar una vista programáticamente a su vista raíz. ( ConstraintLayout )

ViewGroupOverlay es una capa adicional que se encuentra sobre un ViewGroup (la "vista de host") que se dibuja después del resto del contenido de esa vista (incluidos los elementos secundarios del grupo de vistas). La interacción con la capa de superposición se realiza agregando y eliminando vistas y elementos dibujables.

<android.support.constraint.ConstraintLayout
            android:id="@+id/root_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/default_view_margin_bottom_8dp">

Si hace referencia a la raíz en su código, puede agregar su ProgressBar .
Algo como esto:

rootLayout.overlay.add(ProgressBar(context).apply {
    measure(View.MeasureSpec.makeMeasureSpec(100, View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(100, View.MeasureSpec.EXACTLY))
    layout(0, 0, 100, 100)
})

También puede consultar este link para obtener información adicional.
Y esta pregunta SO también puede ayudar.

Answer 8

Si desea superponer al 100% la vista de destino, restrinja todos los lados de la vista de superposición a los lados correspondientes de la vista de destino y establezca la altura y el ancho de la vista de superposición a 0dp como lo siguiente:

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/animation_view"
        app:layout_constraintLeft_toLeftOf="@id/animation_view"
        app:layout_constraintRight_toRightOf="@id/animation_view"
        app:layout_constraintTop_toTopOf="@id/animation_view"/>

Aquí hay un ejemplo de trabajo. En la siguiente imagen, una malla roja se coloca sobre una imagen. El XML sigue la imagen.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/animation_view"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#AAFF0000"
        app:layout_constraintBottom_toBottomOf="@id/animation_view"
        app:layout_constraintLeft_toLeftOf="@id/animation_view"
        app:layout_constraintRight_toRightOf="@id/animation_view"
        app:layout_constraintTop_toTopOf="@id/animation_view" />
</android.support.constraint.ConstraintLayout>

Consulte la documentation de ConstraintLayout para obtener más información.