CODEWITHSUNDEEP
androidandroid-fragmentsgoogle-places-apiandroid-support-librarysupportmapfragment
Davide3i
Davide3i

Reputation: 1053

Place Autocomplete in MapFragment: invisible on old APIs

After quite a lot of struggle, I managed to put a Place Autocomplete inside of my MapFragment. Still, there's a problem.

On my Android emulator (API 24), it's visible and I can use it:

EMULATOR

On my smartphone (API 19) I can't see it, apart for a little instant just before the map loads.

SMARTPHONE

My map_layout.xml is like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/map_fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="top"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        card_view:cardCornerRadius="4dp">
    </android.support.v7.widget.CardView>

</RelativeLayout>

The code inside of the MapFragment.java is this one:

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    // Initialise a new fragment inside of this one.
    mFragmentManager = getChildFragmentManager();
    mSupportMapFragment = (SupportMapFragment) mFragmentManager.findFragmentByTag("mapFragment");
    mSupportPlaceAutocompleteFragment = (SupportPlaceAutocompleteFragment) mFragmentManager.findFragmentByTag("autocompleteFragment");

    // Never inflate fragments inside other fragments in a layout.xml!
    // Do it programmatically.
    // See here for reference: http://stackoverflow.com/a/19815266/4938112.
    if (mSupportMapFragment == null) {
        mSupportMapFragment = new SupportMapFragment();
        mFragmentTransaction = mFragmentManager.beginTransaction();
        mFragmentTransaction.add(R.id.map_fragment_container, mSupportMapFragment, "mapFragment");
        mFragmentTransaction.commit();
        mFragmentManager.executePendingTransactions();
    }

    // Asynchronous thread to load map.
    mSupportMapFragment.getMapAsync(this);

    if (mSupportPlaceAutocompleteFragment == null) {
        mSupportPlaceAutocompleteFragment = new SupportPlaceAutocompleteFragment();
        mFragmentTransaction = mFragmentManager.beginTransaction();
        mFragmentTransaction.add(R.id.card_view, mSupportPlaceAutocompleteFragment, "autocompleteFragment");
        mFragmentTransaction.commit();
        mFragmentManager.executePendingTransactions();
    }

}

I've found out that if I just append the Place Autocomplete directly to the map_fragment_container, I'll be able to see it even on my smartphone, but it would have an invisible background.

Any hints?

Upvotes: 0

Views: 498

Answers (1)

tachyonflux
tachyonflux

Reputation: 20211

Just put both components inside a parent FrameLayout:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/map_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_gravity="top"
        android:layout_margin="@dimen/margin_1"
        android:layout_width="match_parent"
        android:layout_height="@dimen/card_view_height"
        card_view:cardCornerRadius="@dimen/card_corner_radius"/>

</FrameLayout>

Upvotes: 1

Related Questions