Android Tutorials

How to make Bottom Navigation bar in Android

Hello World, Today we are going to learn how we can make a nice bottom navigation bar in android. We will see how we can implement bottom navigation and how to work with fragments and many other things and trust me you will enjoy this tutorial.

Before making our bottom navigation bar lets look at our final result. See the below gif.

This is a clean and material design based bottom navigation bar. So let’s see how to code this.

Add Bottom Navigation Bar Dependency

To make the bottom nav bar, first, we need to add the dependency for the bottom navigation bar.

Open your build.gradle file and add this dependency.

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

After adding the dependency hit the sync button and after syncing the project, we can use BottomNaigationView in our layout file.

Add BottomNavigationView in Layout

Open your layout file and in the layout XML, we need to add 2 things. The first thing is FrameLayout, which will contain our fragments and the second thing is BottomNavigationView.

See the below code.

<?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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="0sp"        android:id="@+id/frameLayout"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintBottom_toTopOf="@id/bottomNav"        />    <com.google.android.material.bottomnavigation.BottomNavigationView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/bottomNav"        app:layout_constraintTop_toBottomOf="@id/frameLayout"        app:layout_constraintBottom_toBottomOf="parent"        android:background="@color/colorPrimary"        app:menu="@menu/bottom_nav_menu"        app:itemIconTint="@color/bottom_nav_item_selector"        app:itemTextColor="@color/bottom_nav_item_selector"        app:labelVisibilityMode="labeled"        /> </androidx.constraintlayout.widget.ConstraintLayout>

Explanation:

First, we have ConstraintLayout as parent layout and then in children we have, FrameLayout and BottomNavigationView.

Nothing is fancy here except BottomNavigationView. Have you noticed the app:menu=”@menu/bottom_nav_menu”. In this line, we have created a menu for our bottom nav which we will see later. Let’s move further.

Next, we have app:itemIconTint and ;app:itemTextColor which has the same value @color/bottom_nav_item_selector. So what this property means and what is the value. These properties or attributes help us to change the nav icon color.

If you noticed the bottom nav icon color they are white in color and the active screen has solid white color and rest are having off white color. How you can customize these bottom navigation bar icons? I will tell you later in this tutorial.

Next is app:labelVisibilityMode and the value is “labeled”. This property is responsible for weather showing text below of the icons in Bottom Navigation Bar. There are other values are as follows:

Selected

Unlabeled

Auto

Selected: Text will be shown only selected navigation item.

Unlabeled: Text will be hidden in navigation.

Auto: Icon text will be shown if there are 3 or less items in navigation and text will be shown only at the selected item when there are 4 or more items in navigation.

Now let’s see how to add items or menu in the bottom navigation.

How to make menu for BottomNavigationView?

To make menu for the bottom navigation bar, first, we need to make a menu folder under the res folder.

To make a folder under res, right-click on res folder in android studio and then click new then click on Android Resource Directory.

Then a popup window comes and click on resource type and select menu and hit OK.

Now your menu folder is created. Now we need to make our menu resource file. To do that we need to right-click on the menu folder and click on new -> Menu Resource File.

Now we name our menu file same as in BottomNavigationView in activity layout file which is bottom_nav_menu.

See also: Gradient Status bar and Toolbar

In this file, we will add out menu item as shown below code.

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">    <item android:id="@+id/home"        android:icon="@drawable/ic_home"        android:title="Home"        />    <item android:id="@+id/trend"        android:icon="@drawable/ic_trend"        android:title="Trend"        />    <item android:id="@+id/account"        android:icon="@drawable/ic_person"        android:title="Account"        />    <item android:id="@+id/setting"        android:icon="@drawable/ic_settings"        android:title="Setting"        /> </menu>

In the above code, we made 4 items for our bottom navigation. Each item has an id, an icon, and title. Simple.

Now see how we can customize the icon color of items.

How to Change Icon Color of BottomNavigationView?

To change icon color when an item is selected in the bottom navigation bar like below.

You will need to make your own color selector XML file. Follow the tutorial.

First, make color directory under the res folder. Right click on res folder and select new -> Android Resource Directory.

Hey read the full article here: Bottom Navigation Bar in Android

Hello World, Today we are going to see what is cardview in android and what it's advantages.

CardView is a widget provided by the android to build a new look and efficient UI. You can make your app look more professional see examples below. Cardview is an amazing concept which makes your user experience better than old android UI. Cardview was released with Android version 5.0 which is android lollipop.

According to Android's Official Site, what is cardview:

CardView API as an easy way for you to show information inside cards that have a consistent look across the platform. These cards have a default elevation above their containing view group, so the system draws shadows below them. Cards provide an easy way to contain a group of views while providing a consistent style for the container.

What are the advantages of CardView?

Before the cardview, if we want to make something look like a card we mostly use framelayout but the problem with framelayout was that we need to write a lot of code to make simple changes but this was solved when cardview released and it has some more advantages as follows.

Cardview has elevation property for controlling shadow

Set the border or corner radius of the card

Changing background color is easy

Ripple effect on cardview looks super cool

These are some of the advantages but not the least.

See also:

Load Image from URL in Android

How to add cardview in Android Project

To use cardview in your android project, first, we need to add cardview dependency in the gradle file.

Hello guys, Today we are going to see how we can consume JSON API in Android or we can say consume REST API in Android. First, let's see what is REST API?

Hello there, Today we are going to learn how we can make an amazing custom toolbar with gradient effect and also apply the gradient to the status bar like below.