I'm really confused about how can I implement the navigation sidebar in my app, yet I already tried it but it conflicts and it tears down my design XML if I've implemented it. The conflict is when I change my constraintLayout to DrawLayout under activity_main my design will tear down but when implementing navigation sidebar I need to use DrawLayout instead of ConstraintLayout
Fist Image is the main XML the normal UI , the Second image describes the output when I tried to change my constraintlayout to drawerlayout in my activity main, some design didn't showed up, but the navigation sidebar works well like in the Third image. The question is it is possible to use constraintlayout instead of drawerlayout ? to avoid tearing down the UI design? or maybe there is other way to view the design using drawerLayout.
Activitymain.xml This is what I used in second Image using drawerlayout The navigation sidebar works well in this but the design teared down. but when I used <androidx.constraintlayout.widget.ConstraintLayout constraintlayout the UI layout will not tear down but it conflicts and the app crashed because in the MainActivity it using ActionBarDrawerToggle . I hope anyone can help me with this problem
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
android:background="@color/background"
android:id="@+id/drawerlayout"
tools:context=".MainActivity">
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/navigationview"
app:headerLayout="@layout/sidebar_header"
app:menu="@menu/sidemenu"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_gravity="start"/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/background"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Toolbars"
app:titleTextColor="#FFFFFF"
app:titleMarginStart = "10dp"
android:layout_marginBottom="5dp"
tools:ignore="MissingConstraints"/>
<View
android:id="@+id/viewHeaderBackground"
android:layout_width="match_parent"
android:layout_height="@dimen/_125sdp"
android:background="@color/primary"
app:layout_constraintTop_toTopOf="parent"/>
<com.github.ybq.android.spinkit.SpinKitView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/spin_kit"
style="@style/SpinKitView.Large.Circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:SpinKit_Color="@color/validation"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_16sdp"
android:layout_marginLeft="@dimen/_16sdp"
android:layout_marginTop="@dimen/_16sdp"
android:text="Cash Grants"
android:textColor="@color/white"
android:textSize="@dimen/_20ssp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="@dimen/_26sdp"
android:layout_height="@dimen/_26sdp"
android:layout_marginEnd="@dimen/_16sdp"
android:layout_marginRight="@dimen/_16sdp"
android:src="@drawable/dswd_logo"
app:layout_constraintBottom_toBottomOf="@id/textTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/textTitle"
app:tint="@color/white"
/>
<com.google.android.material.card.MaterialCardView
android:id="@+id/cardHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_16sdp"
android:layout_marginEnd="@dimen/_16sdp"
app:cardBackgroundColor="@color/card_background"
app:cardCornerRadius="@dimen/_16sdp"
app:layout_constraintBottom_toBottomOf="@id/viewHeaderBackground"
app:layout_constraintTop_toBottomOf="@id/viewHeaderBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/_14sdp">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overview"
android:textColor="@color/primary_text"
android:textSize="@dimen/_14ssp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="@+id/textViews"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="@android:color/transparent"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="@+id/layoutClients"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_8sdp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="@id/layoutImpacted"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/textViews">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="@dimen/_28sdp"
android:layout_height="@dimen/_28sdp"
android:src="@drawable/ic_clients"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_4sdp"
android:text="Sync"
android:textColor="@color/secondary_text"
android:textSize="@dimen/_10ssp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_4sdp"
android:text="0"
android:textColor="@color/primary_text"
android:textSize="@dimen/_16ssp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/layoutImpacted"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_8sdp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="@id/layoutFollowing"
app:layout_constraintStart_toEndOf="@id/layoutClients"
app:layout_constraintTop_toBottomOf="@id/textViews">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="@dimen/_28sdp"
android:layout_height="@dimen/_28sdp"
android:src="@drawable/ic_impacted"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_4sdp"
android:text="Pending"
android:textColor="@color/secondary_text"
android:textSize="@dimen/_10ssp"/>
<TextView
android:id="@+id/txtPending"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_4sdp"
android:text="0"
android:textColor="@color/primary_text"
android:textSize="@dimen/_16ssp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/layoutFollowing"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_8sdp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/layoutImpacted"
app:layout_constraintTop_toBottomOf="@id/textViews">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="@dimen/_28sdp"
android:layout_height="@dimen/_28sdp"
android:src="@drawable/ic_following"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_4sdp"
android:text="Spam"
android:textColor="@color/secondary_text"
android:textSize="@dimen/_10ssp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_4sdp"
android:text="0"
android:textColor="@color/primary_text"
android:textSize="@dimen/_16ssp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:padding="@dimen/_16sdp"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/cardHeader">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="@layout/dashboard_item_1"/>
<include layout="@layout/dashboard_item_2"/>
<include layout="@layout/dashboard_item_3"/>
<include layout="@layout/dashboard_item_4"/>
</LinearLayout>
</ScrollView>
</androidx.drawerlayout.widget.DrawerLayout >
MainActivity
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawerlayout = findViewById(R.id.drawerlayout);
navigationView = findViewById(R.id.navigationview);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerlayout,toolbar,R.string.navigation_open,R.string.navigation_close);
drawerlayout.addDrawerListener(toggle);
toggle.syncState();
