Easy Tutorial
❮ Android Tutorial Upload File Zookeeper Node Feature ❯

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">

        &lt;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:

>

Well, let's answer these questions one by one:

>

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.4 ImageView (Image View)

-[2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)](android-

Follow on WeChat

❮ Android Tutorial Upload File Zookeeper Node Feature ❯