Navigation bar android heights

How to change the height of the navigation bar to move it up and down as per your wish

The Android OS was built on the promise of freedom of usability and customization, and the brand has built up to that promise. Coming from the closed-circuit design of the iOS, new Android users love the personalization that the platform offers, but there are certain elements that have stayed the standard.

For instance, the on-screen navigation bar has been widely controlled either by Google itself, or the Android OEMs behind it. We’ve already discussed a way to hide the navigation bar in lieu of gestures, but there’s more you can do with it. Apart from adding a bit of color to the navigation keys, you can even edit the positioning of the navigation bar itself to a space that suits you best.

Pre-requisites:

1. Install the ADB and Fastboot driver.
2. Enable the USB Debugging on your device.
3. Download ‘Navbar Apps‘ app from the Play Store on your device.

Step 1: Change the color of the navigation bar

While changing the color of the navigation bar is not a requirement to alter the height, we do recommend you do so. This should help you not only add a splash of color to the navigation menu, but help you easily visualize how much of the navigation bar is visible once you edit its position.

1. Download the Navbar Apps using the link above and grant the app required permission.
2. From the main screen of the app, press the Static Color
3. Using the color picker, select a distinctive hue that is easily viewable and press “Select This Color” button.

Step 2: Edit the navigation bar position

Now that you’ve made the navigation bar more visually appealing, you can fire up the Minimal ADB and Fastboot tool to edit the position.

1. Connect your Android device to the computer using a USB cable.
2. Open a command window on your PC and run the following command:

If you are using Windows PowerShell to execute the command, make sure that you add a ‘.\’ before the command, like below:

• Note that the value of -30 is a value that you should use as suitable for your device. So, what that value for your device, you ask. Well, you have to find that by trial and error. You can use the values between 210 to -210. Exceeding those values won’t hurt your device, but won’t have any impact on the navbar position either.
• A positive value would push the navigation bar up, while negative value would push it down (partially/fully hiding it even, of course).
• I am using -126 value on my S9+ to completely hide the navigation bar and then use an app like Multi-action Home Button app to use the phone. Our reader, Adam Bosworth, is finding the value of -25 good to reduce the size of the navbar.

To reset the original height of the navigation bar, use the value ‘0’ at the end. the command would be:

That’s it.

Need any help changing the height of navigation bar on your device?

Husain

Sharing a love-hate relationship with Biotechnology in college, Husain moved on to his true calling of being a tech geek through and through. While briefly being persuaded by the iPhone, he made it back to the Android camp with the OnePlus One and has been a loyal comrade since.

Источник

Bottom Navigation Bar in Android

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, let’s learn how to implement such a functional Bottom Navigation Bar in the Android app. Below is the preview of a sample Bottom Navigation Bar:

Why do we need aBottom Navigation Bar?

• It allows the user to switch to different activities/fragments easily.
• It makes the user aware of the different screens available in the app.
• The user is able to check which screen are they on at the moment.

The following is an anatomy diagram for the Bottom Navigation Bar:

Steps for Creating Bottom Navigation Bar

Step 1: Create a new Android Studio project

Step 2: Adding the dependency to the build.gradle(:app) file

We will be using Android’s Material Design Library so we need to import it in the build.gradle(:app) file. Here’s the dependency we need to add:

Step 3: Working with activity_main.xml file

For this example, create a basic app with a FrameLayout and a Bottom Navigation Bar. The FrameLayout will contain Fragments which will change as the user click on the items in the Bottom Navigation Bar. This is how the activity_main.xml looks like:

Step 4: Creating a menu for the Bottom Navigation Bar

The Navigation Bar needs to have some items which will create using Menu. To create a Menu, first, create a Menu Directory by clicking on the app -> res(right-click) -> New -> Android Resource Directory and select Menu in the Resource Type.

To create a Menu Resource File , click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu.

Now the user can create as many items as he wants in the bottom_nav_menu.xml file. The user also needs to create an icon for each of these items. To create an icon, click on the app -> res -> drawable(right-click) -> New -> Image Asset.

In the window that opens, the user can name the icon whatever he wants but it should not comprise any uppercase letter. The user can select the icon he wants by searching it and when the user is done, click Next-> Finish.

Источник

How to Code a Bottom Navigation Bar for an Android App

The material design team at Google defines the functionality of bottom navigation bars in Android as follows:

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.

According to the official Material Design guidelines for the Android bottom navigation bar, it should be used when your app has:

• three to five top-level destinations
• destinations requiring direct access

An example of a popular app that implements the bottom navigation bar is the Google Discover Android app from Google, which uses it to navigate to different destinations of the app. You can see this yourself by downloading the Google Discover app from the Google Play Store (if you don’t already have it on your device). The following screenshot is from the Google Discover app displaying an Android bottom navigation bar.

In this post, you’ll learn how to display menu items inside a bottom navigation bar in Android. You will use AndroidX navigation, which is part of the Jetpack suite of libraries. Jetpack is a suite of libraries to help developers write code that works consistently across Android versions and devices. As a bonus, you’ll also learn how to use Android Studio templates to bootstrap your project with a bottom navigation bar quickly.

Getting Started

Open Android Studio, create a new project, and select a Blank Activity template, as shown below. Select the Kotlin language from the drop-down menu and click Finish. Wait for Android Studio to finish creating the project resources.

Add Project Dependencies

The first thing before we get started is to add the project dependencies. Open the app’s build.gradle file and add the following dependencies.

Create a Navigation Graph

A navigation graph is an XML resource file that contains all of your application destinations and actions. Right-click on the res directory and select New > Android Resource File. Provide a name and select Navigation as the resource type, and click OK. The navigation graph gets placed in the navigation folder, as shown in the structure below.

Add Destinations to the Navigation Graph

The navigation file will contain all the destinations of our application. To add a destination, click on the plus (+) sign at the top of the design tab or choose an existing destination if you have already created the fragments.

Our application will have three screens, namely:

• Home page
• Profile page
• Settings page

Therefore, we will add three destinations to the navigation XML file. To add a new destination, click the plus (+) sign and select the Create new destination option. On the next screen, select a blank fragment and provide the details as shown below.

Repeat the same steps and create two additional fragments for the Profile and Settings screens. The final navigation graph XML now looks like this.

Each fragment has its layout, which you can customize as you wish. Below is how each fragment looks after adding a text view at the center of each fragment.

Add a Nav Host Fragment and Bottom Navigation View

Next, define a host fragment in the main layout (main_activity.xml). A nav host fragment is an empty container where destinations are swapped in and out as a user navigates through your app. We will also add the BottomNavigationView in the main layout, as shown below.

Add Menu Items

The next step is to add menu items for the bottom navigation view. Right-click on the res directory, select New > Android Resource File and select menu, provide a name and click OK.

Open the menu XML file and add three menu items, as shown below.

Add Vector Assets to Menu Items

A vector asset is an XML file that defines a virtual image in its file. Vector assets guarantee sharp images which can be resized to any screen size without losing their quality. To add a vector asset, right-click on Drawable > New > Create Vector Asset and choose a home icon for the home menu as shown below.

Repeat the same steps and create vector assets for the rest of the menu items. Add the vector assets to the respective menu items as shown below.

The next step is to add id attributes to each menu item. The menu item’s id should be the same as the id of the navigation graph destinations in order to allow navigation throughout the fragments.

Add Menu Item to Bottom Navigation View

The last step is to add the menu to the bottom navigation view. Open main_activity.xml and add the app:menu=»@menu/bottom_nav» attribute to the BottomNvigationView .

About the Nav Controller

The NavController is an object that manages app navigation within a NavHost . It coordinates the swapping of fragments as users move through your app. In the main activity class, call setupWithNavController() from your main activity’s onCreate() method, as shown below.

Final App

The final app should now look like this:

Bonus: Using Android Studio Templates

Now that you’ve learnt about the APIs involved to create a bottom navigation bar from scratch in Android, I’ll show you a shortcut that will make it faster next time. You can simply use a template instead of coding a navigation bar from scratch.

Android Studio provides code templates that follow the Android design and development best practices. These existing code templates (available in Java and Kotlin) can help you quickly kick-start your project. One such template can be used to create a bottom navigation bar.

To use this handy feature for a new project, first fire up Android Studio.

Enter the application name and click the Next button. You can leave the defaults as they are in the Target Android Devices dialog.

Click the Next button again.

In the Add an Activity to Mobile dialog, select Bottom Navigation Activity. Click the Next button again after that.

In the last dialog, you can rename the Activity, or change its layout name or title if you want. Finally, click the Finish button to accept all configurations.

Android Studio has now helped us to create a project with a bottom navigation activity. Really cool! You’re strongly advised to explore the code generated.

In an existing Android Studio project, to use this template, simply go to File > New > Activity > Bottom Navigation Activity.

Top Android App Templates From CodeCanyon

Note that the templates that come included with Android Studio are good for simple layouts and making basic apps, but if you want to really kick-start your app, you might consider some of the app templates available from Envato Market.

They’re a huge time-saver for experienced developers, helping them to cut through the slog of creating an app from scratch and focus their talents instead on the unique and customised parts of creating a new app.

Let’s look at a few cool templates that will let you put your new Android bottom navigation bar coding skills to good use.

1. Android App Builder: WooCommerce, WebView, WordPress and Much More

Creating native Android apps couldn’t get simpler. The Android App builder template lets you turn your online presence into easy-to-use mobile experiences. Turn your WooCommerce shop, WordPress blog, or HTML5 website into an app, with no coding experience necessary. Use the included tutorial to learn how to complete your app project.

2. RocketWeb: Configurable Android WebView App Template

Looking to create a stylish Android WebView app? Save yourself some time and hassle by using the RocketWeb template. You won’t need any programming skills to get the most from this download. Just open it in Android Studio and start customising. Tweak the Kotlin bottom navigation bar for Android, the colours, and a whole lot more with RocketWeb.

3. Dating App for Web, iOS and Android

Connections are in the air with the Dating App template. It was built in Android Studio and Xcode with Swift, so you can have both an Android and an iOS app. On top of the modern bottom navigation bar for Android and iOS, Dating App also features:

• simple image gallery
• Facebook signup
• upgrades, AdMob banner, and in-app purchases
• messaging and friends system

4. AdForest: Classified Native Android App

Let users take the classified section on the go with AdForest. Users will be able to quickly sign up and verify their accounts with their mobile numbers. Once in, they can search for products, find nearby listings, message vendors for more information, and a whole lot more. It’s as easy to set up as it is to navigate.

5. MaterialX: Android Material Design UI Components

This Android app template is the perfect bundle for developers. It features all types of useful UI design elements to complete your projects. There are more than 315 unique layouts that come in more than 31 categories. Some of the included components are:

• Android bottom navigation bars
• buttons, chips, and cards
• dialog boxes
• grids and lists
• navigation drawer menus

Find More Android App Templates From Envato Tuts+

The above templates are great premium options in their own right. But they’re far from the only ones available to you! Our instructors have rounded up some of the best Android app templates from CodeCanyon that you should check out. No matter the niche, you can find a nice Android template that suits your needs from Envato Tuts+:

Conclusion

In this tutorial, you learned how to create a bottom navigation bar in Android from scratch, using Jetpack navigation. We also explored how to easily and quickly use the Android Studio templates to create a bottom navigation activity.

I highly recommend checking out the official material design guidelines for bottom navigation bars to learn more about how to properly design and use the bottom navigation bar in Android.

To learn more about coding for Android, check out some of our other courses and tutorials here on Envato Tuts+!

This post has been updated with contributions from Nathan Umoh and Esther Vaati. Nathan is a staff writer for Envato Tuts+. Esther is a software developer and writer for Envato Tuts+.

Источник