English:
5.2.1 Fragment Example in Detail - Implementation of Bottom Navigation Bar (Method 1)
Category Android Basic Tutorial
Introduction to This Section:
>
In the previous section, we gained a preliminary understanding of Fragments, learning about concepts, lifecycle, Fragment management and transactions, as well as dynamically and statically loading Fragments. Starting from this section, we will discuss some practical examples of Fragments in actual development! This section will explain the implementation of a bottom navigation bar! There are many basic methods for implementing a bottom navigation bar, such as using TextViews, RadioButtons, or a combination of TabLayout and RadioButtons. Of course, for more complex scenarios, an outer layout is still necessary! In this section, we will use TextViews to create a bottom navigation bar effect and become familiar with the use of Fragments! Alright, let's start the content of this section!
1. The Effect Picture and Project Directory Structure to be Implemented:
Let's take a look at the effect picture first:
Then let's check out our project's directory structure:
2. Implementation Process:
Step 1: Write some resource files for the bottom options
>
We can see from the picture that each item at the bottom has a different effect when clicked, right? We determine this based on whether it is selected or not! The resource files we need to write include: first, images, then text, and then the background!
Image Drawable resource: tabmenuchannel.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/tab_channel_pressed" android:state_selected="true" />
<item android:drawable="@mipmap/tab_channel_normal" />
</selector>
The other three follow the same pattern!
Text resource: tabmenutext.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/text_yellow" android:state_selected="true" />
<item android:color="@color/text_gray" />
</selector>
Background resource: tabmenubg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#FFC4C4C4" />
</shape>
</item>
<item>
<shape>
<solid android:color="@color/transparent" />
</shape>
</item>
</selector>
Step 2: Write our Activity layout
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/ly_top_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/bg_topbar">
<TextView
android:id="@+id/txt_topbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:textSize="18sp"
android:textColor="@color/text_topbar"
android:text="Information"/>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="@color/div_white"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<LinearLayout
android:id="@+id/ly_tab_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@color/bg_white"
android:orientation="horizontal">
<TextView
android:id="@+id/txt_channel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_channel"
android:gravity="center"
android:padding="5dp"
android:text="@string/tab_menu_alert"
android:textColor="@drawable/tab_menu_text"
android:text
android:textSize="16sp"/>
</LinearLayout>
<View
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="2px"
android:background="@color/div_white"
android:layout_above="@id/ly_tab_bar"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/ly_top_bar"
android:layout_above="@id/div_tab_bar"
android:id="@+id/ly_content">
</FrameLayout>
</RelativeLayout>
Code Analysis:
>
First, define the style of the top title bar, with a 48dp LinearLayout in the center plus a TextView as the title!
PS: The four TextView attributes here are duplicated, you can also extract them by yourself, write a style, and set it~
Step 3: Hide the Top Navigation Bar
Unexpectedly found that the previous call to requestWindowFeature(Window.FEATURENOTITLE) in the Activity can hide the phone's built-in top navigation bar, but when writing the demo, I found an error, even if this sentence is written before setContentView()! It may be because it inherits AppCompatActivity instead of the Activity class!
>
Note: Placing requestWindowFeature(Window.FEATURE_NO_TITLE); before super.onCreate(savedInstanceState); can hide the ActionBar without an error.
Then set the theme attribute in AndroidManifest.xml:
android:theme="@style/Theme.AppCompat.NoActionBar"
PS: The above "conscientious code" is sponsored by the good programmer Cao Shen~
Step 4: Create a simple layout and class for a Fragment:
fg_content.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_white">
<TextView
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hehe"
android:textColor="@color/text_yellow"
android:textSize="20sp"/>
</LinearLayout>
MyFragment.java:
/**
* Created by Coder-pig on 2015/8/28 0028.
*/
public class MyFragment extends Fragment {
private String content;
public MyFragment(String content) {
this.content = content;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fg_content,container,false);
TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
txt_content.setText(content);
return view;
}
}
Code Analysis:
It's just a simple override of the onCreateView() method, other methods can be overridden as needed!
Step 5: Write MainActivity.java
Let's talk about some key issues we need to consider:
>
When should Fragment be initialized and added to the container? When to hide and show?
How to make the TextView selected? What operations should be done after a TextView is selected?
How to make a TextView in the Selected state when first entering MainActivity?
Well, let's answer these questions one by one:
>
After we select the TextView, we check for the corresponding Fragment for null. If it's null, we initialize it and add it to the container; For hiding, we define a method to hide all Fragments. Each time a click event is triggered, we first call this hideAll method, Hide all Fragments, and then if the TextView's corresponding Fragment is not null, we display this Fragment;
This is implemented through a click event. After clicking the TextView, reset the selected state of all TextViews to false first, and then set the clicked TextView's selected state to true;
This is even simpler. We set the selected state through a click event, so can't we just add a method to trigger a click event in the onCreate() method? ~txt_channel.performClick();
Now that the logic is clear, let's go straight to the code:
MainActivity.java :
/**
* Created by Coder-pig on 2015/8/28 0028.
*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
//UI Object
private TextView txt_topbar;
private TextView txt_channel;
private TextView txt_message;
private TextView txt_better;
private TextView txt_setting;
private FrameLayout ly_content;
//Fragment Object
private MyFragment
```java
txt_channel.setSelected(true);
if (fg1 == null) {
fg1 = new MyFragment("The first Fragment");
fTransaction.add(R.id.ly_content, fg1);
} else {
fTransaction.show(fg1);
}
break;
case R.id.txt_message:
setSelected();
txt_message.setSelected(true);
if (fg2 == null) {
fg2 = new MyFragment("The second Fragment");
fTransaction.add(R.id.ly_content, fg2);
} else {
fTransaction.show(fg2);
}
break;
case R.id.txt_better:
setSelected();
txt_better.setSelected(true);
if (fg3 == null) {
fg3 = new MyFragment("The third Fragment");
fTransaction.add(R.id.ly_content, fg3);
} else {
fTransaction.show(fg3);
}
break;
case R.id.txt_setting:
setSelected();
txt_setting.setSelected(true);
if (fg4 == null) {
fg4 = new MyFragment("The fourth Fragment");
fTransaction.add(R.id.ly_content, fg4);
} else {
fTransaction.show(fg4);
}
break;
}
fTransaction.commit();
}
3. Code Download:
FragmentDemo.zip: Download FragmentDemo.zip Declaration: Image materials from App: better, this code is only for demonstration and not for commercial use!
4. Summary of This Section
>
In this section, we explained how to use a LinearLayout with four TextViews to implement a bottom navigation bar and the logic of Fragment add, hide, and show. It's quite simple. Finally, I would like to thank the base god of Pig Secret Base, B God, and good programmer Cao God for some guidance! Thank you very much, just to commemorate Pig's return to the forced dress circle, well, return to the application layer, hehe, this section is here, thank you~
-1.0 Android Basic Tutorial Introduction
-1.0.1 Latest Android Basic Tutorial Catalog for 2015
-1.1 Background and System Architecture Analysis
-1.2 Development Environment Construction
-1.2.1 Developing Android APP with Eclipse + ADT + SDK
-1.2.2 Developing Android APP with Android Studio
-1.3 Solving SDK Update Issues
-1.4 Genymotion Emulator Installation
-1.5.1 Git Tutorial on Basic Operations of Local Repositories
-1.5.2 Git on Using GitHub to Set Up a Remote Repository
-1.6 How to Play with 9 (Nine Sister) Pictures
-1.7 Interface Prototype Design
-1.8 Project Related Analysis (Various Files, Resource Access)
-1.9 Android Program Signing and Packaging
-1.11 Decompiling APK to Obtain Code & Resources
-2.1 The Concept of View and ViewGroup
-2.2.1 LinearLayout (Linear Layout)
-2.2.2 RelativeLayout (Relative Layout)
-2.2.3 TableLayout (Table Layout)
-2.2.4 FrameLayout (Frame Layout)
-2.2.5 GridLayout (Grid Layout)
-2.2.6 AbsoluteLayout (Absolute Layout)
-2.3.1 TextView (Text Box) Detailed Explanation
-2.3.2 EditText (Input Box) Detailed Explanation
-2.3.3 Button (Button) and ImageButton (Image Button)
-[2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)](android-
2.6.4 Simple Usage of DrawerLayout (Official Side-Slide Menu)
3.6 Responding to System Setting Events (Configuration Class)
4.4.2 Further Exploration of ContentProvider - Document Provider
5.2.1 Detailed Explanation of Fragment Instance - Implementation of Bottom Navigation Bar (Method 1)
5.2.2 Detailed Explanation of Fragment Instance - Implementation of Bottom Navigation Bar (Method 2)
5.2.3 Detailed Explanation of Fragment Instance - Implementation of Bottom Navigation Bar (Method 3)
5.2.4 Detailed Explanation of Fragment Instance - Bottom Navigation Bar + ViewPager Page Switching
6.2 Data Storage and Access - SharedPreferences to Save User Preferences
6.3.1 Data Storage and Access - First Encounter with SQLite Database
6.3.2 Data Storage and Access - Another Look at SQLite Database
7.1.1 Things to Learn in Android Network Programming and Http Protocol Study
7.1.2 Learning about Android Http Request and Response Headers
[7.5.1 Basic Usage of WebView (Web Page View)
8.3.17 Detailed Explanation of Canvas API (Part 2) - A Collection of Clipping Methods
8.3.18 Detailed Explanation of Canvas API (Part 3) - Matrix and drawBitmapMesh
8.4.3 Android Animation Collection - Property Animation - First Encounter
8.4.4 Android Animation Collection - Property Animation - Another Encounter
11.0 "The 2015 Latest Android Basic Tutorial" Concludes with Fireworks~
12.2 DrySister Girl Viewing App (First Edition) - 2. Parsing Backend Data
12.4 DrySister Girl Viewing App (First Edition) - 4. Adding Data Caching (Incorporating SQLite)