Slide bar and status bar, slide bar Status Bar
1 styles. xml source code
<Style name = "AppTheme" parent = "Theme. AppCompat. Light. DarkActionBar"> <! -- Customize your theme here. --> <! -- Color and font color of the selected icon --> <! -- Main. Preliminary --> <item name = "colorPrimary"> @ color/colorPrimary </item> <! -- Deep --> <item name = "colorPrimaryDark"> @ color/colorPrimaryDark </item> <! -- Warning --> <item name = "col1_cent"> @ color/col1_cent </item> </style>
2 main layout DrawerLayout main layout activity_my.xml source code
<? Xml version = "1.0" encoding = "UTF-8"?> <Android. support. v4.widget. drawerLayout 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: id = "@ + id/drawer_layout" android: layout_width = "match_parent" android: layout_height = "match_parent" android: fitsSystemWindows = "true" tools: openDrawer = "start"> <! -- First location --> <! -- The content of your main interface must be placed in the first position of Drawerlayout and placed according to your own needs, for example, LinearLayout layout or RelativeLayout layout. It can also be a single control, such as TextView --> <include layout = "@ layout/app_bar_main" android: layout_width = "match_parent" android: layout_height = "match_parent"/> <! -- Second location --> <! -- Used to put the content in Drawerlayout. Here, NavigationView is used to achieve the slide bar effect similar to that in Google pLay. It must be in build. add compile 'com. android. support: design: 22.2.0 '; in addition, if you do not need the NavigationView effect, you can place a normal layout file as a normal slide bar. --> <! -- Note: if you use the special properties of NavigationView (other controls are also the same), you need to add the namespace: xmlns: app = "http://schemas.android.com/apk/res-auto"; in addition, be sure to add android: layout_gravity = "left" attribute. --> <! -- Property parsing: the layout of the head part in app: headerLayout: NavigationView is self-implemented. app: menu: Specifies the Menu layout in Nav, which is the button in the Menu, which is written by yourself, put it in the res/menu/folder; app: itemTextColor: used to set the color selector of menu item in Nav. There are also some attributes: Same as itemTextColor usage, specify a color selector to achieve different color effects. App: itemIconTint: app: itemBackground: --> <android. support. design. widget. navigationView android: id = "@ + id/nav_view" android: layout_width = "wrap_content" android: layout_height = "match_parent" android: layout_gravity = "start" android: fitsSystemWindows = "true" app: headerLayout = "@ layout/nav_header_main" app: menu = "@ menu/activity_main_drawer"/> </android. support. v4.widget. drawerLayout>
2 layout on the right
App_bar_main.xml source code
<? Xml version = "1.0" encoding = "UTF-8"?> <Android. support. design. widget. coordinatorLayout 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" android: fitsSystemWindows = "true" tools: context = "www.etoury.com. etoury. mainActivity "> <! -- Title bar --> <android. support. design. widget. appBarLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: theme = "@ style/AppTheme. appBarOverlay "> <android. support. v7.widget. toolbar android: id = "@ + id/toolbar" android: layout_width = "match_parent" android: layout_height = "? Attr/actionBarSize "android: background = "? Attr/colorPrimary "app: popupTheme =" @ style/AppTheme. PopupOverlay "/> </android. support. design. widget. AppBarLayout> <! -- Content --> <include layout = "@ layout/content_main"/> <! -- Action btn --> <android. support. design. widget. floatingActionButton android: id = "@ + id/fab" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "bottom | end" android: layout_margin = "@ dimen/fab_margin" android: src = "@ android: drawable/ic_dialog_email"/> </android. support. design. widget. coordinatorLayout>
content_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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="www.etoury.com.etoury.MainActivity" tools:showIn="@layout/app_bar_main"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /></RelativeLayout>
3 sidebar
3.1 sidebar Header
nav_header_main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="@dimen/nav_header_height" android:background="@drawable/side_nav_bar" android:gravity="bottom" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="@dimen/nav_header_vertical_spacing" android:src="@android:drawable/sym_def_app_icon" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/nav_header_vertical_spacing" android:text="Android Studio" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="android.studio@android.com" /></LinearLayout>
3.2 sidebar menu
activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_camera" android:icon="@drawable/ic_menu_camera" android:title="Import" /> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_menu_gallery" android:title="Gallery" /> <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_menu_slideshow" android:title="Slideshow" /> <item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage" android:title="Tools" /> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_menu_share" android:title="Share" /> <item android:id="@+id/nav_send" android:icon="@drawable/ic_menu_send" android:title="Send" /> </menu> </item></menu>
4. java files
Package www.etoury.com. etoury; import android. OS. bundle; import android. support. design. widget. floatingActionButton; import android. support. design. widget. snackbar; import android. view. view; import android. support. design. widget. navigationView; import android. support. v4.view. gravityCompat; import android. support. v4.widget. drawerLayout; import android. support. v7.app. actionBarDrawerToggle; import android. support. v7.app. appCompatActivity; import android. support. v7.widget. toolbar; import android. view. menu; import android. view. menuItem; public class MainActivity extends AppCompatActivity implements NavigationView. onNavigationItemSelectedListener {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); Toolbar toolbar = (Toolbar) findViewById (R. id. toolbar); setsuppactionactionbar (toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById (R. id. fab); fab. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View view) {Snackbar. make (view, "Replace with your own action", Snackbar. LENGTH_LONG ). setAction ("Action", null ). show () ;}}); // Title header DrawerLayout drawer = (DrawerLayout) findViewById (R. id. drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle (this, drawer, toolbar, R. string. navigation_drawer_open, R. string. navigation_drawer_close); drawer. setDrawerListener (toggle); toggle. syncState (); // slide bar NavigationView navigationView = (NavigationView) findViewById (R. id. nav_view); navigationView. setNavigationItemSelectedListener (this) ;}@ Override public void onBackPressed () {DrawerLayout drawer = (DrawerLayout) findViewById (R. id. drawer_layout); if (drawer. isDrawerOpen (GravityCompat. START) {drawer. closeDrawer (GravityCompat. START);} else {super. onBackPressed () ;}}// Menu in the title bar @ Override public boolean onCreateOptionsMenu (menu) {// Inflate the Menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. menu_main, menu); return true;} // selected event @ Override public boolean onOptionsItemSelected (MenuItem item) {// Handle action bar item clicks here. the action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest. xml. int id = item. getItemId (); // noinspection SimplifiableIfStatement if (id = R. id. action_settings) {return true;} return super. onOptionsItemSelected (item);} // Click Event @ SuppressWarnings ("StatementWithEmptyBody") @ Override public boolean onNavigationItemSelected (MenuItem item) {// Handle navigation view item clicks here. int id = item. getItemId (); if (id = R. id. nav_camera) {// Handle the camera action} else if (id = R. id. nav_gallery) {} else if (id = R. id. nav_slideshow) {} else if (id = R. id. nav_manage) {} else if (id = R. id. nav_share) {} else if (id = R. id. nav_send) {}// close the slide bar DrawerLayout drawer = (DrawerLayout) findViewById (R. id. drawer_layout); drawer. closeDrawer (GravityCompat. START); return true ;}}
Conclusion,
1. toolbar
Note: The things placed in CoordinatorLayout must be designed and implemented to work with it; otherwise, they will not work with any other sibling views (sibling views. But... Toolbar is not suitable. Don't worry, there is no new special Toolbar here. Only one component is used to prepare the Toolbar and CoordinatorLayout to work more perfectly. This is a simple task, but it simply uses AppBarLayout to wrap the Toolbar. That's it!
2. Use drawerlayout to implement drawer Effect
3. navigationview implements click events for entries in the slide bar.