5.2.2 Fragment Example Detailed - Bottom Navigation Bar Implementation (Method 2)
Category Android Basic Beginner Tutorial
Introduction:
>
In the previous section, we implemented a bottom navigation bar using LinearLayout + TextView. Each click required resetting the state of all TextViews and then selecting the clicked TextView, which was somewhat cumbersome. In this section, we will use another method: RadioGroup + RadioButton to achieve the same effect as the previous section!
1. Some Random Thoughts
This section uses RadioButton for single-choice effects. If you are unfamiliar with it or have never used it, you can refer to: RadioButton. In short, we will wrap a RadioGroup around four RadioButtons, and like before, we will divide them in a 1:1:1:1 ratio.
2. Implementation Process
PS: Here, we directly use the materials from the previous section! Additionally, resources of the drawable class have modified the selected state to checked!
Step 1: Write some resource files for the bottom options
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_checked="true" />
<item android:drawable="@mipmap/tab_channel_normal" />
</selector>
Follow the same pattern for the other three!
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_checked="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
>
When we used TextView to implement the bottom navigation bar earlier, we noticed a problem: almost all attributes of each TextView were the same. We suggested extracting the same attributes into a Style, but some friends might be lazy or unsure how to do it. Here's a demonstration:
First, let's take one of the RadioGroup tags:
<RadioButton
android:id="@+id/rb_channel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:button="@null"
android:drawableTop="@drawable/tab_menu_channel"
android:gravity="center"
android:paddingTop="3dp"
android:text="@string/tab_menu_alert"
android:textColor="@drawable/tab_menu_text"
android:textSize="18sp" />
We can extract the common attributes of each RadioButton into the style.xml file:
<style name="tab_menu_item">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@drawable/tab_menu_bg</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">@drawable/tab_menu_text</item>
<item name="android:textSize">18sp</item>
</style>
Then, in our activity_main.xml, we don't need to write the same code repeatedly for each RadioButton. We just need to set **style="@style/tab_menu_item"** for the RadioButton!
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"
android:background="@color/bg_gray"
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:text="信息"
android:textColor="@color/text_topbar"
android:textSize="18sp" />
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_alignParentBottom="true"
android:background="@color/div_white" />
</RelativeLayout>
<RadioGroup
android:id="@+id/rg_tab_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@color/bg_white"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_channel"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_channel"
android:text="@string/tab_menu_alert" />
<RadioButton
android:id="@+id/rb_message"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_message"
android:text="@string/tab_menu_profile" />
<RadioButton
android:id="@+id/rb_better"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_better"
android:text="@string/tab_menu_pay" />
<RadioButton
android:id="@+id/rb_setting"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_menu_setting"
<RadioGroup>
<RadioButton
android:text="@string/tab_menu_setting"/>
</RadioGroup>
<View
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_above="@id/rg_tab_bar"
android:background="@color/div_white" />
<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/div_tab_bar"
android:layout_below="@id/ly_top_bar"></FrameLayout>
</RelativeLayout>
Step 3: Hide the Top Navigation Bar
Set the theme attribute in AndroidManifest.xml
android:theme="@style/Theme.AppCompat.NoActionBar"
Step 4: Create a Simple Layout and Class for a Fragment
Directly copy the layout and Fragment from the previous section:
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="呵呵"
android:textColor="@color/text_yellow"
android:textSize="20sp"/>
</LinearLayout>
MyFragment.java:
/**
* Created by Coder-pig on 2015/8/29 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;
}
}
Step 5: Write MainActivity.java
This is much simpler than using TextView, so I won't go into detail. Here's the code:
MainActivity.java
/**
* Created by Coder-pig on 2015/8/29 0028.
*/
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{
private RadioGroup rg_tab_bar;
private RadioButton rb_channel;
//Fragment Object
private MyFragment fg1,fg2,fg3,fg4;
private FragmentManager fManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fManager = getFragmentManager();
rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
rg_tab_bar.setOnCheckedChangeListener(this);
//Get the first radio button and set it to checked state
rb_channel = (RadioButton) findViewById(R.id.rb_channel);
rb_channel.setChecked(true);
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
FragmentTransaction fTransaction = fManager.beginTransaction();
hideAllFragment(fTransaction);
switch (checkedId){
case R.id.rb_channel:
if(fg1 == null){
fg1 = new MyFragment("First Fragment");
fTransaction.add(R.id.ly_content,fg1);
}else{
fTransaction.show(fg1);
}
break;
case R.id.rb_message:
if(fg2 == null){
fg2 = new MyFragment("Second Fragment");
fTransaction.add(R.id.ly_content,fg2);
}else{
fTransaction.show(fg2);
}
break;
case R.id.rb_better:
if(fg3 == null){
fg3 = new MyFragment("Third Fragment");
fTransaction.add(R.id.ly_content,fg3);
}else{
fTransaction.show(fg3);
}
break;
case R.id.rb_setting:
if(fg4 == null){
fg4 = new MyFragment("Fourth Fragment");
fTransaction.add(R.id.ly_content,fg4);
}else{
fTransaction.show(fg4);
}
break;
}
fTransaction.commit();
}
//Hide all fragments
private void hideAllFragment(FragmentTransaction fragmentTransaction){
if(fg1 != null)fragmentTransaction.hide(fg1);
if(fg2 != null)fragmentTransaction.hide(fg2);
if(fg3 != null)fragmentTransaction.hide(fg3);
if(fg4 != null)fragmentTransaction.hide(fg4);
}
}
PS: I forgot to mention in the previous section that FragmentTransaction can only be used once. Each time you use it, you need to call the beginTransaction()
method of FragmentManager to get the FragmentTransaction transaction object!
3. Running Effect
The effect is the same as the previous section:
4. Code Download
FragmentDemo2.zip: FragmentDemo2.zip Download
5. Summary
This section explains the second method to implement a bottom navigation bar using RadioGroup and RadioButton. With radio buttons, we don't need to reset the selected state of all TextViews and then set the selected state of the clicked TextView to true, which allows us to write less code. That's all for this section. Thank you!
-1.0.1 2015 Android Basic Tutorial Table of Contents -1.1 Background and System Architecture Analysis
-1.2 Development Environment Setup
-1.2.1 Developing Android Apps with Eclipse + ADT + SDK
-1.2.2 Developing Android Apps with Android Studio
-1.3 Solving SDK Update Issues
-1.4 Genymotion Emulator Installation
-1.5.1 Git Tutorial: Basic Operations on Local Repositories
-1.5.2 Using GitHub to Set Up a Remote Repository with Git
-1.6 How to Use 9-Patch Images
-1.7 Interface Prototype Design
-1.8 Project-Related Analysis (Various Files, Resource Access)
-1.9 Android Application Signing and Packaging
-1.11 Decompiling APK to Obtain Code & Resources
-2.1 Concepts 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 Detailed Explanation of TextView (Text Field)
-2.3.2 Detailed Explanation of EditText (Input Field)
-2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)
-2.3.6 ToggleButton and Switch
-2.3.7 ProgressBar (Progress Bar)
-2.3.9 RatingBar (Star Rating Bar)
-2.4.1 ScrollView (Scroll Bar)
-2.4.2 Date & Time Components (Part 1)
-2.4.3 Date & Time Components (Part 2)
-2.4.5 Simple Usage of ListView
-2.4.6 Optimization of BaseAdapter
-2.4.7 Focus Issues with ListView
-2.4.8 Solving Checkbox Misalignment in ListView
-2.4.9 Data Update Issues in ListView
-2.5.0 Building a Reusable Custom BaseAdapter
-2.5.1 Implementing Multiple Item Layouts in ListView
-2.5.2 Basic Usage of GridView (Grid View)
-2.5.3 Basic Usage of Spinner (List Option Box)
-2.5.4 Basic Usage of AutoCompleteTextView (Auto-Complete Text Field)
-2.5.5 Basic Usage of ExpandableListView (Collapsible List)
-2.5.6 Basic Usage of ViewFlipper (Flip View)
-2.5.8 Detailed Explanation of Notification (Status Bar Notification)
-2.5.9 Detailed Explanation of AlertDialog (Dialog Box)
-2.6.0 Basic Usage of Other Common Dialogs
-2.6.1 Basic Usage of PopupWindow (Floating Box)
-2.6.3 Simple Usage of ViewPager
-2.6.4 Simple Usage of DrawerLayout (Official Side Sliding Menu)
-3.1.1 Event Handling Mechanism Based on Listeners
-3.2 Event Handling Mechanism Based on Callbacks
-3.3 Analysis of Handler Message Passing Mechanism
-3.4 TouchListener vs OnTouchEvent + Multi-Touch
-3.5 Listening for Content Changes in EditText
-3.6 Responding to System Setting Changes (Configuration Class)
-3.7 AsyncTask Asynchronous Tasks
-4.1.1 Beginning with Activity
-4.1.2 Intermediate with Activity
-4.2.1 Introduction to Service
-4.3.1 Basic with BroadcastReceiver
-4.3.2 In-Depth with BroadcastReceiver
-4.4.1 Introduction to ContentProvider
-4.4.2 Deeper with ContentProvider – Document Provider
-4.5.2 Passing Complex Data with Intent
-5.1 Basic Overview of Fragment
-5.2.1 Fragment Example Walkthrough – Bottom Navigation Bar Implementation (Method 1)
- 5.2.2 Fragment Example Walkthrough – Bottom Navigation Bar Implementation (Method 2)
-5.2.3 Fragment Example Walkthrough – Bottom Navigation Bar Implementation (Method 3)
-5.2.4 Fragment Example Walkthrough – Bottom Navigation Bar + ViewPager for Swiping Between Pages
6.2 Data Storage and Access - Saving User Preferences with SharedPreferences
6.3.1 Data Storage and Access - Introduction to SQLite Database
6.3.2 Data Storage and Access - Further Exploration of SQLite Database
7.1.1 Android Network Programming Essentials and Learning HTTP Protocol
7.5.3 Important Considerations for WebView in Android 4.4 and Later
8.3.4 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 1)
8.3.5 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 2)
8.3.6 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 3)
8.3.7 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 4)
8.3.8 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 5)
8.3.14 Paint Enum/Constant Values and ShadowLayer Shadow Effects
8.3.17 Canvas API Detailed Explanation (Part 2) Clipping Methods Collection
8.3.18 Canvas API Detailed Explanation (Part 3) Matrix and drawBitmapMesh
8.4.3 Android Animation Collection - Property Animation - Introduction
8.4.4 Android Animation Collection - Property Animation - Further Exploration
11.0 "2015 Latest Android Basic Beginner Tutorial" Completion Celebration
12.2 DrySister Viewing Girls App (First Edition) - 2. Parsing Backend Data
12.4 DrySister View Girls App (Version 1) – 4. Adding Data Caching (Integrating SQLite)
12.5 DrySister View Girls App (Version 1) – 5. Code Review, Adjustments, and Logging Class Writing