Is there a way I can solve this glitch?

Question

I have included a fragment inside a fragment and it goes to fragment2 by the help of FAB.

But my app is showing glitch. The button isnt working in the apk and in the emulator it shows like shown in the picture, in a small box in righthand down corner.

emulator before pressing the button

Emulator after pressing the button

The code for my both fragments:

Fragment1:

@Suppress("DEPRECATION")
class IncomeFragment: Fragment(){

private lateinit var recyclerView: RecyclerView
private lateinit var incomeViewModel: IncomeViewModel
private lateinit var mAdapter: IncomeAdapter
private lateinit var addIncomeFab: FloatingActionButton

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_income, container, false)


}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    addIncomeFab = view.findViewById(R.id.incomeFab)
    addIncomeFab.setOnClickListener {

        val addBankFragment = AddBankFragment()
        val transaction =
            fragmentManager!!.beginTransaction()
        transaction.replace(R.id.linMain, addBankFragment)
        transaction.addToBackStack(null)

        transaction.commit()
    }

    recyclerView = view.findViewById(R.id.incomeRecyclerView)
    val layoutManager: RecyclerView.LayoutManager =
        LinearLayoutManager(activity, LinearLayoutManager.VERTICAL, false)
    recyclerView.layoutManager = layoutManager
    val dividerItemDecoration = DividerItemDecoration(activity, DividerItemDecoration.VERTICAL)
    recyclerView.addItemDecoration(dividerItemDecoration)

    mAdapter = IncomeAdapter()

    recyclerView.adapter = mAdapter

    incomeViewModel = ViewModelProviders.of(this).get(IncomeViewModel::class.java)

    IncomeViewModel.getIncomeEntitiesPagedList()
        .observe(viewLifecycleOwner, Observer<PagedList<IncomeEntity>> { incomeEntities ->
            if (incomeEntities == null || incomeEntities.size == 0) {
                IncomeViewModel.getIncomeEntitiesPagedList()
            }

            if (incomeEntities.size == 0) {
                incomeRelView.visibility = View.VISIBLE
            } else {
                incomeRelView.visibility = View.INVISIBLE
            }

            mAdapter.submitList(incomeEntities)
        })
    }
}

Fragment2:

@Suppress("DEPRECATION")
class AddBankFragment : Fragment() {

private lateinit var editBankName: EditText
private lateinit var editBankAc: EditText
private lateinit var editBankBalance: EditText
private lateinit var fabSave: FloatingActionButton
private lateinit var bankName: String
private lateinit var bankAc: String
private lateinit var bankBalance: String
private var getBankName:String = ""
private var getBankAc:String = ""
private var getBankBalance:String = ""
private lateinit var intent: Intent


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    arguments?.let {
        //columnCount = it.getInt
    }
}

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_add_bank, container, false)
}

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

    editBankName = view!!.findViewById(R.id.enter_bank)
    editBankAc = view!!.findViewById(R.id.edit_bank_ac)
    editBankBalance = view!!.findViewById(R.id.edit_bank_balance)
    fabSave = view!!.findViewById(R.id.fab_save)
    editTextListener()
    getCurrentDateAndTime()

    fabSave.setOnClickListener {

        if (!TextUtils.isEmpty(editBankName.text.toString()) && !TextUtils.isEmpty(
                editBankAc.text.toString()) && !TextUtils.isEmpty(
                editBankBalance.text.toString()
            )
        ) {
            !tilEnterBankName.isErrorEnabled
            !tilEnterBankAc.isErrorEnabled
            !tilEnterBankBalance.isErrorEnabled
            bankName = editBankName.text.toString()
            bankAc = editBankAc.text.toString()
            bankBalance = editBankBalance.text.toString()


            if(Companion.id ==0)
            {
                IncomeRepository.insertBankInDb(bankName, bankAc, bankBalance )
            }
            else{
                IncomeRepository.updateBankInDb(Companion.id,bankName, bankAc, bankBalance)

            }
            getActivity()?.finish()
        }
    }
}

private fun editTextListener() {
    editBankName.addTextChangedListener(textWatcher)
    editBankAc.addTextChangedListener(textWatcher)
    editBankBalance.addTextChangedListener(textWatcher)
}

var textWatcher = object : TextWatcher {
    override fun afterTextChanged(s: Editable?) {
        //Not required to check here
    }

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
        //Not required to check here
    }

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        validation()
    }
}

private fun validation() {
    if (TextUtils.isEmpty(editBankName.text.toString())) {
        tilEnterBankName.isErrorEnabled
        tilEnterBankName.error = getString(R.string.please_enter_bank)

    } else {
        !tilEnterBankName.isErrorEnabled
        tilEnterBankName.error = ""
    }

    if (TextUtils.isEmpty(editBankAc.text.toString())) {
        tilEnterBankAc.isErrorEnabled
        tilEnterBankAc.error = getString(R.string.please_enter_account_number)

    } else {
        !tilEnterBankAc.isErrorEnabled
        tilEnterBankAc.error = ""
    }

    if (TextUtils.isEmpty(editBankBalance.text.toString())) {
        tilEnterBankBalance.isErrorEnabled
        tilEnterBankBalance.error = getString(R.string.please_enter_account_balance)

    } else {
        !tilEnterBankBalance.isErrorEnabled
        tilEnterBankBalance.error = ""
    }
}

@SuppressLint("SimpleDateFormat")
private fun getCurrentDateAndTime(): String {
    var answer=""
    answer = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        val current = LocalDateTime.now()
        val formatter = DateTimeFormatter.ofPattern("dd.MM.yyyy. HH:mm:ss")
        current.format(formatter)
    } else {
        val date = Date()
        val formatter = SimpleDateFormat("MMM dd yyyy HH:mma")
        formatter.format(date)
    }
    return answer
}

The code for MainActivity

class MainActivity : AppCompatActivity() {

private lateinit var incomeBtn: ImageButton
private lateinit var dashboardBtn: ImageButton
private lateinit var expenseBtn: ImageButton


private lateinit var mViewPager: ViewPager
private lateinit var mPagerViewAdapter: PagerViewAdapter


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    //adding Fragment
    val incomeFragment = IncomeFragment()
    val fm: FragmentManager = supportFragmentManager

    fm.beginTransaction().add(R.id.linMain, incomeFragment).commit()


    mViewPager = findViewById(R.id.mViewPager)
    incomeBtn = findViewById(R.id.income_btn)
    dashboardBtn = findViewById(R.id.dashboard_btn)
    expenseBtn = findViewById(R.id.expense_btn)



    //onclick listener

    incomeBtn.setOnClickListener {
        mViewPager.currentItem = 0

    }

    dashboardBtn.setOnClickListener {

        mViewPager.currentItem = 1
    }

    expenseBtn.setOnClickListener {
        mViewPager.currentItem = 2
    }

    mPagerViewAdapter = PagerViewAdapter(supportFragmentManager)
    mViewPager.adapter = mPagerViewAdapter
    mViewPager.offscreenPageLimit = 3

    //add Page listener
    mViewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
        override fun onPageScrolled(
            position: Int,
            positionOffset: Float,
            positionOffsetPixels: Int
        ){

        }
        override fun onPageSelected(position: Int) {
            changeTabs(position)
        }

        override fun onPageScrollStateChanged(state: Int) {}
    })

    mViewPager.currentItem = 0
    dashboardBtn.setImageResource(R.drawable.ic_baseline_dashboard_blue)
}

private fun changeTabs(position: Int) {

    if (position == 0) {
        incomeBtn.setImageResource(R.drawable.ic_baseline_add_blue)
        dashboardBtn.setImageResource(R.drawable.ic_baseline_dashboard_24)
        expenseBtn.setImageResource(R.drawable.ic_baseline_minimize_24)
    }

    if (position == 1) {
        incomeBtn.setImageResource(R.drawable.ic_baseline_add_24)
        dashboardBtn.setImageResource(R.drawable.ic_baseline_dashboard_blue)
        expenseBtn.setImageResource(R.drawable.ic_baseline_minimize_24)
    }

    if (position == 2) {
        incomeBtn.setImageResource(R.drawable.ic_baseline_add_24)
        dashboardBtn.setImageResource(R.drawable.ic_baseline_dashboard_24)
        expenseBtn.setImageResource(R.drawable.ic_baseline_minimize_blue)
    }
}
}

Answer 1

Turn your code in MainActivity :

   fm.beginTransaction().add(R.id.linMain, incomeFragment).commit()

to

   fm.beginTransaction().replace(R.id.linMain, incomeFragment).commit()

And change every add function call to replace in your code.