[AndroidUI Design] Adding Fragment in Bottom Navigation Activity and modifying the lower navigation icon

I. Introduction

• Description: In actual development, Fragment is a frequently used layout. Android studio has a one-click way to generate Fragment layout, Bottom Navigation Activity, so how do we add Fragments and modify the lower navigation icon on this basis?
• Difficulty: Beginner
• Effect
  

2. Design

1. Add Fragment

(1) Confirm requirements

Suppose you need to add a personal information interface fragment on the original basis, named: info

(2) Create

     <1> Method 1: Use tools to quickly generate

Create a Fragment (with ViewModel) as shown in the figure. Of course, if there is no data that needs to be dynamically modified and a simple interface, you can choose Modal Bottom Sheet.

     <2> Method 2: View (layer) tool

Select Gallery

Enter Gallery and choose according to your needs

     <3> Method 3: Manual creation

First create an Activity

Make the following modifications

(3)Add

     <1> Add fragment attributes (naming, icon)

In order to take care of beginners, the modification of the icon is in the next chapter

	<string name="title_info">Info</string>

     <2> Add sub-items to the menu (bottom_nav_menu.xml) file

	<item
        android:id="@+id/navigation_info"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_info"/>

     <3> Add fragment interface

    <fragment
        android:id="@+id/navigation_info"
        android:name="com.hngy.xpq.fragmentdemo.ui.info.InfoFragment"
        android:label="@string/title_info"
        tools:layout="@layout/fragment_info" />

(4) Effect

• Before adding (three fragment layout)

• After adding (four fragment layout)

2. Modify the underlying icon

(1) Icon resources

     <1> Method 1: Design with PS

     <2> Method 2: Alibaba vector icon library

Alibaba vector icon library URL: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.6&type=2

(2) Download resources

     <1> Add to database

     <2> Open shopping cart

     <3> Download

     <4> Select svg

(3) Use

     <1> Open svg file

     <2> F12 find element

     <3> Create resource files in Android studio

     <4> Modify file content

According to the element content obtained by F12, it is known that (width, height) = 200px, (viewportWidth, viewportHeight) = 1024, and the path is modified according to the element.

     <5> Modify layout file

     <6> Effect

• Before modification

• after modification