In Android development, a very important layout is the bottom Title bar. With the bottom Title bar, we have the framework of the whole software UI development. Generally speaking, the layout of the whole software starts from the bottom Title bar, then other modules are written to form a complete software, so how can we write a bottom label?Title bar, I use fragments here to achieve, of course, the dynamic loading of fragments, static loading can not achieve the click button to switch fragments.
Start with the effect map:
github project address: https://github.com/Geeksongs/ButtonTitile
Are there four categories in each bottom Title bar: Home page, Location, Chat and Settings.Each category corresponds to a fragment above, so we need to create four fragments to correspond to each of the following categories. The bottom navigation bar below is not a fragment implementation, but a combination of imageview and textview directly in the main layout activity_main.xml.Above activity_main.xml is fragment, so use the frame layout framelayout, and below is the layout code for activity_main.xml:
1.activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:id="@+id/tab_linear" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" android:background="@color/colorPrimary"> <LinearLayout android:id="@+id/home" android:orientation="vertical" android:layout_weight="1" android:layout_width="0dp" android:layout_height="60dp"> <ImageView android:layout_gravity="center" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/home"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="homepage" android:textColor="@drawable/text_color_back" /> </LinearLayout> <LinearLayout android:id="@+id/location" android:orientation="vertical" android:layout_weight="1" android:layout_width="0dp" android:layout_height="60dp"> <ImageView android:layout_gravity="center" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/location_view"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="place" android:textColor="@drawable/text_color_back" /> </LinearLayout> <LinearLayout android:id="@+id/linear_polymer" android:orientation="vertical" android:layout_weight="1" android:layout_width="0dp" android:layout_height="60dp"> <ImageView android:layout_gravity="center" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/comment"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="chat" android:textColor="@drawable/text_color_back" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:id="@+id/linear_user" android:layout_weight="1" android:layout_width="0dp" android:layout_height="60dp"> <ImageView android:layout_gravity="center" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/contrast_view" /> <TextView android:layout_gravity="center" android:text="Set up" android:textColor="@drawable/text_color_back" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout> <FrameLayout android:id="@+id/fragment_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/tab_linear"> </FrameLayout> </RelativeLayout>
Written interfaces are as follows:
In our initial demo video, you can also see that the color of the buttons changes every time we click a button, so we need to write selectors for each button. Here is only the selector for the first selector "Home Page". There are also three buttons, so we can build selectors in the same way, if you want to know something elseIf written by the selector of the button, go to github: https://github.com/Geeksongs/ButtonTitile
2.home.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/home3"/> <item android:drawable="@drawable/home31"/> </selector>
The pictures above are all placed in the drawble folder. We strongly recommend the Ali Cloud Vector Icon Gallery. Here you can find the icons you want. The web address is as follows: https://www.iconfont.cn/ .Then find the icon you need and download it!
3. fragment1.java
The next step is to write the fragment 1.java code, in which we need to note that we will return the view layout of the entire fragment.xml instead of directly returning a control such as a textview or imageview, which can be confusing for beginners. Why not return the XML interface corresponding to the entire fragment, as follows:
import android.os.Bundle; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; /** * A simple {@link Fragment} subclass. */ public class Fragment1 extends Fragment { private String fragmentText; private TextView fragmentTextView; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_fragment1,container,false); return view;//Return to view layout } public Fragment1(String fragmentText) { this.fragmentText=fragmentText; } }
The rest of the fragments have similar code, except that their construction methods have slightly different names, using fragment1(2/3/4), since they have different class names.Java code for fragments is written, so it's time to write XML code for fragments, so that you can pass the written interface to the main interface: activity_main.xml, with the following code:
4. fragment1.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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=".Fragment1"> <!-- TODO: Update blank fragment layout --> <TextView android:id="@+id/fragment1" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="30dp" android:text="This is the first fragment" /> </FrameLayout>
Since the default font size for Android is smaller, I've changed the font size slightly to 30dp. You can also change it if you want. We need to create 4 copies of this fragment file. After all, there are four buttons on the bottom Title bar.
V. MainActivity.java
Here is the Java code for the main activity:
public class MainActivity extends AppCompatActivity implements View.OnClickListener{ LinearLayout homeLinear; LinearLayout listLinear; LinearLayout polyLinear; LinearLayout userLinear; Fragment1 fragmentHome; Fragment2 fragmentList; Fragment3 fragmentPoly; Fragment4 fragmentUser; private FragmentManager mfragmentManger; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); homeLinear= (LinearLayout) findViewById(R.id.home); listLinear= (LinearLayout) findViewById(R.id.location); polyLinear= (LinearLayout) findViewById(R.id.linear_polymer); userLinear= (LinearLayout) findViewById(R.id.linear_user); homeLinear.setOnClickListener(this); listLinear.setOnClickListener(this); polyLinear.setOnClickListener(this); userLinear.setOnClickListener(this); mfragmentManger = getSupportFragmentManager(); homeLinear.performClick(); } @Override public void onClick(View view) { FragmentTransaction fragmentTransaction = mfragmentManger.beginTransaction();//It can only be a local variable, not a global variable, otherwise it cannot be repeated commit //FragmentTransaction Can only be used once hideAllFragment(fragmentTransaction); switch (view.getId()){ case R.id.home: setAllFalse(); homeLinear.setSelected(true); if (fragmentHome==null){ fragmentHome=new Fragment1("Home"); fragmentTransaction.add(R.id.fragment_frame,fragmentHome); }else{ fragmentTransaction.show(fragmentHome); } break; case R.id.location: setAllFalse(); listLinear.setSelected(true); if(fragmentList==null){ fragmentList=new Fragment2("List"); fragmentTransaction.add(R.id.fragment_frame,fragmentList); }else { fragmentTransaction.show(fragmentList); } break; case R.id.linear_polymer: setAllFalse(); polyLinear.setSelected(true); if(fragmentPoly==null){ fragmentPoly=new Fragment3("Polymer"); fragmentTransaction.add(R.id.fragment_frame,fragmentPoly); }else { fragmentTransaction.show(fragmentPoly); } break; case R.id.linear_user: setAllFalse(); userLinear.setSelected(true); if(fragmentUser==null){ fragmentUser=new Fragment4("User"); fragmentTransaction.add(R.id.fragment_frame,fragmentUser); }else { fragmentTransaction.show(fragmentUser); } break; } fragmentTransaction.commit();//Remember to have to commit,Otherwise it has no effect } private void hideAllFragment(FragmentTransaction fragmentTransaction) { if(fragmentHome!=null){ fragmentTransaction.hide(fragmentHome); } if(fragmentList!=null){ fragmentTransaction.hide(fragmentList); } if(fragmentPoly!=null){ fragmentTransaction.hide(fragmentPoly); } if(fragmentUser!=null){ fragmentTransaction.hide(fragmentUser); } } private void setAllFalse() { homeLinear.setSelected(false); listLinear.setSelected(false); polyLinear.setSelected(false); userLinear.setSelected(false); } }
Our bottom title bar is perfect. See the github source code where you don't know much about the code and the overall project layout: https://github.com/Geeksongs/ButtonTitile Welcome to star!