1、创建导航栏图标

使用系统自带的矢量图库文件，鼠标右键点击res->New->Vector Asset

修改 Name , Clip art 和 Color

 再创建一个

同样的方法再创建四个按钮

2、添加百分比布局依赖

app\build.gradle.kts 中添加百分比布局依赖，并点击Sync Now

implementation("androidx.percentlayout:percentlayout:1.0.0")

3、创建三个Layout Resource File

1)home.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_heightPercent="7%"android:layout_alignParentTop="true"android:text="主页"android:textSize="15pt"android:gravity="center"android:textColor="@color/black"android:background="#F0E7D8"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_heightPercent="7%"android:layout_alignParentBottom="true"android:background="#F0E7D8"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/home_click"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="主页"android:gravity="center"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/learn"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/learn"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="学习"android:gravity="center"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/me"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/me"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="我"android:gravity="center"/></LinearLayout></LinearLayout>
</androidx.percentlayout.widget.PercentRelativeLayout>

2)learn.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_heightPercent="7%"android:layout_alignParentTop="true"android:text="学习"android:textSize="15pt"android:gravity="center"android:textColor="@color/black"android:background="#F0E7D8"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_heightPercent="7%"android:layout_alignParentBottom="true"android:background="#F0E7D8"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/home"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/home"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="主页"android:gravity="center"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/learn_click"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="学习"android:gravity="center"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/me"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/me"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="我"android:gravity="center"/></LinearLayout></LinearLayout>
</androidx.percentlayout.widget.PercentRelativeLayout>

3)me.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_heightPercent="7%"android:layout_alignParentTop="true"android:text="我"android:textSize="15pt"android:gravity="center"android:textColor="@color/black"android:background="#F0E7D8"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_heightPercent="7%"android:layout_alignParentBottom="true"android:background="#F0E7D8"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/home"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/home"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="主页"android:gravity="center"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/learn"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/learn"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="学习"android:gravity="center"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F0E7D8"android:src="@drawable/me_click"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="我"android:gravity="center"/></LinearLayout></LinearLayout>
</androidx.percentlayout.widget.PercentRelativeLayout>

4、创建三个Java Class

1)Home.java

package com.example.bottomnavigationbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import androidx.appcompat.app.AppCompatActivity;
public class Home extends AppCompatActivity {private ImageButton learn,me;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.home);learn = findViewById(R.id.learn);me = findViewById(R.id.me);learn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intentToLearn = new Intent(Home.this,Learn.class);startActivity(intentToLearn);overridePendingTransition(0, 0); // 取消转场动画}});me.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intentToMe = new Intent(Home.this,Me.class);startActivity(intentToMe);overridePendingTransition(0, 0); // 取消转场动画}});}
}

2)Learn.java

package com.example.bottomnavigationbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class Learn extends AppCompatActivity {private ImageButton home,me;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.learn);home = findViewById(R.id.home);me = findViewById(R.id.me);home.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intentToLearn = new Intent(Learn.this,Home.class);startActivity(intentToLearn);overridePendingTransition(0, 0); // 取消转场动画}});me.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intentToMe = new Intent(Learn.this,Me.class);startActivity(intentToMe);overridePendingTransition(0, 0); // 取消转场动画}});}
}

3)Me.java

package com.example.bottomnavigationbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class Me extends AppCompatActivity {private ImageButton home,learn;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.me);home = findViewById(R.id.home);learn = findViewById(R.id.learn);learn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intentToLearn = new Intent(Me.this,Learn.class);startActivity(intentToLearn);overridePendingTransition(0, 0); // 取消转场动画}});home.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intentToMe = new Intent(Me.this,Home.class);startActivity(intentToMe);overridePendingTransition(0, 0); // 取消转场动画}});}
}

5、AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"><applicationandroid:allowBackup="true"android:dataExtractionRules="@xml/data_extraction_rules"android:fullBackupContent="@xml/backup_rules"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/Theme.BottomNavigationBar"tools:targetApi="31"><activityandroid:name=".Home"android:exported="true"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name=".Learn"/><activity android:name=".Me"/></application>
</manifest>