Hi, Android overlapping background fragment and inflate exception

Question

I want to create an activity that can switch between two fragments with different background. I can switch betwee both fragment with two buttons.

I have my Activity setup like this when I start my activity : cardEditor

My fragment is in green, the four button are not in the fragment. By default, my fragment set is addCardEditor. When I click the button "ajouter", the app is supposed to put the addCardEditor fragment. And when I click the button "Voir", I am supposed to see my second fragment wich is called viewCardEditor.

BUT when I start my activity, then when I push the "Voir" button, I have this

The background is still green without any button, but I have set the background to gray for my viewCardEditor fragment !

And when I push the "ajouter" button to have my addCardEditor displayed, it doesn't change anything ! I still have the exact same thing. If I push any button, it alwayws stay in this state ! Both of my fragment are overlap by this green background.

Then when I try to rotate the smartphone, I have an error :

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.jean.cartememoire/com.example.jean.cartememoire.CardEditor}: android.view.InflateException: Binary XML file line #65: Binary XML file line #65: Error inflating class fragment

I made research on stackoverflow and other website but I didn't found any solution to my problem. Thank you for helping me

My cardEditor activity and his xml :

package com.example.jean.cartememoire;

import android.support.v4.app.FragmentActivity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.view.View;

import layout.AddCardEditor;
import layout.ViewCardEditor;


public class CardEditor extends FragmentActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_card_editor);
}

public void switchFragment(View v)
{
    Fragment fg;
    FragmentManager fm;
    FragmentTransaction ft;
    if(v == findViewById(R.id.buttonAddCard))
    {
        fg = new AddCardEditor();
        fm = getSupportFragmentManager();

        ft = fm.beginTransaction();

        ft.replace(R.id.fragment_card_editor, fg);
        ft.commit();
    }
    if(v == findViewById(R.id.buttonViewCard))
    {
        fg = new ViewCardEditor();
        fm = getSupportFragmentManager();
        ft = fm.beginTransaction();
        ft.replace(R.id.fragment_card_editor, fg);
        ft.commit();
    }

}
}

Xml for cardEditor :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_card_editor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.jean.cartememoire.CardEditor"
    android:orientation="vertical"
    android:weightSum="1"
    android:background="@android:color/black">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:text="@string/modifier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonModCard"
            android:padding="0dp"
            android:paddingBottom="0dp"
            android:layout_weight="1"
            android:onClick="switchFragment"
            tools:ignore="ButtonStyle,RtlSymmetry" />

        <Button
            android:text="@string/supprimer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonDeleteCard"
            android:padding="0dp"
            android:paddingBottom="0dp"
            android:layout_weight="1"
            android:onClick="switchFragment"
            tools:ignore="ButtonStyle,RtlSymmetry" />

        <Button
            android:text="@string/voir"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonViewCard"
            android:onClick="switchFragment"
            tools:ignore="ButtonStyle" />

        <Button
            android:text="@string/ajouter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonAddCard"
            android:padding="0dp"
            android:paddingBottom="0dp"
            android:layout_marginLeft="12dp"
            android:layout_marginStart="12dp"
            android:layout_weight="1"
            android:onClick="switchFragment"
            tools:ignore="ButtonStyle,RtlSymmetry" />
    </LinearLayout>

    <fragment
        android:id="@+id/fragment_card_editor"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="0dp"
        android:layout_marginBottom="0dp"
        android:name="layout.AddCardEditor"
        tools:layout="@layout/fragment_view_card_editor" />

</LinearLayout>

Then there is my first Fragment :

package layout;



public class AddCardEditor extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    if (container != null) {
        container.removeAllViews();
    }
    return inflater.inflate(R.layout.fragment_add_card_editor, container, false);
}

}

with his xml :

<android.support.constraint.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="layout.AddCardEditor"
    android:background="@android:color/holo_green_light">

    <TextView
        android:text="@string/ajouter_une_carte"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView5"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:elevation="0dp"
        tools:ignore="UnusedAttribute"
        tools:layout_constraintTop_creator="1"
        android:layout_marginStart="129dp"
        android:layout_marginTop="16dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="129dp" />

    <TextView
        android:text="@string/difficult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView11"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="80dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:text="@string/th_me"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView8"
        tools:ignore="UnknownId"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/textView9"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="32dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintRight_toRightOf="@+id/textView9" />

    <TextView
        android:text="@string/question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView9"
        tools:ignore="MissingConstraints"
        tools:layout_constraintTop_creator="1"
        android:layout_marginTop="104dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="@string/r_ponse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView10"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:layout_width="279dp"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editTheme"
        tools:ignore="MissingConstraints"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/textView5"
        android:layout_marginStart="8dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toRightOf="@+id/textView9"
        android:layout_marginLeft="8dp" />

    <EditText
        android:layout_width="281dp"
        android:layout_height="126dp"
        android:inputType="textMultiLine"
        android:ems="10"
        android:id="@+id/editQuestion"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="@+id/textView9"
        app:layout_constraintLeft_toRightOf="@+id/textView8"
        android:layout_marginLeft="8dp" />

    <EditText
        android:layout_width="281dp"
        android:layout_height="136dp"
        android:inputType="textMultiLine"
        android:ems="10"
        android:id="@+id/editReponse"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@+id/editQuestion"
        app:layout_constraintLeft_toLeftOf="@+id/editQuestion" />

    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ratingBar"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/editReponse"
        app:layout_constraintLeft_toLeftOf="@+id/editReponse" />

</android.support.constraint.ConstraintLayout>

Then the second fragment :

package layout;

public class ViewCardEditor extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    if (container != null) {
        container.removeAllViews();
    }

    return inflater.inflate(R.layout.fragment_view_card_editor, container, false);
}


}

with his xml :

<FrameLayout 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="layout.ViewCardEditor"
    android:background="@android:color/darker_gray" />

PS : I put Hi in my title because I could not add Hi in the start of my post, so weird... and sorry for bad english

Answer 1

I want to create an activity that can switch between two fragments with different background.

If by "switch" you mean adding/removing fragments, then none of these fragments can be part of your XML layout - in general you can consider XML based structure as (kind of) read-only. So in your project you need to replace your <Fragment> by view group container, i.e. <FrameLayout>, then instantiate your Fragments from code at runtime and add to said container. And since these fragments were not part of the XML, you will be able to remove them (or replace) later w/o any problems.