Huawei Map as Popup using (Dialogs, Activities, Fragments) - Huawei Developers

Article Introduction
In this article we will show Huawei Map as popup in three different ways. By using Dialogs, separate Activity and separate Fragment. We can explore some of the restrictions and advantages of show Huawei Map as Popup in different methodologies.
Huawei Map Kit
Personalizing how your map displays and interacts with your users tailors their experience to them, not the other way around. Make location-based services work better for you so your app works better for your users.
1. Dialog
Using Dialog to show Huawei Map and mark user home address and return user coordinate and address for further processing.
Let’s begin with coding part without wasting more time.
Step 1: Dialog layout design
Design the layout for Huawei Map to display inside Dialog.
Code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".MainActivity"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:alpha="0.4"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="450dp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:background="@color/white"
android:orientation="vertical">
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="@+id/mapFragment"
android:name="com.huawei.hms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="16dp"
android:layout_weight="2"
map:cameraZoom="10"
map:cameraTargetLat="24.774265"
map:cameraTargetLng="46.738586"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_close_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="closeDialog"
android:text="Close" />
<Button
android:id="@+id/btn_save_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save"
android:onClick="saveDialogMap"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
How layout look like
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Step 2: Main Activity code to display Dialog
Implement OnMapReadyCallback and OnMapClickLisner
Code:
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, HuaweiMap.OnMapClickListener {}
Define some variables which we use later in the code
Code:
Dialog dialog;
private HuaweiMap hmap;
private SupportMapFragment mSupportMapFragment;
private Marker mMarker;
private LatLng myLocation;
private String myAddress;
Check code for onMapRead, onMapClick for add Marker, addMarker method and finally getUserAddress.
Code:
@Override
public void onMapReady(HuaweiMap huaweiMap) {
hmap = huaweiMap;
hmap.setOnMapClickListener(this);
}
@Override
public void onMapClick(LatLng latLng) {
myLocation = latLng;
addMyMarker(myLocation);
}
public void addMyMarker(LatLng myMapPosition) {
myAddress = getMyAddress(myMapPosition);
if(mMarker != null) mMarker.remove();
mMarker = hmap.addMarker(new MarkerOptions()
.position(myMapPosition)
.draggable(true)
.icon(BitmapDescriptorFactory.defaultMarker
(BitmapDescriptorFactory.HUE_RED))
.title(myAddress));
}
public String getMyAddress(LatLng latLng) {
Geocoder geo = new Geocoder(this, Locale.getDefault());
String myAddress = "";
try {
List<Address> addresses = geo.getFromLocation(latLng.latitude, latLng.longitude, 1);
if (addresses.size() > 0) {
String cityName = addresses.get(0).getAdminArea();
String countryName = this.getResources().getConfiguration().locale.getDisplayCountry();
String address = addresses.get(0).getAddressLine(0);
myAddress = address;
Log.i("Site_Result", "countryName: " + countryName + ", CITY : " + cityName + ", Address: " + address);
}
} catch (IOException e) {
Log.i("Site_Result", "Error");
e.printStackTrace();
}
return myAddress;
}
Lastly we can show Dialog when user click on button, can close the dialog and save user location coordinates / address data for further processing.
Code:
public void showMyDailog(){
if(dialog == null){
dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dailog_map_popup);
dialog.show();
Fragment fragment = getSupportFragmentManager().findFragmentById(R.id.mapFragment);
if (fragment instanceof SupportMapFragment) {
mSupportMapFragment = (SupportMapFragment) fragment;
mSupportMapFragment.getMapAsync(this);
}
} else {
dialog.show();
}
}
public void closeDialog(View v) {
if(dialog != null){
dialog.dismiss();
}
}
public void saveDialogMap(View v) {
if(myLocation != null && myAddress != null && dialog != null){
String text = "PopupType: Dialog \nLatitude: " +myLocation.latitude + " \nLongitude: " +myLocation.longitude+ " \nAddress: " + myAddress;
textViewAddress.setText(text);
dialog.dismiss();
}
}
Step 3: Launch the Dialog
You can result of launching of Huawei Map popup using Dialog.
Note: You have notice one issue, once user open the Dialog second time Huawei Map is becoming empty and not showing any data. To solve this issue developer can either user Activity way or Fragment way. Currently Huawei Team is working to this issue for fix Huawei Map not to be Empty on Dialog.
2. Activity
You need to make separate activity and launch the activity with theme which behaves like dialog window without any title. And return some data to parent activity when we save some user location data and address for further processing.
Let’s begin with coding part without wasting more time.
Step 1: Make new Activity (HuaweiMapPopupActivity)
We need to make new Activity to show Huawei Map.
Code:
public class HuaweiMapPopupActivity extends AppCompatActivity implements OnMapReadyCallback,
HuaweiMap.OnCameraMoveStartedListener, HuaweiMap.OnCameraMoveListener, HuaweiMap.OnCameraIdleListener,
HuaweiMap.OnMyLocationButtonClickListener, HuaweiMap.OnMapClickListener {
}
Step 2: Make new theme for Huawei to show as Dialog
Define new theme for dialog in styles.xml file.
Code:
<!-- AppDialog Huawei theme. -->
<style name="AppDialogHuaweiTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:dialogTitle">false</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:background">@android:color/transparent</item>
</style>
Step 3: Assign theme to Activity
Go into AndroidManifest.xml file and define the newly created theme style.
Code:
<activity
android:name=".HuaweiMapPopupActivity"
android:theme="@style/AppDialogHuaweiTheme"
android:title="" />
Step 4: Design Layout for Activity of Huawei Map
Check layout design for our Activity.
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="450dp"
android:layout_gravity="center_vertical"
android:orientation="vertical"
tools:context=".HuaweiMapPopupActivity">
<fragment
android:id="@+id/map"
android:name="com.huawei.hms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="16dp"
android:layout_weight="2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
>
<Button
android:id="@+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Close" />
<Button
android:id="@+id/btn_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
</LinearLayout>
</LinearLayout>
More details, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0204395191834640053