Improve layout performance to prevent slow rendering and frozen frame for rarely used views

Question

My app have frozen frame and slow rendering issues.

This is my layout xml file named as activity_common.xml which is used by all of the Activities, has 2 views appUpdateText and startUpdateButton whose visibility is set to GONE and will be visible only when we want to let user know that there is an update and user need to download the update, so it is rarely used.

<?xml version="1.0" encoding="utf-8"?>

<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"
style="@style/container">



<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    style="@style/subContainer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        app:navigationIcon="@drawable/ic_left_arrow"
        app:titleTextAppearance="@style/ToolbarTitleTheme"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />

</com.google.android.material.appbar.AppBarLayout>

<TextView
    android:id="@+id/appUpdateText"
    style="@style/textContainer"
    android:textStyle="bold"
    android:textColor="@color/primaryTextColor"
    android:textSize="@dimen/largeText"
    android:gravity="center"
    android:padding="@dimen/margin_16"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/appBarLayout"
    app:layout_constraintBottom_toBottomOf="parent" />

<ActionButton
    android:id="@+id/startUpdateButton"
    style="@style/subContainer"
    app:actionButtonText="@string/update"
    app:actionButtonTextColor="@color/white"
    app:actionBackTint="@color/green_0B8040"
    android:paddingHorizontal="@dimen/margin_64"
    app:layout_constraintTop_toBottomOf="@id/appUpdateText"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

<ProgressView
    android:id="@+id/progressBarView"
    style="@style/textContainer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:elevation="@dimen/margin_8"
    tools:targetApi="lollipop" />

<androidx.constraintlayout.widget.Group
    android:id="@+id/updateGroup"
    style="@style/textContainer"
    android:visibility="gone"
    app:constraint_referenced_ids="appUpdateText,startUpdateButton" />

<FrameLayout
    android:id="@+id/frag_container"
    style="@style/container"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appBarLayout"
    app:layout_constraintBottom_toBottomOf="parent" />

<TextView
    android:id="@+id/message"
    android:textStyle="bold"
    android:padding="@dimen/margin_8"
    style="@style/subContainer.secondaryTextNew"
    android:gravity="center"
    android:layout_height="0dp"
    android:visibility="gone"
    android:text="@string/this_service_is_not_available_at_the_moment"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appBarLayout"
    app:layout_constraintBottom_toBottomOf="parent" /> 

    </androidx.constraintlayout.widget.ConstraintLayout>

What is the preferred way to have view like this.

Will delayed loading of views with ViewStub work here, what are my other option here?

Answer 1

if you have large icon or image used in this xml it may slow your UI to render and sometime lead to crash because of outOfMemoryException in low end devices, you can use layoutInspector tools of Android Studio and check your layout for more information.