why adding support map fragment xml will slow down my fragment to show?

Question

I have a constraint layout inside a scroll view. and inside that constraint layout I have a support map fragment.

I am trying to find what makes my app render slowly. it takes around 1.5 second to show a fragment that contains a map (support map fragment). I mean, when I replace fragment A to fragment B (that has map) it will takes too long, after 1-2 second, then the fragment B will appear on the screen.

here is my xml

<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:background="@android:color/white" android:id="@+id/scrollView_event_detail">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:context=".Fragments.Reusable.EventDetailFragment"
            android:id="@+id/constraintLayout_event_detail_destination">


        <ImageView
                android:layout_width="0dp"
                android:layout_height="0dp" tools:src="@tools:sample/backgrounds/scenic[12]"
                android:id="@+id/imageView_event_detail_blurred_poster"
                app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:scaleType="centerCrop" app:layout_constraintDimensionRatio="1:1"/>
        <ImageView
                android:layout_width="0dp"
                android:layout_height="0dp" tools:src="@tools:sample/backgrounds/scenic[12]"
                android:id="@+id/imageView_event_detail_poster"
                app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintDimensionRatio="1:1"
                android:scaleType="fitCenter"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content" android:id="@+id/textView_event_detail_event_title"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@+id/imageView_event_detail_blurred_poster"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp" android:maxLines="2"
                android:textSize="18sp" tools:text="Kajian Bulanan: Memahami Adab Para Penuntut Ilmu"/>

        <View
                android:layout_width="0dp"
                android:layout_height="0.5dp" android:id="@+id/line1_view_event_detail" android:background="#696C79"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_event_title"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"/>
        <Button
                android:text="Hadir"
                android:layout_width="0dp"
                android:layout_height="50dp" android:id="@+id/button_search_event_search"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@+id/line1_view_event_detail"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                android:background="@drawable/rounded_button"
                android:textColor="#ffffff"/>

        <View
                android:layout_width="0dp"
                android:layout_height="0.5dp" android:id="@+id/line2_view_event_detail" android:background="#696C79"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@+id/button_search_event_search"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"/>

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_date_time"
                android:id="@+id/imageView_event_detail_icon_dateTime"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="16dp"
                app:layout_constraintTop_toBottomOf="@+id/line2_view_event_detail" android:layout_marginTop="16dp"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_date_label"
                app:layout_constraintTop_toTopOf="@+id/imageView_event_detail_icon_dateTime"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_event_detail_icon_dateTime"
                app:layout_constraintStart_toEndOf="@+id/imageView_event_detail_icon_dateTime"
                android:layout_marginStart="8dp" app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="16dp" tools:text="Selasa, 23 Desember 2018 - Rabu, 24 Desember 2018"
                android:maxLines="1"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_time_label"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_date_label"
                app:layout_constraintStart_toStartOf="@+id/textView_event_detail_date_label"
                tools:text="17.00 - 21.00 WIB"
                android:maxLines="1"
                android:layout_marginTop="4dp" android:layout_marginEnd="16dp"
                app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_place"
                android:id="@+id/imageView_event_detail_icon_address"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="16dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_time_label"
                android:layout_marginTop="16dp"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_venue_label"
                app:layout_constraintTop_toTopOf="@+id/imageView_event_detail_icon_address"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_event_detail_icon_address"
                app:layout_constraintStart_toEndOf="@+id/imageView_event_detail_icon_address"
                android:layout_marginStart="8dp" app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="16dp" tools:text="Universitas Gadjah Mada"
                android:maxLines="1"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_address_label"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_venue_label"
                app:layout_constraintStart_toStartOf="@+id/textView_event_detail_venue_label"
                tools:text="Jalan Grafika no.1. Sinduadi Sleman. Yogyakarta"
                android:maxLines="1"
                android:layout_marginTop="4dp" android:layout_marginEnd="16dp"
                app:layout_constraintEnd_toEndOf="parent"/>

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_person"
                android:id="@+id/imageView_event_detail_icon_speaker"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="16dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_address_label" android:layout_marginTop="16dp"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_speaker_label"
                app:layout_constraintTop_toTopOf="@+id/imageView_event_detail_icon_speaker"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_event_detail_icon_speaker"
                app:layout_constraintStart_toEndOf="@+id/imageView_event_detail_icon_speaker"
                android:layout_marginStart="8dp" app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="16dp" tools:text="Pembicara: Ustadz Khalid Basalamah"
                android:maxLines="1"/>

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_monetization"
                android:id="@+id/imageView_event_detail_icon_price"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="16dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_speaker_label"
                android:layout_marginTop="16dp"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_price_label"
                app:layout_constraintTop_toTopOf="@+id/imageView_event_detail_icon_price"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_event_detail_icon_price"
                app:layout_constraintStart_toEndOf="@+id/imageView_event_detail_icon_price"
                android:layout_marginStart="8dp" app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="16dp" tools:text="Rp 50.000"
                android:maxLines="1"/>

        <View
                android:layout_width="0dp"
                android:layout_height="0.5dp" android:id="@+id/line3_view_event_detail" android:background="#696C79"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_price_label"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"/>

        <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_description_snippet_label"
                app:layout_constraintTop_toTopOf="@+id/line3_view_event_detail"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="16dp"
                android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="16dp" tools:text="Kajian akan membahas kitab Riyadush Shalihin Bab 3"
                android:maxLines="2"/>

        <TextView
                android:text="Baca Selengkapnya"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView_button_read_more"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_description_snippet_label"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="16dp"
                android:layout_marginStart="16dp"
                android:clickable="true"
                android:focusable="true" android:textColor="#2196F3"/>

        <View
                android:layout_width="0dp"
                android:layout_height="0.5dp" android:id="@+id/line4_view_event_detail" android:background="#696C79"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_button_read_more"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"/>

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:tools="http://schemas.android.com/tools"
                  android:layout_width="0dp"
                  android:layout_height="180dp"
                  android:id="@+id/map_event_detail"
                  tools:context=".Activities.MainActivity"
                  android:name="com.google.android.gms.maps.SupportMapFragment"
                  android:layout_marginTop="24dp"
                  app:layout_constraintTop_toBottomOf="@+id/line4_view_event_detail"
                  android:layout_marginStart="16dp"
                  app:layout_constraintStart_toStartOf="parent"
                  android:layout_marginEnd="16dp"
                  app:layout_constraintEnd_toEndOf="parent"/>

        <TextView
                android:text="Peta Ke Lokasi"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView_button_map_more"
                app:layout_constraintTop_toBottomOf="@+id/map_event_detail"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="16dp"
                android:layout_marginStart="16dp"
                android:clickable="true"
                android:focusable="true" android:textColor="#2196F3"/>

        <View
                android:layout_width="0dp"
                android:layout_height="0.5dp" android:id="@+id/line5_view_event_detail" android:background="#696C79"
                android:layout_marginTop="24dp"
                app:layout_constraintTop_toBottomOf="@+id/textView_button_map_more"
                app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"/>

        <TextView
                android:text="Penyelenggara"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_organizer_tag"
                app:layout_constraintTop_toBottomOf="@+id/line5_view_event_detail"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="16dp"
                android:layout_marginStart="16dp"/>

        <TextView
                android:text="Masjid Nurul Iman"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView_event_detail_organizer_label"
                app:layout_constraintTop_toBottomOf="@+id/textView_event_detail_organizer_tag"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginTop="16dp"
                android:layout_marginStart="16dp"/>




    </androidx.constraintlayout.widget.ConstraintLayout>

I have tried to comment out all codes in my onCreateView. so this fragment will do nothing. and still, my app render slowly when showing this fragment.

but when I try to remove support map fragment from my xml, I mean this part:

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:tools="http://schemas.android.com/tools"
                  android:layout_width="0dp"
                  android:layout_height="180dp"
                  android:id="@+id/map_event_detail"
                  tools:context=".Activities.MainActivity"
                  android:name="com.google.android.gms.maps.SupportMapFragment"
                  android:layout_marginTop="24dp"
                  app:layout_constraintTop_toBottomOf="@+id/line4_view_event_detail"
                  android:layout_marginStart="16dp"
                  app:layout_constraintStart_toStartOf="parent"
                  android:layout_marginEnd="16dp"
                  app:layout_constraintEnd_toEndOf="parent"/>

it will make my app render faster. so why this is happened or is it any alternatives to solve this ?

I mean, to show a map in the constraint layout inside a scroll view ?

here is my code:

class EventDetailFragment : Fragment() {

    lateinit var titleTextView: TextView
    lateinit var fragmentView : View
    lateinit var eventPosterImageView : ImageView
    lateinit var eventBlurredPosterImageView: ImageView
    lateinit var eventTitleTextView : TextView
    lateinit var attendanceButton: Button
    lateinit var dateTextView: TextView
    lateinit var timeTextView  : TextView
    lateinit var venueTextView: TextView
    lateinit var addressTextView: TextView
    lateinit var speakerTextView: TextView
    lateinit var priceTextView: TextView
    lateinit var descriptionSnippetTextView: TextView
    lateinit var readMoreTextViewButton : TextView
    lateinit var mapMoreTextViewButton : TextView
    lateinit var organizerTagTextView: TextView
    lateinit var organizerLabelTextView: TextView

    lateinit var mapFragment : SupportMapFragment
    lateinit var googleMap: GoogleMap

    lateinit var mContext : Context
    lateinit var mActivity : FragmentActivity

    lateinit var selectedEvent : Event


    override fun onAttach(context: Context) {
        super.onAttach(context)

        mContext = context
        activity?.let { mActivity = it }

    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        fragmentView = inflater.inflate(R.layout.fragment_event_detail, container, false)
//        setUpViewsDeclaration()
//        setUpSafeArg()
//        setUpListeners()
//        updateUI()


        return fragmentView
    }


    private fun setUpViewsDeclaration() {
        titleTextView = mActivity.findViewById(R.id.destination_label_text_view)
        eventPosterImageView = fragmentView.findViewById(R.id.imageView_event_detail_poster)
        eventBlurredPosterImageView = fragmentView.findViewById(R.id.imageView_event_detail_blurred_poster)
        eventTitleTextView = fragmentView.findViewById(R.id.textView_event_detail_event_title)
        attendanceButton = fragmentView.findViewById(R.id.button_search_event_search)
        dateTextView = fragmentView.findViewById(R.id.textView_event_detail_date_label)
        timeTextView = fragmentView.findViewById(R.id.textView_event_detail_time_label)
        venueTextView = fragmentView.findViewById(R.id.textView_event_detail_venue_label)
        addressTextView = fragmentView.findViewById(R.id.textView_event_detail_address_label)
        speakerTextView = fragmentView.findViewById(R.id.textView_event_detail_speaker_label)
        priceTextView = fragmentView.findViewById(R.id.textView_event_detail_price_label)
        descriptionSnippetTextView = fragmentView.findViewById(R.id.textView_event_detail_description_snippet_label)
        readMoreTextViewButton = fragmentView.findViewById(R.id.textView_button_read_more)
        organizerTagTextView = fragmentView.findViewById(R.id.textView_event_detail_organizer_tag)
        organizerLabelTextView = fragmentView.findViewById(R.id.textView_event_detail_organizer_label)
        mapMoreTextViewButton = fragmentView.findViewById(R.id.textView_button_map_more)




    }


    private fun setUpSafeArg() {
        arguments?.let {
            val args = EventDetailFragmentArgs.fromBundle(it)
            selectedEvent = args.selectedEvent
        }
    }

    private fun setUpListeners() {

        eventPosterImageView.setOnClickListener {
            val photoViewNavigation = EventDetailFragmentDirections.actionGlobalPhotoViewFragment(selectedEvent.posterDownloadPath)
            Navigation.findNavController(fragmentView).navigate(photoViewNavigation)
        }

        eventBlurredPosterImageView.setOnClickListener {
            val photoViewNavigation = EventDetailFragmentDirections.actionGlobalPhotoViewFragment(selectedEvent.posterDownloadPath)
            Navigation.findNavController(fragmentView).navigate(photoViewNavigation)
        }

        readMoreTextViewButton.setOnClickListener {
            val nextDestination = EventDetailFragmentDirections.actionToDescriptionDetail(selectedEvent.description)
            Navigation.findNavController(fragmentView).navigate(nextDestination)
        }

        mapMoreTextViewButton.setOnClickListener {

            val latitudeFloat = selectedEvent.coordinate.latitude.toFloat()
            val longitudeFloat = selectedEvent.coordinate.longitude.toFloat()

            val mapDetailDestination = EventDetailFragmentDirections.actionToMapDetailLocation(latitudeFloat,longitudeFloat)
            Navigation.findNavController(fragmentView).navigate(mapDetailDestination)

        }


    }

    private fun updateUI() {

        Picasso.get()
            .load(selectedEvent.posterDownloadPath)
            .into(eventPosterImageView)

        Picasso.get()
            .load(selectedEvent.posterDownloadPath)
            .transform(BlurTransformation(mContext,25,3))
            .into(eventBlurredPosterImageView)

        eventTitleTextView.text = selectedEvent.title

        val dateStartingDate = DateTimeService.changeDateToString("EEEE, d MMMM yyyy",selectedEvent.dateTimeStart)
        val timeStartingDate = DateTimeService.changeDateToString("HH:mm",selectedEvent.dateTimeStart)

        val dateEndingDate = DateTimeService.changeDateToString("EEEE, d MMMM yyyy",selectedEvent.dateTimeFinish)
        val timeEndingDate = DateTimeService.changeDateToString("HH:mm zzz",selectedEvent.dateTimeFinish)

        dateTextView.text = dateStartingDate
        timeTextView.text = "$timeStartingDate - $timeEndingDate"
        venueTextView.text = selectedEvent.venue
        addressTextView.text = selectedEvent.address
        speakerTextView.text = "Penceramah: ${selectedEvent.speaker}"
        organizerLabelTextView.text = selectedEvent.creatorFullName
        descriptionSnippetTextView.text = selectedEvent.description



        setUpGoogleMap()


    }

    private fun setUpGoogleMap() {

        mapFragment = childFragmentManager.findFragmentById(R.id.map_event_detail) as SupportMapFragment

        mapFragment.getMapAsync {

            googleMap = it

            val eventLocation = LatLng(selectedEvent.coordinate.latitude,selectedEvent.coordinate.longitude)
            googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(eventLocation,16f))
            googleMap.addMarker(MarkerOptions().position(eventLocation).title("Lokasi Acara")).showInfoWindow()


            googleMap.setOnMapClickListener {

                val latitudeFloat = selectedEvent.coordinate.latitude.toFloat()
                val longitudeFloat = selectedEvent.coordinate.longitude.toFloat()

                val mapDetailDestination = EventDetailFragmentDirections.actionToMapDetailLocation(latitudeFloat,longitudeFloat)
                Navigation.findNavController(fragmentView).navigate(mapDetailDestination)

            }
        }

    }


}

Answer 1

I would suggest the use of MapView instead of the SupportMapFragment as you would have better control over the lifecycle of the map.

I think that you're unable to replace the fragment out since SupportMapFragment integrates the Map's lifecycle with the Activity and you're unable to replace it until the Map has completed loading.

MapView will give you better control over your map as you should be able to get your fragment replaced even if the map hasn't loaded

Check out this answer ( explains the difference better than me ) :- Differences between MapView, MapFrament and SupportMapFragment

Answer 2

you have to much widget and element to show , i think you are facing a jank , from the official documentation

UI Rendering is the act of generating a frame from your app and displaying it on the screen. To ensure that a user's interaction with your app is smooth, your app should render frames in under 16ms to achieve 60 frames per second (why 60fps?). If your app suffers from slow UI rendering, then the system is forced to skip frames and the user will perceive stuttering in your app. We call this jank.

i advice to read carefully the documentation to get better understanding of how to make UI smooth