Understanding the Basics of Navigation Component

We all have used fragments in our app and wrote fragment transactions many times according to our needs. So, the navigation component is another way to handle transactions but it provides few other benefits too.

Some of them are:

• Handling back action correctly by default
• Default standard animations and transitions while switching between fragments
• Passing data between fragments (this is also my favorite).

Okay, now let’s discuss how to integrate it into our app.

First, we’ve to add following dependencies in our app-level build.gradlefile:

def nav_version = "2.3.0"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

The recommended way to navigate between destinations is to use the Safe Args Gradle plugin. This plugin generates simple object and builder classes that enable type-safe navigation and argument passing between destinations. To add Safe Args to our project, include the following classpath in our top-level build.gradle file:

buildscript {
    repositories {
        google()
    }
    dependencies {
        def nav_version = "2.3.0"
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}

Also, add this line to our app or module’s build.gradle file:

apply plugin: "androidx.navigation.safeargs"

There are three main components that we need to understand:

1. Navigation Graph(nav_graph.xml): It contains all the navigation-related information like the start destination fragment, paths, etc.
2. NavHost: A container that displays those destinations defined in nav_grap.xml file.
3. NavController: It manages the swapping of fragments within a NavHost.

If you want to avoid implementing it from scratch, Android Studio can help you to start. Just select the navigation template while creating a project or adding a new activity.

#navigation-component #androiddev #android #jetpack-compose #android-app-development

What is GEEK

Buddha Community

Understanding the Basics of Navigation Component

We all have used fragments in our app and wrote fragment transactions many times according to our needs. So, the navigation component is another way to handle transactions but it provides few other benefits too.

Some of them are:

• Handling back action correctly by default
• Default standard animations and transitions while switching between fragments
• Passing data between fragments (this is also my favorite).

Okay, now let’s discuss how to integrate it into our app.

First, we’ve to add following dependencies in our app-level build.gradlefile:

def nav_version = "2.3.0"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

The recommended way to navigate between destinations is to use the Safe Args Gradle plugin. This plugin generates simple object and builder classes that enable type-safe navigation and argument passing between destinations. To add Safe Args to our project, include the following classpath in our top-level build.gradle file:

buildscript {
    repositories {
        google()
    }
    dependencies {
        def nav_version = "2.3.0"
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}

Also, add this line to our app or module’s build.gradle file:

apply plugin: "androidx.navigation.safeargs"

There are three main components that we need to understand:

1. Navigation Graph(nav_graph.xml): It contains all the navigation-related information like the start destination fragment, paths, etc.
2. NavHost: A container that displays those destinations defined in nav_grap.xml file.
3. NavController: It manages the swapping of fragments within a NavHost.

If you want to avoid implementing it from scratch, Android Studio can help you to start. Just select the navigation template while creating a project or adding a new activity.

#navigation-component #androiddev #android #jetpack-compose #android-app-development

Bottom Tab View inside Navigation Drawer with React Navigation V5

Bottom Tab View + Navigation Drawer

This is an example of Bottom Tab View inside Navigation Drawer / Sidebar with React Navigation in React Native. We will use react-navigation to make a navigation drawer and Tab in this example. I hope you have already seen our post on React Native Navigation Drawer because in this post we are just extending the last post to show the Bottom Tab View inside the Navigation Drawer.

In this example, we have a navigation drawer with 3 screens in the navigation menu and a Bottom Tab on the first screen of the Navigation Drawer. When we open Screen1 the Bottom Tab will be visible and on the other options, this Bottom Tab will be invisible.

To Create a Drawer Navigator

<NavigationContainer>
  <Drawer.Navigator
    drawerContentOptions={{
      activeTintColor: '#e91e63',
      itemStyle: { marginVertical: 5 },
    }}>
    <Drawer.Screen
      name="HomeScreenStack"
      options={{ drawerLabel: 'Home Screen Option' }}
      component={HomeScreenStack} />
    <Drawer.Screen
      name="SettingScreenStack"
      options={{ drawerLabel: 'Setting Screen Option' }}
      component={SettingScreenStack} />
  </Drawer.Navigator>
</NavigationContainer>

To Create Bottom Tab Navigator

<Tab.Navigator
  initialRouteName="HomeScreen"
  tabBarOptions={{
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
    style: {
      backgroundColor: '#e0e0e0',
    },
    labelStyle: {
      textAlign: 'center',
      fontSize: 16
    },
  }}>
  <Tab.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{
      tabBarLabel: 'Home Screen',
      // tabBarIcon: ({ color, size }) => (
      //   <MaterialCommunityIcons name="home" color={color} size={size} />
      // ),
    }}  />
  <Tab.Screen
    name="ExploreScreen"
    component={ExploreScreen}
    options={{
      tabBarLabel: 'Explore Screen',
      // tabBarIcon: ({ color, size }) => (
      //   <MaterialCommunityIcons name="settings" color={color} size={size} />
      // ),
    }} />
</Tab.Navigator>

In this example, we will make a Tab Navigator inside a Drawer Navigator so let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

#bottom navigation #drawer navigation #react #react navigation

Learn Python Tutorial from Basic to Advance

Description
Become a Python Programmer and learn one of employer’s most requested skills of 21st century!

This is the most comprehensive, yet straight-forward, course for the Python programming language on Simpliv! Whether you have never programmed before, already know basic syntax, or want to learn about the advanced features of Python, this course is for you! In this course we will teach you Python 3. (Note, we also provide older Python 2 notes in case you need them)

With over 40 lectures and more than 3 hours of video this comprehensive course leaves no stone unturned! This course includes tests, and homework assignments as well as 3 major projects to create a Python project portfolio!

This course will teach you Python in a practical manner, with every lecture comes a full coding screencast and a corresponding code notebook! Learn in whatever manner is best for you!

We will start by helping you get Python installed on your computer, regardless of your operating system, whether its Linux, MacOS, or Windows, we’ve got you covered!

We cover a wide variety of topics, including:

Command Line Basics
Installing Python
Running Python Code
Strings
Lists
Dictionaries
Tuples
Sets
Number Data Types
Print Formatting
Functions
Scope
Built-in Functions
Debugging and Error Handling
Modules
External Modules
Object Oriented Programming
Inheritance
Polymorphism
File I/O
Web scrapping
Database Connection
Email sending
and much more!
Project that we will complete:

Guess the number
Guess the word using speech recognition
Love Calculator
google search in python
Image download from a link
Click and save image using openCV
Ludo game dice simulator
open wikipedia on command prompt
Password generator
QR code reader and generator
You will get lifetime access to over 40 lectures.

So what are you waiting for? Learn Python in a way that will advance your career and increase your knowledge, all in a fun and practical way!

Basic knowledge
Basic programming concept in any language will help but not require to attend this tutorial
What will you learn
Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the pycharm and create .py files
Get an understanding of how to create GUIs in the pycharm!
Build a complete understanding of Python from the ground up!

#Learn Python #Learn Python from Basic #Python from Basic to Advance #Python from Basic to Advance with Projects #Learn Python from Basic to Advance with Projects in a day

Android Navigation View With Navigation Component - Material Design Components

Android Navigation View With Navigation Component | Material Design Components | Android Studio

In this tutorial we will create a navigation drawer including navigation view with navigation components.

For more exciting android tutorials, please subscribe my YouTube channel and hit the bell icon for notifications.

#android #navigation

Drawer Layout and Bottom Nav in Navigation Component

Drawer layout

Setting up side drawer is quite straightforward in navigation component. First of all, create a menu resource file with necessary menu items. Here is how my main_menu.xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_fragment"
        android:title="Home" />
    <item
        android:id="@+id/terms_fragment"
        android:title="Terms and Condition" />
</menu>

Note: The id of items in menu should be same as the fragment id in your main_navigation.xml. For eg:

<fragment
    android:id="@+id/home_fragment"
    android:name="com.rumi.toolbardrawerlayoutdemo.HomeFragment"
    android:label="HomeFragment"
    tools:layout="@layout/fragment_home"/>

Next, in your **activity_main.xml **add the drawer layout. Couple of things we need to consider while creating the layout are:

• Drawer layout should be the parent layout.
• Drawer layout should have 2 children: side navigation view and layout containing the nav host fragment.

<script src="https://gist.github.com/RumiRajbhandari/f00ff6f84b70f77aa47998c6d155f3b8.js"></script>

Now, in the **MainActivity.kt **we need to configure appBar. For that, we have to use appBarConfiguration which allows us to declare topLevelDestination and the drawerLayout. Top level destination represents root level destination which does not display back arrow in the action bar. Instead it displays the drawer icon if navigation drawer is setup. Pressing the back button in your keypad from top level destination will cause your application to exit.

appBarConfiguration = AppBarConfiguration(
    setOf(R.id.home_fragment, R.id.cart_fragment),
    binding.drawerLayout
)
setupActionBarWithNavController(navController, appBarConfiguration)

NavigationUI.setupActionBarWithNavController performs following tasks:

• Displays hamburger icon(drawer icon) when in top-level destination
• Display up icon when not in top-level destination
• Update title text based on the destination’s label

Note: Make sure your jvmTarget version is 8 in your app level gradle file.

kotlinOptions {
    jvmTarget = JavaVersion.VERSION_1_8.toString()
}

You can now see the drawer icon in your top-level destinations. However, if you click on it, the drawer layout does not appear. But you can swipe from the left side of the screen to view the drawer layout. NavigationUI will automatically handle the menu item click and will navigate to the respective fragment.

Now, in order to handle drawer icon click we need to override onSupportNavigateUp method.

override fun onSupportNavigateUp(): Boolean {
    return findNavController(R.id.nav_host_fragment).navigateUp(appBarConfiguration)
}

It will result in:

• Opening of the drawer layout when drawer icon is clicked.
• Handling of the back button press when we are in non top-level destinations.

And that’s all it takes to setup drawer layout in android navigation. We no longer need to manually handle menuItem click and drawer toggling.

#navigation-component #bottomnavigationview #androiddev #kotlin #android