preface
At The 2014 Google IO Conference, Google introduced a new set of Material Design specifications, which also brought good news for the majority of Android developers. Instead of developing Android apps according to the IOS visual draft as before, The visual style of Material Design is cool in itself.
Google also provided us with a series of components that fit the Material Design style, which greatly improved our development efficiency. Since the APP is being modified to Material Design, I will write several articles about Material Design components in combination with the usage in the project. The first one will start from the Toolbar.
I. Introduction to the ToolBar
The Toolbar is a new control introduced in Android5.0 that is intended to replace the ActionBar.
The Actionbar should appear as part of the application UI, but the developer has no complete control over it because it is created by the system and initialized with its parameters. In practice, many developers use the layout to generate a simulated Actionbar instead of the system’s Actionbar. Based on this, Android launched a new control Toolbar after 5.0 to replace the Actionbar.
2. ToolBar Properties
Collates the more common properties of the Toolbar
1, Toolbar :navigationIcon Sets navigation button
2, Toolbar: LOGO Sets the logo icon
3, Toolbar: Title Sets the title
4, toolbar:titleTextColor sets the titleTextColor
5, Toolbar: Subtitle Sets the subtitle
6, the toolbar: subtitleTextColor set subtitle text color
7, the toolbar: titleTextAppearance set the title text related properties, such as font, color, size, etc
8, the toolbar: subtitleTextAppearance set the subtitle text related properties, such as font, color, size, etc
9, Toolbar :logoDescription Logo description
Android: Background Toolbar Background
11, Android: Theme
Iii. ToolBar Use
This article is based on the latest androidx environment, in fact, the use of the same, is the package name has changed.
-
Use the ToolBar to ensure that an Activity inherits AppCompatActivity,
-
In the application manifest, set the Application element to use one of the NoActionBar themes of AppCompat. Using one of these themes prevents the application from using the native ActionBar class to provide the application bar.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<! -- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item> </style> Copy the codeAdd Toolbar controls to the XML layout file
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="? attr/actionBarSize"
android:background="? attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:subtitleTextColor="#FFF" app:titleTextColor="#FFF" tools:ignore="MissingConstraints" /> Copy the codeInitialize Toolbar related properties in the Activity
// Set the ToolBar title
toolbar.setTitle("ToolBar");
// Set the ToolBar subtitle
toolbar.setSubtitle("this is toolbar");
// Set the navigation button
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24,null)); // Set the Logo icon toolbar.setLogo(getResources().getDrawable(R.drawable.ic_baseline_group_24,null)); // Set the overflow menu icon toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_baseline_more_vert_24,null)); / / set Menu toolbar.inflateMenu(R.menu.toolbar_menu); // Set the Navigation Button listener toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); // Set Menu listener toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.collect: Toast.makeText(ToolBarActivity.this."Collection", Toast.LENGTH_SHORT).show(); break; case R.id.outLogin: Toast.makeText(ToolBarActivity.this."Log out", Toast.LENGTH_SHORT).show(); break; case R.id.appModel: Toast.makeText(ToolBarActivity.this."Night mode", Toast.LENGTH_SHORT).show(); break; } return false; } }); Copy the codeThe above code is the basic setup for the Toolbar, with the Menu layout file attached
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/outLogin" android:title="Log out" /> <item android:id="@+id/appModel" android:title="Night mode" /> <item android:id="@+id/collect" android:icon="@drawable/ic_baseline_stars_24" android:title="Collection" app:showAsAction="ifRoom" /> </menu> Copy the codeWe set 3 items in the menu file, but according to the picture above, only 2 items are displayed in the pop-up bubble, and the “Favorites” button is displayed in the form of pictures.
Therefore, we need to pay attention to the following: app:showAsAction property, this property is to set the menu display mode, there are five values, mainly used in ifRoom, never, always,
- IfRoom says display on the Toolbar if there is room on the Toolbar, in the Overflow menu if there is no room;
- The never table is always displayed in the overflow menu;
- Always means always displayed on the Toolbar;
Iv. ToolBar Cases
Based on the above learning, we achieved a common effect in development:
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="? attr/actionBarSize"
android:background="? attr/colorPrimary" app:contentInsetStartWithNavigation="0dp" app:subtitleTextColor="#FFF" app:titleTextColor="#FFF" tools:ignore="MissingConstraints"> <EditText android:textSize="14dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/shape_toolbar" android:hint="Please enter search keywords" android:padding="5dp" /> </androidx.appcompat.widget.Toolbar> Copy the codetoolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24, null));
toolbar.inflateMenu(R.menu.toolbar_case_menu);
Copy the codeNote: The default NavigationIcon and Title have some space between them. Clearing this space is as simple as adding a line to the Toolbar property:
app:contentInsetStartWithNavigation="0dp"
Copy the codeSource code download contains Material Design series control set, regularly updated, please look forward to!
Five, the summary
Material Design style control, I especially like, feel android UI interface is now more and more beautiful, many friends project has been reconstructed, choose Material Design style control, I hope this article is helpful to Android beginners, together!
Thank you so much for reading this article! Your praise and comments are the biggest motivation for my creation!
My WeChat: Jaynm888
Programmer interview networking group: 764040616Android programmers are cordially invited to join the wechat communication group, the public number reply add group or add my wechat invite into the group.
