0

I am still a bit new to fragments in android studio but I was wondering if this is usually how fragments are displayed as on the phone. It appear as a grey background above my activity, as shown in this image: https://gyazo.com/9d5569718c5092debfeaab1c631b0046

This is my MainAppActivity code:

class MainAppActivity : AppCompatActivity() {

private lateinit var appBarConfiguration: AppBarConfiguration
private lateinit var binding: ActivityMainAppBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainAppBinding.inflate(layoutInflater)
    setContentView(binding.root)

    setSupportActionBar(binding.appBarMainApp.toolbar)

    binding.appBarMainApp.fab.setOnClickListener { view ->
        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
            .setAction("Action", null).show()
    }
    val drawerLayout: DrawerLayout = binding.drawerLayout
    val navView: NavigationView = binding.navView
    val navController = findNavController(R.id.nav_host_fragment_content_main_app)
    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    appBarConfiguration = AppBarConfiguration(
        setOf(
            R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow
        ), drawerLayout
    )
    setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)
}

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    // Inflate the menu; this adds items to the action bar if it is present.
    menuInflater.inflate(R.menu.main_app, menu)
    return true
}

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment_content_main_app)
    return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}

}

Any buttons or similar seems to also be affected by it. Is this normal or is it some sort of bug?

My content_main_app, this is my home set fragment:


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main_app">

    <fragment
        android:id="@+id/nav_host_fragment_content_main_app"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

Fragment 1:

class HomeFragment : Fragment() {

    private lateinit var binding: FragmentHomeBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment

        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false)
        return binding.root
    }

}

XML layout fragment 1:

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

<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".HomeFragment"
    android:background="@android:color/transparent"
    >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Fragment 2:

class HobbiesFragment : Fragment() {

    private var _binding: FragmentHobbiesBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val hobbiesViewModel =
            ViewModelProvider(this).get(GalleryViewModel::class.java)

        _binding = FragmentHobbiesBinding.inflate(inflater, container, false)
        val root: View = binding.root

        val textView: TextView = binding.mainTitle
        hobbiesViewModel.text.observe(viewLifecycleOwner) {
            textView.text = it
        }
        return root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

XML layout fragment 2:

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

<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/beige1"
    tools:context=".ui.Hobbies.HobbiesFragment">

    <!-- TODO: Update blank fragment layout -->

    <TextView
        android:id="@+id/mainTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HOBBIES"
        android:textColor="@color/blueMix"
        android:textSize="38sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.043" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.097"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mainTitle"
        app:layout_constraintVertical_bias="0.064" />

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Fragment 3:


class GalleryFragment : Fragment() {

    private var _binding: FragmentGalleryBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val galleryViewModel =
            ViewModelProvider(this).get(GalleryViewModel::class.java)

        _binding = FragmentGalleryBinding.inflate(inflater, container, false)
        val root: View = binding.root

        val textView: TextView = binding.textGallery
        galleryViewModel.text.observe(viewLifecycleOwner) {
            textView.text = it
        }
        return root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

XML layout fragment 3:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".ui.gallery.GalleryFragment">

    <TextView
        android:id="@+id/text_gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Josef M
  • 412
  • 2
  • 5
  • 20
  • Layout containers (like `LinearLayout` and `ConstraintLayout`) are usually transparent unless you set a background on them. You look like you have a semi-opaque area that's even overlaying the app bar, which isn't where your fragment should be. Post yr layout XMLs – cactustictacs Jun 20 '22 at 18:42
  • I updated my code to include the layout in xml. This is the first screen that appears. It does contain a navigation drawer as well! – Josef M Jun 20 '22 at 19:21
  • You should post your fragment's XML too (that's probably what has a background defined somewhere) but I think that `fragment` declaration should be a `FragmentContainerView` like here: https://developer.android.com/guide/navigation/navigation-getting-started#add-navhostfragment The idea with the container is the Navigation component swaps different `Fragment`s in and out of it as you navigate around the app. Also that `layout_behavior` might be causing the "drawing over the app bar" thing - and the recommended approach is to put a `Toolbar` right in the layout (see that link again) – cactustictacs Jun 20 '22 at 19:43
  • I added the 3 fragments as well as you suggested! I tried to change the – Josef M Jun 20 '22 at 20:07
  • yeah you'll probably need to fix some other stuff if you do that. Those aren't the layout XML files btw, so we can't see what properties you're setting on anything – cactustictacs Jun 20 '22 at 21:17
  • I posted now all 3 xml file layouts as well. Will try again to create a fragmentContainerView for mainAppActivity and see why it crashed when I launch the app. If you find anything on the xml files, please let me know! – Josef M Jun 21 '22 at 07:41
  • Update!! I managed to solve the problem by using your article about – Josef M Jun 21 '22 at 08:05
  • @cactustictacs I managed to solve the issue. Thanks anyway for the feedback, cheers! – Josef M Jun 21 '22 at 14:57

1 Answers1

0

After a few hours of messing around in android studio I finally found out what was giving me a grey background, covering the main fragment. I had to go into my main activity ( mainAppActivity in my case ) and delete the material divider (as seen in the image). It solved the problem for me.enter image description here

Josef M
  • 412
  • 2
  • 5
  • 20