项目地址：
GitHub: https://github.com/xiaole0310/LoginButtons

项目截图

项目截图

这是个很简单的展示的demo,适合刚入门的新手。大体可以分为 自定义图形，Viewpager和Tablayout的联动。由于公司的项目都是用eclipse开发的，然后用的方法都很旧，学习这个demo也让自己转Android studio学到了很多。
总之 我学到最关键的一点就是 Tablayout和Viewpager进行联动。代码如下

TabLayout tabLayout = (TabLayout) findViewById(R.id.view);
tabLayout.setupWithViewPager(vp);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

记得在viewPager的Adapter里面重写getPageTitle()这个方法来给相对应的页面生成标题。

项目源代码：

package shaishav.com.androidloginbuttonexample;

import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

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.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;

import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {


    private SectionsPagerAdapter mSectionsPagerAdapter;

    private ViewPager mViewPager;
    private Snackbar sc_bar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);


    }

//菜单上的东西
//    @Override
//    public boolean onCreateOptionsMenu(Menu menu) {
//        // Inflate the menu; this adds items to the action bar if it is present.
//        getMenuInflater().inflate(R.menu.menu_main_activity1, menu);
//        return true;
//    }
// 菜单的点击选项
//    @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);
//    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            int sectionNumber = getArguments().getInt(ARG_SECTION_NUMBER);
            View rootView = inflater.inflate(R.layout.fragment_main_activity1, container, false);


            switch (sectionNumber) {
                case 1:
                    rootView = inflater.inflate(R.layout.activity_main, container, false);
                    final Button bt = (Button) rootView.findViewById(R.id.button);

                    bt.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Snackbar.make(bt,"SnackBar 测试",Snackbar.LENGTH_LONG).setAction("点击", new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    bt.setText("测试成功");
                                }
                            }).show();

                        }
                    });
                    break;
                case 2:
                    rootView = inflater.inflate(R.layout.square_button_transparent, container, false);
                    break;
                case 3:
                    rootView = inflater.inflate(R.layout.regular_buttons, container, false);
                    break;
                case 4:
                    rootView = inflater.inflate(R.layout.regular_transparent, container, false);
                    break;
                case 5:
                    rootView = inflater.inflate(R.layout.regular_rounded, container, false);
                    break;
                case 6:
                    rootView = inflater.inflate(R.layout.circular_button, container, false);
                    break;
                case 7:
                    rootView = inflater.inflate(R.layout.circular_transparent, container, false);
                    break;
            }

            return rootView;

        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).
            return PlaceholderFragment.newInstance(position + 1);
        }



        @Override
        public int getCount() {
            // Show 7 total pages.
            return 7;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "Square Button";
                case 1:
                    return "Square Transparent";
                case 2:
                    return "Regular Button";
                case 3:
                    return "Rounded Transparent";
                case 4:
                    return "Regular Rounded";
                case 5:
                    return "Circular";
                case 6:
                    return "Circular Transparent";
            }
            return null;
        }
    }
}