Material Design in Android (Introduction, Navigation, Floating Button, Tool Bar) in Hindi

Introduction to Material Design

• Material Design एक UI/UX डिज़ाइन सिस्टम है, जिसे Google ने 2014 में पेश किया था।
• इसका उद्देश्य Visually Appealing, Interactive और Consistent UI बनाना है।

• यह Shadows, Depth, Motion, Animations और Responsive Layouts पर फोकस करता है।
• यह Android, Web और iOS पर Cross-Platform Compatibility देता है।

Key Features of Material Design:

• Real-world Physics Based UI (Shadows, Depth & Elevation)
• Typography और Grid-based Layouts
• Color Themes और Adaptive UI
• Smooth Animations और Transitions
• Responsive Design और Adaptive Components
• Dark Mode और Light Mode Support
• Accessibility Features जैसे Large Fonts & High Contrast UI
• Material Components (Buttons, Cards, Snackbars, Navigation, Floating Button, etc.)

Navigation in Material Design

• Navigation का उपयोग Multi-screen और Multi-functional Apps में किया जाता है।
• >इसमें Navigation Drawer, Bottom Navigation Bar और Tabs का उपयोग किया जाता है।

Key Features of Navigation in Material Design:

• Drawer Menu (Hamburger Icon के साथ Slide Menu)
• Bottom Navigation Bar (Quick Access for 3-5 Sections)
• Tab Layout (Swipe-able Pages for Easy Navigation)
• Navigation Component (Jetpack का Recommended Navigation System)
• Back Stack और Fragment Management
• Deep Linking & Navigation Graph (Complex Navigation को आसान बनाता है)
• Navigation Transitions और Animations
• Accessibility & Gesture Support (One-Hand Navigation for Large Screens)

Example of Navigation Drawer

Step 1: Add Dependencies in build.gradle

gradle

implementation 'com.google.android.material:material:1.4.0'

Step 2: Add Navigation Drawer in XML

xml

<com.google.android.material.navigation.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/nav_menu"/>

Step 3: Handle Navigation in Java

java

drawerLayout = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(item -> {
    if (item.getItemId() == R.id.nav_home) {
        Toast.makeText(this, "Home Selected", Toast.LENGTH_SHORT).show();
    }
    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
});

Floating Button/Floating Action Button (FAB)

• Floating Action Button (FAB) एक गोलाकार बटन होता है, जो Primary Action को Highlight करता है।

• यह स्क्रीन पर Float करता है और Shadows & Elevation Effects देता है।
• इसका उपयोग "Compose", "Add", "Chat", "Call", "Upload" जैसे Actions के लिए किया जाता है।

Key Features of FAB:

• Circular Button with Ripple Effect
• Elevated & Shadowed Design
• Mini और Extended Variants
• Snackbar & Motion Integration
• Custom Icons और Colors
• Multiple FABs Supported (FAB Menu)
• Animation & Motion Effects
• Click & Long-Press Actions

Example of Floating Action Button

Step 1: Add Floating Action Button in XML

xml

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/purple_500"/>

Step 2: Set Click Event in Java

java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(view -> 
    Toast.makeText(this, "FAB Clicked!", Toast.LENGTH_SHORT).show()
);

ToolBar in Material Design

• ToolBar एक Modern Action Bar है, जिसे App की Top Bar के रूप में उपयोग किया जाता है।
• इसमें App Title, Navigation Icon, Menu Items, और Custom Views होते हैं।
• यह Customizable, Scrollable और Collapsing UI सपोर्ट करता है।

Key Features of Toolbar:

• App Title & Subtitle Display
• Navigation Button (Hamburger Menu या Back Arrow)
• Menu Items (Search, Settings, Share, etc.)
• Scrollable, Collapsing & Transparent Toolbars
• Custom Views जैसे Image, Logo, और Buttons Add कर सकते हैं
• Material Styling & Theming Options
• Supports Gesture & Motion Animations
• Multiple Toolbars Allowed (One in Main, Another in Fragment)

Example of Toolbar in Android

Step 1: Add Toolbar in XML

xml

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="My App"
    app:navigationIcon="@drawable/ic_menu"/>

Step 2: Set Toolbar in Java

java

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationOnClickListener(view -> 
    Toast.makeText(this, "Navigation Clicked!", Toast.LENGTH_SHORT).show()
);

Development of Android Applications Notes in Hindi

Follow Us

   

• Introduction to Android in Hindi


• Dalvik Vartual Machine in Hindi


• Basic Building Blocks in Android in Hindi


• Fundamentals of android in Hindi


• apk file extension in Hindi


• UI components in Hindi


• Components for communication in Android in Hindi


• Android API Levels in Hindi


• Setting up development environment in Hindi


• Manifest.xml in Hindi


• Resources & R.java in Hindi