Bottom Navigation is not pinning to bottom inside fragment view

Question

Helo every one. I want to create a fragment that contains a bottom navigation bar. Bottom navigation is working but seeming wrong place in my fragment layout. An also this codes are working so good in activity but not in fragment.

Here is my fragment that I wanted to show bottom navigation bar.

class ParametreIslemlerFragment:Fragment() {

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    super.onCreateView(inflater, container, savedInstanceState);
    val mContext: Context = activity!!.applicationContext;
    val view:View = inflater.inflate(R.layout.fragment_parametre_islemler,container,false);
    val navBottomMenu:CurvedBottomNavigationView = view.findViewById(R.id.parametreBottomNavigation);
    initNavBottomPreferences(navBottomMenu);

    //fragmentManager?.beginTransaction()?.replace(R.id.parametreFragmentTutucu,FragmentBirinci())?.commit();

    navBottomMenu.setOnNavigationItemSelectedListener { menuItem ->

        true;
    }

    return view;
}

private fun initNavBottomPreferences(navBottomMenu:CurvedBottomNavigationView){
    navBottomMenu.inflateMenu(R.menu.parametre_menu_nav_items);
    navBottomMenu.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_LABELED;
    navBottomMenu.menu.getItem(1).isVisible = false;
}

}

This fragment uses above layout;

 <?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:id="@+id/parametreFragmentTutucu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="30dp"
    app:layout_constraintBottom_toTopOf="@+id/parametreBottomNavigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</FrameLayout>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/floatingActionButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    app:layout_constraintEnd_toEndOf="parent"
    android:backgroundTint="@color/colorAccent"
    android:layout_marginTop="1dp"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/parametreFragmentTutucu"
    app:srcCompat="@drawable/ic_add_24dp" />

<com.mesutemre.kutuphanesistemi.customcomponents.CurvedBottomNavigationView
    android:id="@+id/parametreBottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

</com.mesutemre.kutuphanesistemi.customcomponents.CurvedBottomNavigationView>

</androidx.constraintlayout.widget.ConstraintLayout>

CurvedBottomNavigation is a custom view and extends BottomNavigationView. When I run these codes ;

The codes are working in activity , why don't seems like activity layout in fragment?

Source code of CurvedBottomNavigationView is ;

  class CurvedBottomNavigationView(context: Context, attrs: 
   AttributeSet) 
 :BottomNavigationView(context, attrs) {

private lateinit var mPath: Path;
private lateinit var mPaint: Paint;

private val CURVE_CIRCLE_RADIUS = 110 / 2;

private var mFirstCurveStartPoint: Point = Point();
private var mFirstCurveEndPoint: Point = Point();
private var mFirstCurveControlPoint1: Point = Point();
private var mFirstCurveControlPoint2: Point = Point();

private var mSecondCurveStartPoint: Point = Point();
private var mSecondCurveEndPoint: Point = Point();
private var mSecondCurveControlPoint1: Point = Point();
private var mSecondCurveControlPoint2: Point = Point();

private var mNavigationBarWidth: Int = 0;
private var mNavigationBarHeight: Int = 0;

init {
    this.init();
}

private fun init(): Unit {
    mPath = Path();
    mPaint = Paint();
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    val colors = IntArray(3);
    colors[0] = ContextCompat.getColor(
        context,
        R.color.bottom_start_color
    );
    colors[1] = ContextCompat.getColor(
        context,
        R.color.bottom_center_color
    );
    colors[2] = ContextCompat.getColor(
        context,
        R.color.bottom_end_color
    );

    val positions = FloatArray(3); //floatArrayOf(0f, 0.3f, 0.6f);
    positions[0] = 0f;
    positions[1] = 0.2f;
    positions[2] = 0.4f;
    mPaint.setShader(
        LinearGradient(
            0f, 0f, measuredWidth.toFloat(), 0f,
            colors,
            positions,
            Shader.TileMode.CLAMP
        )
    );

    mPaint.setShader(
        LinearGradient(
            0f, 0f, 0f, 250f,
            colors, positions,
            Shader.TileMode.MIRROR
        )
    );
    //mPaint.setColor(ContextCompat.getColor(getContext(), R.color.primaryTextColor));
    setBackgroundColor(Color.TRANSPARENT);
    //background = resources.getDrawable(R.drawable.nav_bottom_background);
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh);

    mNavigationBarWidth = getWidth();
    mNavigationBarHeight = getHeight();

    mFirstCurveStartPoint.set(
        (mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3),
        0
    );
    mFirstCurveEndPoint.set(
        mNavigationBarWidth / 2,
        CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)
    );
    // same thing for the second curve
    mSecondCurveStartPoint = mFirstCurveEndPoint;
    mSecondCurveEndPoint.set(
        (mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3),
        0
    );

    mFirstCurveControlPoint1.set(
        mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4),
        mFirstCurveStartPoint.y
    );
    // the coordinates (x,y)  of the 2nd control point on a cubic curve
    mFirstCurveControlPoint2.set(
        mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS,
        mFirstCurveEndPoint.y
    );

    mSecondCurveControlPoint1.set(
        mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS,
        mSecondCurveStartPoint.y
    );
    mSecondCurveControlPoint2.set(
        mSecondCurveEndPoint.x - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)),
        mSecondCurveEndPoint.y
    );

    mPath.reset();
    mPath.moveTo(0F, 0F);
    mPath.lineTo(mFirstCurveStartPoint.x.toFloat(), mFirstCurveStartPoint.y.toFloat());

    mPath.cubicTo(
        mFirstCurveControlPoint1.x.toFloat(), mFirstCurveControlPoint1.y.toFloat(),
        mFirstCurveControlPoint2.x.toFloat(), mFirstCurveControlPoint2.y.toFloat(),
        mFirstCurveEndPoint.x.toFloat(), mFirstCurveEndPoint.y.toFloat()
    );
    mPath.cubicTo(
        mSecondCurveControlPoint1.x.toFloat(), mSecondCurveControlPoint1.y.toFloat(),
        mSecondCurveControlPoint2.x.toFloat(), mSecondCurveControlPoint2.y.toFloat(),
        mSecondCurveEndPoint.x.toFloat(), mSecondCurveEndPoint.y.toFloat()
    );

    mPath.lineTo(mNavigationBarWidth.toFloat(), 0F);
    mPath.lineTo(mNavigationBarWidth.toFloat(), mNavigationBarHeight.toFloat());
    mPath.lineTo(0F, mNavigationBarHeight.toFloat());
    mPath.close();
}

override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
}


@SuppressLint("ResourceAsColor")
override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas);
    canvas?.drawPath(mPath, mPaint);
}

}

Can you provide source code of custom nav view - CurvedBottomNavigationView — Rustam Samandarov, Nov 08 '20 at 21:14
You are using wrong constructor. Why not extend via @JvmOverloads? — Rustam Samandarov, Nov 09 '20 at 08:00
Hi, please check FrameLayout in your Main Drawer activity .xml file is having height and width match_parent or not, for ex. — piyushpk, Nov 09 '20 at 08:02
Hi @piyushpk. I checked it. main framelayout is match_parent both of height and width. — emreturka, Nov 09 '20 at 08:12

score 0 · Answer 1 · answered Nov 09 '20 at 08:03

You are ignoring attributes and def styles. Extend view classes with @JvmOverloads annotation

class CurvedBottomNavigationView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : BottomNavigationView(context, attrs, defStyleAttr) {

// custom class body
}

Bottom Navigation is not pinning to bottom inside fragment view

1 Answers1