Home > Net >  Floating Action Button not visible over Mapbox Android
Floating Action Button not visible over Mapbox Android

Time:01-18

It has been a while since I have developed an Android app. So current dev work is pretty new for me. I am trying to create a Mapbox Android API based app. So far I have successfully loaded User location and move camera based on location change; however, the FAB I have added on the layout is not showing up in either emulator or my phone. It is visible in the XML design view. I believe it might be due to the setContentView(mapView) in MapsActivity.kt which I don't know how is it not able to load the whole layout. Am I missing anything?

activity_maps.xml

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

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.mapbox.maps.MapView
        android:id="@ id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="40.7128"
        mapbox:mapbox_cameraTargetLng="-74.0060"
        mapbox:mapbox_cameraZoom="9.0">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@ id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:backgroundTint="@color/purple_200"
        android:layout_margin="16dp"
        android:contentDescription="@string/fab_description"
        android:src="@drawable/ic_plus_icon"
        tools:ignore="ImageContrastCheck" />
    </com.mapbox.maps.MapView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

MapsActivity.kt

package com.example.pinpoint

import android.Manifest
import android.content.pm.PackageManager
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.core.app.ActivityCompat
import com.example.pinpoint.com.example.pinpoint.LocationInitHelper

import com.example.pinpoint.com.example.pinpoint.LocationListeningCallback
import com.example.pinpoint.databinding.ActivityMapsBinding

import com.mapbox.android.core.location.LocationEngine
import com.mapbox.android.core.location.LocationEngineProvider
import com.mapbox.android.core.location.LocationEngineRequest
import com.mapbox.maps.CameraOptions
import com.mapbox.maps.MapView
import com.mapbox.maps.Style
import com.mapbox.maps.plugin.gestures.gestures
import com.mapbox.maps.plugin.locationcomponent.location

import java.lang.ref.WeakReference


class MapsActivity : AppCompatActivity() {

    private lateinit var mapView: MapView
    private lateinit var locationEngine: LocationEngine

    private val callback = LocationListeningCallback(this)
    private lateinit var locationPermissionHelper: LocationPermissionHelper
    private lateinit var locationInitHelper: LocationInitHelper

    private lateinit var binding: ActivityMapsBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMapsBinding.inflate(layoutInflater)
        mapView = MapView(binding.root.context)
        setContentView(mapView)
        locationInitHelper = LocationInitHelper(WeakReference(this))
        locationInitHelper.setMapView(mapView)
        mapView.getMapboxMap().loadStyleUri(Style.MAPBOX_STREETS)
        locationEngine = LocationEngineProvider.getBestLocationEngine(this)
        locationPermissionHelper = LocationPermissionHelper(WeakReference(this))
        onMapReady()
    }

    private fun onMapReady(){

        val DEFAULT_INTERVAL_IN_MILLISECONDS = 1000L
        val DEFAULT_MAX_WAIT_TIME = DEFAULT_INTERVAL_IN_MILLISECONDS * 5

        locationEngine = LocationEngineProvider.getBestLocationEngine(this)
        var request = LocationEngineRequest.Builder(DEFAULT_INTERVAL_IN_MILLISECONDS)
            .setPriority(LocationEngineRequest.PRIORITY_NO_POWER)
            .setMaxWaitTime(DEFAULT_MAX_WAIT_TIME)
            .build()

        if (ActivityCompat.checkSelfPermission(
                this,
                Manifest.permission.ACCESS_FINE_LOCATION
            ) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(
                this,
                Manifest.permission.ACCESS_COARSE_LOCATION
            ) != PackageManager.PERMISSION_GRANTED
        ) {
            locationPermissionHelper.checkPermissions { onMapReady() }
        }
        locationEngine.requestLocationUpdates(request, callback, mainLooper)
        locationEngine.getLastLocation(callback)
        mapView.getMapboxMap().setCamera(
            CameraOptions.Builder()
                .zoom(12.0)
                .build()
        )
        locationInitHelper.initLocationComponent()
        locationInitHelper.setupGesturesListener()
    }

    override fun onRequestPermissionsResult(
        requestCode: Int,
        permissions: Array<String>,
        grantResults: IntArray
    ) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.location
            .removeOnIndicatorBearingChangedListener(locationInitHelper.onIndicatorBearingChangedListener)
        mapView.location
            .removeOnIndicatorPositionChangedListener(locationInitHelper.onIndicatorPositionChangedListener)
        mapView.gestures.removeOnMoveListener(locationInitHelper.onMoveListener)
    }

    override fun onStop() {
        super.onStop()
        locationEngine.removeLocationUpdates(callback)
    }

}

CodePudding user response:

Try this

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <com.mapbox.maps.MapView
        android:id="@ id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="40.7128"
        mapbox:mapbox_cameraTargetLng="-74.0060"
        mapbox:mapbox_cameraZoom="9.0">
    </com.mapbox.maps.MapView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@ id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:backgroundTint="@color/purple_200"
        android:layout_margin="16dp"
        android:src="@drawable/ic_app_icon"
        android:tint="@color/white"
        tools:ignore="ImageContrastCheck" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

CodePudding user response:

Try declaring the floating action button outside the mapview like this:

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

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.mapbox.maps.MapView
        android:id="@ id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="40.7128"
        mapbox:mapbox_cameraTargetLng="-74.0060"
        mapbox:mapbox_cameraZoom="9.0"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@ id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:backgroundTint="@color/purple_200"
        android:layout_margin="16dp"
        android:contentDescription="@string/fab_description"
        android:src="@drawable/ic_plus_icon"
        tools:ignore="ImageContrastCheck" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
  • Related