Android self-study course-Tabs and androidtabs of Material Design

Android self-study course-Tabs and androidtabs of Material Design

I haven't written a blog for several days. Today I will give you a good translation. I have been practicing for a while, and I have bought a new book "android development art exploration". If so, I will share it with you.

 

Use Android Material Design to process Tabs

Android Design Support Library makes it more compatible with Android 2.1 and uses material design. In the Design support Library, some components such as navigation drawer, floating action button, snackbar, tabs, floating labels and animation frameworks have been introduced. In this section, we will learn how to use Tabs of material design.

Before going deeper, we suggest you read this tabs document and she will tell you when to implement Tabs.

 

1. required preparation

We will create a new project to apply material theme. If you haven't understood what material design is, Android Getting Started with Material Design is a good start.

build.gradledependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.android.support:design:23.0.1'}

　　

2. Open colors. xml and add the following

colors.xml<?xml version="1.0" encoding="utf-8"?><resources>    <color name="colorPrimary">#125688</color>    <color name="colorPrimaryDark">#125688</color>    <color name="textColorPrimary">#FFFFFF</color>    <color name="windowBackground">#FFFFFF</color>    <color name="navigationBarColor">#000000</color>    <color name="colorAccent">#c8e8ff</color></resources>

 

3. Add the following to dimens. xml

dimens.xml<resources>    <!-- Default screen margins, per the Android Design guidelines. -->    <dimen name="activity_horizontal_margin">16dp</dimen>    <dimen name="activity_vertical_margin">16dp</dimen>    <dimen name="tab_max_width">264dp</dimen>    <dimen name="tab_padding_bottom">16dp</dimen>    <dimen name="tab_label">14sp</dimen>    <dimen name="custom_tab_layout_height">72dp</dimen></resources>

 

4. Open and add the following styles. xml

styles.xml<resources>     <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">     </style>     <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">        <item name="windowNoTitle">true</item>        <item name="windowActionBar">false</item>        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style> </resources>

 

5. Create a values-v21. Create another styles. xml in it, which is specific to Android 5.0

styles.xml<resources>     <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">        <item name="android:windowContentTransitions">true</item>        <item name="android:windowAllowEnterTransitionOverlap">true</item>        <item name="android:windowAllowReturnTransitionOverlap">true</item>        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>    </style> </resources>

 

6. Modify AndroidManifest. xml to change the value of the android: theme attribute.

AndroidManifest.xml<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="info.androidhive.materialtabs" >     <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:theme="@style/MyMaterialTheme" >        <activity            android:name=".activity.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

 

Run the program:

 

Of course, this is not over yet.

 

7. Create a Fragment activity

OneFragment.javapackage info.androidhive.materialtabs.fragments; import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup; import info.androidhive.materialtabs.R;  public class OneFragment extends Fragment{     public OneFragment() {        // Required empty public constructor    }     @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.fragment_one, container, false);    } }

 

8. Create a layout for fragment

fragment_one.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"    tools:context="info.androidhive.materialtabs.fragments.OneFragment">     <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/one"        android:textSize="40dp"        android:textStyle="bold"        android:layout_centerInParent="true"/> </RelativeLayout>

 

9. So many fragment creation times for testing

2. Fixed Tabs

Fixed Tabs should be used on limited Tabs. The Tabs is fixed at the corresponding position. There are not many new elements in the android design support library, such as CoordinatorLayout, AppBarLayout, and TabLayout. Many of them have already been introduced. I will not mention it again in this lesson.

10. Open activity_main and add the following code:

App: tabMode defines the layout mode of Tablayout. In this example, we use "fixed"

activity_main.xml<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">     <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">         <android.support.v7.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:popupTheme="@style/ThemeOverlay.AppCompat.Light" />         <android.support.design.widget.TabLayout            android:id="@+id/tabs"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:tabMode="fixed"            app:tabGravity="fill"/>    </android.support.design.widget.AppBarLayout>     <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent" /></android.support.design.widget.CoordinatorLayout>

11. Open MainActivity. java and open the following code:

 

TabLayout. setupWithViewPager () assigns Viewpage to Tablayout

SetupViewPager () Defines the number of tabs by setting appropriate fragment and tab name.

ViewPagerAdapter Custom adapter class provides fragments required for the view pager.

 

MainActivity.javapackage info.androidhive.materialtabs.activity; import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar; import java.util.ArrayList;import java.util.List; import info.androidhive.materialtabs.R;import info.androidhive.materialtabs.fragments.OneFragment;import info.androidhive.materialtabs.fragments.ThreeFragment;import info.androidhive.materialtabs.fragments.TwoFragment; public class MainActivity extends AppCompatActivity {     private Toolbar toolbar;    private TabLayout tabLayout;    private ViewPager viewPager;     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);         toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);         getSupportActionBar().setDisplayHomeAsUpEnabled(true);         viewPager = (ViewPager) findViewById(R.id.viewpager);        setupViewPager(viewPager);         tabLayout = (TabLayout) findViewById(R.id.tabs);        tabLayout.setupWithViewPager(viewPager);    }     private void setupViewPager(ViewPager viewPager) {        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());        adapter.addFragment(new OneFragment(), "ONE");        adapter.addFragment(new TwoFragment(), "TWO");        adapter.addFragment(new ThreeFragment(), "THREE");        viewPager.setAdapter(adapter);    }     class ViewPagerAdapter extends FragmentPagerAdapter {        private final List<Fragment> mFragmentList = new ArrayList<>();        private final List<String> mFragmentTitleList = new ArrayList<>();         public ViewPagerAdapter(FragmentManager manager) {            super(manager);        }         @Override        public Fragment getItem(int position) {            return mFragmentList.get(position);        }         @Override        public int getCount() {            return mFragmentList.size();        }         public void addFragment(Fragment fragment, String title) {            mFragmentList.add(fragment);            mFragmentTitleList.add(title);        }         @Override        public CharSequence getPageTitle(int position) {            return mFragmentTitleList.get(position);        }    }}

 

Finally:

Not in the status recently ....