Slide bar and status bar, slide bar Status Bar

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.