Search code examples
androidandroid-fragmentsandroid-activitykotlinbottomnavigationview

Android - Fragment is "transparent", i'm able to click through it

I have a bottom navigation view which i implemented in my app. It has 3 icons:

Map Activity, Fragment A, Fragment B like so: enter image description here

This is what my MapsActivity looks like

So I've managed to display Fragment A and B. But it seems like i messed up somewhere in my xml with fragments (i'm new, so i'm still trying to wrap my head around the layouts for xmls), if i click at the top of the screen where the search bar is from the MapsActivity, the then search bar will appear like my fragment is "transparent", but you can't actually see the search bar on the fragment.

Here's what i mean: enter image description here How do i get my Fragments A and B to completely cover the activity below so that they are not "transparent"

activity_maps.xml

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

    <fragment
            android:id="@+id/place_autocomplete_fragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
    />
    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:id="@+id/map"
              tools:context=".MapsActivity"
              android:name="com.google.android.gms.maps.SupportMapFragment"
              android:layout_below="@id/place_autocomplete_fragment"
              android:layout_above="@id/bottom_navigation"
    />
    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            app:menu="@menu/bottom_nav_menu"
            android:background="@color/colorPrimaryDark"
            android:layout_width="match_parent"
            app:itemIconTint="@color/common_google_signin_btn_text_dark_default"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" android:layout_marginBottom="0dp"
            android:layout_alignParentLeft="true" android:layout_marginLeft="0dp"
            android:layout_alignParentStart="true" android:layout_marginStart="0dp"/>
</RelativeLayout>

fragment_a.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:background="@color/common_google_signin_btn_text_dark_pressed">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Fragment A"
            android:gravity="center_vertical|center_horizontal"/>

</LinearLayout>

I display my fragments like so in MapsActivity.kt.

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {
        private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener {item->
        when(item.itemId){
            R.id.nav_map -> {
                Log.d(TAG, "map pressed")
                // if there's a fragment, close it

                return@OnNavigationItemSelectedListener true
            }
            R.id.nav_A -> {
                Log.d(TAG, "fragment A pressed")
                replaceFragment(FragmentA())
                return@OnNavigationItemSelectedListener true
            }
            R.id.nav_B -> {
                Log.d(TAG, "fragment B pressed")
                replaceFragment(FragmentB())
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }    

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_maps)
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)

        val bottomNavigation: BottomNavigationView = findViewById(R.id.bottom_navigation)
        bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
}

    private fun replaceFragment(fragment: Fragment){
        val fragmentTransaction = supportFragmentManager.beginTransaction()

        fragmentTransaction.replace(R.id.fragmentContainer, fragment)
        fragmentTransaction.commit()
    }
...
...
}

Another issue i have which i'll solve after i fixed this current post's issue, but does anyone know how to close the current fragment when i click on the Maps Activity icon in the navigation bar?

Solution

  • Add a background to all the parent layouts of the fragments like this below 

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
     *like this     android:background="#fff"
                    android:orientation="vertical"
                    android:id="@+id/fragmentContainer">

        <fragment
                android:id="@+id/place_autocomplete_fragment"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
             android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
        />
        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:tools="http://schemas.android.com/tools"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:id="@+id/map"
                  tools:context=".MapsActivity"
                  android:name="com.google.android.gms.maps.SupportMapFragment"
                  android:layout_below="@id/place_autocomplete_fragment"
                  android:layout_above="@id/bottom_navigation"
        />
        <android.support.design.widget.BottomNavigationView
                android:id="@+id/bottom_navigation"
                app:menu="@menu/bottom_nav_menu"
                android:background="@color/colorPrimaryDark"
                android:layout_width="match_parent"
                app:itemIconTint="@color/common_google_signin_btn_text_dark_default"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true" android:layout_marginBottom="0dp"
                android:layout_alignParentLeft="true" android:layout_marginLeft="0dp"
                android:layout_alignParentStart="true" android:layout_marginStart="0dp"/>
    </RelativeLayout>

    this should work and another fix would be to add android:clickable="true" to the fragments view as this will make the fragment respond to clicks which might fix 'your click through' issue like this
    Fragment_a.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:clickable="true"
              android:orientation="vertical"
              android:background="@color/common_google_signin_btn_text_dark_pressed">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Fragment A"
            android:gravity="center_vertical|center_horizontal"/>

</LinearLayout>