Navigation Drawer In Android With Example
3 min read3 days ago
STEP 01
- First of all, I created a simple sign in design with a simple sign in logic and user credentials match. The user will move to HomeActivity from MainActivity.
package lk.navigationtest.app29practical;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
Button signInButton = findViewById(R.id.signInButton);
signInButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
EditText usernameText = findViewById(R.id.usernameText);
EditText passwordText = findViewById(R.id.passwordText);
String username = String.valueOf(usernameText.getText());
String password = String.valueOf(passwordText.getText());
if (username.isBlank()){
Toast.makeText(MainActivity.this, "Please Enter Username!", Toast.LENGTH_SHORT).show();
} else if (password.isBlank()){
Toast.makeText(MainActivity.this, "Please Enter Password!", Toast.LENGTH_SHORT).show();
} else {
if (username.equals("admin@admin.com") && password.equals("123")){
Toast.makeText(MainActivity.this, "Signed In Successful!", Toast.LENGTH_SHORT).show();
Intent i = new Intent(MainActivity.this,HomeActivity.class);
i.putExtra("email", username);
startActivity(i);
finish();
} else {
Toast.makeText(MainActivity.this, "Invalid User Credentials!", Toast.LENGTH_SHORT).show();
}
}
}
});
}
}STEP 02
2. Create a new Activity for the Home page. I create an Activity called HomeActivity.java.
package lk.navigationtest.app29practical;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import androidx.activity.EdgeToEdge;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.google.android.material.navigation.NavigationView;
import lk.navigationtest.app29practical.navigation.CategoryFragment;
import lk.navigationtest.app29practical.navigation.DashboardFragment;
public class HomeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_home);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.drawerLayout1), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
Bundle b = getIntent().getExtras();
String mail = b.getString("email");
Log.i("App29Log",String.valueOf(mail));
LayoutInflater inflater = LayoutInflater.from(HomeActivity.this);
View view1 = inflater.inflate(R.layout.nav_header,null,false);
TextView headerTextView1 = view1.findViewById(R.id.headerTextView1);
headerTextView1.setText("mail");
DrawerLayout drawerLayout1 = findViewById(R.id.drawerLayout1);
Toolbar toolbar1 = findViewById(R.id.toolbar1);
NavigationView navigationView1 = findViewById(R.id.navigationView1);
navigationView1.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
if (item.getItemId() == R.id.dashboard) {
loadFragment(new DashboardFragment());
} else if (item.getItemId() == R.id.category) {
loadFragment(new CategoryFragment());
}
toolbar1.setTitle(item.getTitle());
drawerLayout1.closeDrawers();
return true;
}
});
}
private void loadFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.fragmentContainerView1, fragment, null)
.setReorderingAllowed(true)
.commit();
}
}STEP 03
3. Create resource file for your header design.
My header design:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:background="@drawable/header_gradiant"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="20dp">
<ImageView
android:id="@+id/headerImageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:paddingTop="15dp"
app:srcCompat="@drawable/man"/>
<TextView
android:id="@+id/headerTextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:text="@string/nav_header_text1"
android:textAlignment="center"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="@+id/headerTextView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:text="@string/nav_header_text2"
android:textAlignment="center"
android:textSize="18sp" />
</LinearLayout>STEP 04
4. And added DrawerLayout for the activity_home.xml as a design.
My Home Design.
<?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"
android:id="@+id/drawerLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/gradiant_start_color"
app:title="@string/toolbar_text"
android:textAlignment="center"
android:paddingTop="5dp"
app:titleTextColor="@color/white" />
<FrameLayout
android:id="@+id/frameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigationView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navigation_menu"
/>
</androidx.drawerlayout.widget.DrawerLayout>STEP 05
5. Create menu derectory and create resource file as navigation_menu.xml
STEP 06
6. Design the items of navigation_menu.xml.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/dashboard"
android:title="@string/text_dashboard"
android:icon="@drawable/dashboard_icon"
/>
<item
android:id="@+id/category"
android:title="@string/text_category"
android:icon="@drawable/category_add_icon"
/>
<item
android:id="@+id/product"
android:title="@string/text_product"
android:icon="@drawable/product_icon"
/>
<item
android:id="@+id/user"
android:title="@string/text_users"
android:icon="@drawable/users_icon"
/>
<item
android:id="@+id/order"
android:title="@string/text_orders"
android:icon="@drawable/order_list_icon"
/>
<item
android:id="@+id/payment"
android:title="@string/text_payments"
android:icon="@drawable/product_icon"
/>
<item
android:id="@+id/review"
android:title="@string/text_review"
android:icon="@drawable/review_icon"
/>
</menu>Good Luck & Thank You!
