├── .idea ├── .name ├── compiler.xml ├── copyright │ └── profiles_settings.xml ├── gradle.xml ├── misc.xml ├── modules.xml └── vcs.xml ├── README.md ├── TabLayoutWithViewPager.iml ├── app └── src │ └── main │ ├── AndroidManifest.xml │ ├── java │ └── com │ │ └── example │ │ └── cola │ │ └── tablayoutwithviewpager │ │ ├── ContentFragment.java │ │ └── MainActivity.java │ └── res │ ├── drawable │ ├── facebook.xml │ ├── facebook_logo_32.png │ ├── facebook_logo_64.png │ ├── facebook_logo_select_64.png │ ├── instagram.xml │ ├── instagram_logo_32.png │ ├── instagram_logo_64.png │ ├── instagram_logo_select_64.png │ ├── linkedin.xml │ ├── linkedin_logo_32.png │ ├── linkedin_logo_64.png │ └── linkedin_logo_select_64.png │ ├── layout │ ├── activity_main.xml │ ├── custom_tab_item.xml │ └── fragment_content.xml │ ├── menu │ └── menu_main.xml │ └── values │ └── strings.xml ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.idea/.name: -------------------------------------------------------------------------------- 1 | TabLayoutWithViewPager -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | -------------------------------------------------------------------------------- /.idea/copyright/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 1.7 27 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Android TabLayout with ViewPager 2 | 3 | We will introduce Google's new [TabLayout](https://developer.android.com/reference/android/support/design/widget/TabLayout.html) included in the support design library release for Android "M". 4 | 5 | ### Add Support Library 6 | 7 | To implement sliding tabs, make sure to add the Support Library setup instructions first. (make sure these versions have been updated.) 8 | 9 | ```gradle 10 | dependencies { 11 | compile 'com.android.support:appcompat-v7:22.2.0' 12 | compile 'com.android.support:design:22.2.0' 13 | } 14 | ``` 15 | 16 | ### Sliding Tabs Layout 17 | 18 | Add `android.support.design.widget.TabLayout` that will handle the different tab options, and `android.support.v4.view.ViewPager` component will handle the page between the various fragments we will create. 19 | 20 | ```xml 21 | 22 | 26 | 27 | 31 | 32 | 33 | 37 | 38 | 39 | ``` 40 | 41 | ### Create Fragment 42 | 43 | We define the XML layout(`res/layout/fragment_content.xml`) for the fragment which will be displayed on screen when a particular tab is selected. 44 | ```xml 45 | 49 | 50 | 51 | 58 | 59 | 60 | ``` 61 | 62 | 63 | Then `ContentFragment.java` define the logic for the fragment of tab content. 64 | 65 | ```java 66 | public class ContentFragment extends Fragment { 67 | private static final String ARG_PARAM1 = "param1"; 68 | 69 | // TODO: Rename and change types of parameters 70 | private String mParam1; 71 | 72 | private TextView titleTxtView; 73 | 74 | public static ContentFragment newInstance(String param1) { 75 | ContentFragment fragment = new ContentFragment(); 76 | Bundle args = new Bundle(); 77 | args.putString(ARG_PARAM1, param1); 78 | fragment.setArguments(args); 79 | return fragment; 80 | } 81 | 82 | public ContentFragment() { 83 | // Required empty public constructor 84 | } 85 | 86 | @Override 87 | public void onCreate(Bundle savedInstanceState) { 88 | super.onCreate(savedInstanceState); 89 | if (getArguments() != null) { 90 | mParam1 = getArguments().getString(ARG_PARAM1); 91 | } 92 | } 93 | 94 | @Override 95 | public View onCreateView(LayoutInflater inflater, ViewGroup container, 96 | Bundle savedInstanceState) { 97 | // Inflate the layout for this fragment 98 | View myView = inflater.inflate(R.layout.fragment_content, container, false); 99 | titleTxtView = (TextView)myView.findViewById(R.id.title_txtView); 100 | titleTxtView.setText(mParam1); 101 | return myView; 102 | } 103 | 104 | } 105 | ``` 106 | 107 | ### Implement FragmentPagerAdapter 108 | 109 | Following, we implement the adapter for your `ViewPager` which controls the order of the tabs, the titles and their associated content. The most important methods to implement here are `getPageTitle(int position)` which is used to get the title for each tab and `getItem(int position)` which determines the fragment for each tab. 110 | 111 | ```java 112 | public class PagerAdapter extends FragmentPagerAdapter { 113 | private final List myFragments = new ArrayList<>(); 114 | private final List myFragmentTitles = new ArrayList<>(); 115 | private Context context; 116 | 117 | public PagerAdapter(FragmentManager fm, Context context) { 118 | super(fm); 119 | this.context = context; 120 | } 121 | 122 | public void addFragment(Fragment fragment, String title) { 123 | myFragments.add(fragment); 124 | myFragmentTitles.add(title); 125 | } 126 | 127 | @Override 128 | public Fragment getItem(int position) { 129 | return myFragments.get(position); 130 | } 131 | 132 | @Override 133 | public int getCount() { 134 | return myFragments.size(); 135 | } 136 | 137 | @Override 138 | public CharSequence getPageTitle(int position) { 139 | return myFragmentTitles.get(position); 140 | } 141 | } 142 | ``` 143 | 144 | ### Setup Sliding Tabs 145 | 146 | Finally, we need to attach our `ViewPager` to the `PagerAdapter` and then configure the sliding tabs with a two step process: 147 | 148 | * In the `onCreate()` method of your activity, find the `ViewPager` and connect the adapter. 149 | * Set the `ViewPager` on the `TabLayout` to connect the pager with the tabs. 150 | 151 | ```java 152 | public class MainActivity extends AppCompatActivity { 153 | 154 | TabLayout tabLayout; 155 | ViewPager viewPager; 156 | PagerAdapter adapter; 157 | 158 | @Override 159 | protected void onCreate(Bundle savedInstanceState) { 160 | super.onCreate(savedInstanceState); 161 | setContentView(R.layout.activity_main); 162 | 163 | tabLayout = (TabLayout) findViewById(R.id.tab_layout); 164 | viewPager = (ViewPager) findViewById(R.id.pager); 165 | 166 | if (viewPager != null) { 167 | setupViewPager(viewPager); 168 | } 169 | } 170 | 171 | private void setupViewPager(ViewPager viewPager) { 172 | adapter = new PagerAdapter(getSupportFragmentManager(), this); 173 | adapter.addFragment(new ContentFragment().newInstance("Page1"), "Tab 1"); 174 | adapter.addFragment(new ContentFragment().newInstance("Page2"), "Tab 2"); 175 | adapter.addFragment(new ContentFragment().newInstance("Page3"), "Tab 3"); 176 | viewPager.setAdapter(adapter); 177 | tabLayout.setupWithViewPager(viewPager); 178 | } 179 | //... 180 | } 181 | ``` 182 | Heres the output: 183 | 184 | ![Show 1](http://i.imgur.com/8hP2PgL.png?2) 185 | 186 | ### Customize Tab Indicator Color 187 | 188 | Add style to `styles.xml` 189 | 190 | ```xml 191 | 194 | ``` 195 | 196 | Then override this style for your TabLayout: 197 | 198 | ```xml 199 | 204 | ``` 205 | 206 | ### Add Icons to TabLayout 207 | 208 | Add icon resource to `PagerAdapter` and `getPageTitle(position)` method as shown in the code snippet below. 209 | 210 | ```java 211 | private int[] imageResId = { 212 | R.drawable.facebook, 213 | R.drawable.instagram, 214 | R.drawable.linkedin 215 | }; 216 | 217 | //... 218 | 219 | @Override 220 | public CharSequence getPageTitle(int position) { 221 | Drawable image = context.getResources().getDrawable(imageResId[position]); 222 | image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 223 | SpannableString sb = new SpannableString(" "); 224 | ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 225 | sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 226 | return sb; 227 | } 228 | 229 | ``` 230 | 231 | By default, the tab created by TabLayout sets the `textAllCaps` property to be true, which prevents ImageSpans from being rendered. You can override this behavior by changing the `tabTextAppearance` property. 232 | 233 | ```xml 234 | 238 | 239 | 242 | ``` 243 | 244 | Tabs with images: 245 | 246 | ![Show 2](http://i.imgur.com/EYxKrpE.png?1) 247 | 248 | 249 | ### Add Custom View to TabLayout 250 | 251 | We will show how to custom XML layout for each tab. First, we create a template Tab(custom_tab_item.xml). 252 | 253 | ```xml 254 | 255 | 260 | 261 | 265 | 266 | 271 | 272 | 273 | ``` 274 | 275 | To achieve this, iterate over all the `TabLayout.Tab`s after attaching the sliding tabs to the pager. 276 | 277 | ```java 278 | public class MainActivity extends AppCompatActivity { 279 | 280 | TabLayout tabLayout; 281 | ViewPager viewPager; 282 | PagerAdapter adapter; 283 | 284 | @Override 285 | protected void onCreate(Bundle savedInstanceState) { 286 | super.onCreate(savedInstanceState); 287 | setContentView(R.layout.activity_main); 288 | 289 | tabLayout = (TabLayout) findViewById(R.id.tab_layout); 290 | viewPager = (ViewPager) findViewById(R.id.pager); 291 | 292 | if (viewPager != null) { 293 | setupViewPager(viewPager); 294 | } 295 | } 296 | 297 | private void setupViewPager(ViewPager viewPager) { 298 | adapter = new PagerAdapter(getSupportFragmentManager(), this); 299 | adapter.addFragment(new ContentFragment().newInstance("Page1"), "Tab 1"); 300 | adapter.addFragment(new ContentFragment().newInstance("Page2"), "Tab 2"); 301 | adapter.addFragment(new ContentFragment().newInstance("Page3"), "Tab 3"); 302 | viewPager.setAdapter(adapter); 303 | tabLayout.setupWithViewPager(viewPager); 304 | 305 | // Iterate over all tabs and set the custom view 306 | for (int i = 0; i < tabLayout.getTabCount(); i++) { 307 | TabLayout.Tab tab = tabLayout.getTabAt(i); 308 | tab.setCustomView(adapter.getTabView(i)); 309 | } 310 | } 311 | //... 312 | } 313 | ``` 314 | 315 | Next, we add the `getTabView(position)` method to the `PagerAdapter` class. 316 | 317 | ```java 318 | static class PagerAdapter extends FragmentPagerAdapter { 319 | private final List myFragments = new ArrayList<>(); 320 | private final List myFragmentTitles = new ArrayList<>(); 321 | private Context context; 322 | 323 | private int[] imageResId = { 324 | R.drawable.facebook, 325 | R.drawable.instagram, 326 | R.drawable.linkedin 327 | }; 328 | 329 | public View getTabView(int position) { 330 | // Given you have a custom layout in `res/layout/custom_tab_item.xml` with a TextView and ImageView 331 | View v = LayoutInflater.from(context).inflate(R.layout.custom_tab_item, null); 332 | TextView tv = (TextView) v.findViewById(R.id.tab_item_txt); 333 | tv.setText(myFragmentTitles.get(position)); 334 | ImageView img = (ImageView) v.findViewById(R.id.tab_item_view); 335 | img.setImageResource(customImageResId[position]); 336 | return v; 337 | } 338 | } 339 | //... 340 | ``` 341 | Finally, we can setup any custom tab content for each page in the adapter. 342 | ![Show 3](http://i.imgur.com/IERLy6R.png?1) 343 | 344 | 345 | ### Set PageChangeListener 346 | 347 | ```java 348 | viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 349 | 350 | // This method will be invoked when a new page becomes selected. 351 | @Override 352 | public void onPageSelected(int position) { 353 | Toast.makeText(MainActivity.this, 354 | "Selected page position: " + position, Toast.LENGTH_SHORT).show(); 355 | } 356 | 357 | // This method will be invoked when the current page is scrolled 358 | @Override 359 | public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 360 | // Code goes here 361 | } 362 | 363 | // Called when the scroll state changes: 364 | // SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING 365 | @Override 366 | public void onPageScrollStateChanged(int state) { 367 | // Code goes here 368 | } 369 | }); 370 | ``` 371 | 372 | ## References 373 | 374 | * 375 | * 376 | -------------------------------------------------------------------------------- /TabLayoutWithViewPager.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/cola/tablayoutwithviewpager/ContentFragment.java: -------------------------------------------------------------------------------- 1 | package com.example.cola.tablayoutwithviewpager; 2 | 3 | 4 | import android.os.Bundle; 5 | import android.support.v4.app.Fragment; 6 | import android.view.LayoutInflater; 7 | import android.view.View; 8 | import android.view.ViewGroup; 9 | import android.widget.TextView; 10 | 11 | import org.w3c.dom.Text; 12 | 13 | 14 | /** 15 | * A simple {@link Fragment} subclass. 16 | * Use the {@link ContentFragment#newInstance} factory method to 17 | * create an instance of this fragment. 18 | */ 19 | public class ContentFragment extends Fragment { 20 | // TODO: Rename parameter arguments, choose names that match 21 | // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER 22 | private static final String ARG_PARAM1 = "param1"; 23 | 24 | // TODO: Rename and change types of parameters 25 | private String mParam1; 26 | 27 | private TextView titleTxtView; 28 | 29 | 30 | /** 31 | * Use this factory method to create a new instance of 32 | * this fragment using the provided parameters. 33 | * 34 | * @param param1 Parameter 1. 35 | * @return A new instance of fragment ContentFragment. 36 | */ 37 | // TODO: Rename and change types and number of parameters 38 | public static ContentFragment newInstance(String param1) { 39 | ContentFragment fragment = new ContentFragment(); 40 | Bundle args = new Bundle(); 41 | args.putString(ARG_PARAM1, param1); 42 | fragment.setArguments(args); 43 | return fragment; 44 | } 45 | 46 | public ContentFragment() { 47 | // Required empty public constructor 48 | } 49 | 50 | @Override 51 | public void onCreate(Bundle savedInstanceState) { 52 | super.onCreate(savedInstanceState); 53 | if (getArguments() != null) { 54 | mParam1 = getArguments().getString(ARG_PARAM1); 55 | } 56 | } 57 | 58 | @Override 59 | public View onCreateView(LayoutInflater inflater, ViewGroup container, 60 | Bundle savedInstanceState) { 61 | // Inflate the layout for this fragment 62 | View myView = inflater.inflate(R.layout.fragment_content, container, false); 63 | titleTxtView = (TextView)myView.findViewById(R.id.title_txtView); 64 | titleTxtView.setText(mParam1); 65 | return myView; 66 | } 67 | 68 | 69 | } 70 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/cola/tablayoutwithviewpager/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example.cola.tablayoutwithviewpager; 2 | 3 | import android.content.Context; 4 | import android.graphics.drawable.Drawable; 5 | import android.support.design.widget.TabLayout; 6 | import android.support.v4.app.Fragment; 7 | import android.support.v4.app.FragmentManager; 8 | import android.support.v4.app.FragmentPagerAdapter; 9 | import android.support.v4.view.ViewPager; 10 | import android.os.Bundle; 11 | import android.support.v7.app.AppCompatActivity; 12 | import android.text.Spannable; 13 | import android.text.SpannableString; 14 | import android.text.style.ImageSpan; 15 | import android.view.LayoutInflater; 16 | import android.view.View; 17 | import android.widget.ImageView; 18 | import android.widget.TextView; 19 | import android.widget.Toast; 20 | 21 | import java.util.ArrayList; 22 | import java.util.List; 23 | 24 | 25 | public class MainActivity extends AppCompatActivity { 26 | 27 | TabLayout tabLayout; 28 | ViewPager viewPager; 29 | PagerAdapter adapter; 30 | 31 | @Override 32 | protected void onCreate(Bundle savedInstanceState) { 33 | super.onCreate(savedInstanceState); 34 | setContentView(R.layout.activity_main); 35 | 36 | tabLayout = (TabLayout) findViewById(R.id.tab_layout); 37 | viewPager = (ViewPager) findViewById(R.id.pager); 38 | 39 | if (viewPager != null) { 40 | setupViewPager(viewPager); 41 | } 42 | } 43 | 44 | private void setupViewPager(ViewPager viewPager) { 45 | adapter = new PagerAdapter(getSupportFragmentManager(), this); 46 | adapter.addFragment(new ContentFragment().newInstance("Page1"), "Tab 1"); 47 | adapter.addFragment(new ContentFragment().newInstance("Page2"), "Tab 2"); 48 | adapter.addFragment(new ContentFragment().newInstance("Page3"), "Tab 3"); 49 | viewPager.setAdapter(adapter); 50 | tabLayout.setupWithViewPager(viewPager); 51 | 52 | for (int i = 0; i < tabLayout.getTabCount(); i++) { 53 | TabLayout.Tab tab = tabLayout.getTabAt(i); 54 | tab.setCustomView(adapter.getTabView(i)); 55 | } 56 | 57 | viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 58 | 59 | // This method will be invoked when a new page becomes selected. 60 | @Override 61 | public void onPageSelected(int position) { 62 | Toast.makeText(MainActivity.this, 63 | "Selected page position: " + position, Toast.LENGTH_SHORT).show(); 64 | } 65 | 66 | // This method will be invoked when the current page is scrolled 67 | @Override 68 | public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 69 | // Code goes here 70 | } 71 | 72 | // Called when the scroll state changes: 73 | // SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING 74 | @Override 75 | public void onPageScrollStateChanged(int state) { 76 | // Code goes here 77 | } 78 | }); 79 | } 80 | 81 | public class PagerAdapter extends FragmentPagerAdapter { 82 | private final List myFragments = new ArrayList<>(); 83 | private final List myFragmentTitles = new ArrayList<>(); 84 | private Context context; 85 | 86 | private int[] imageResId = { 87 | R.drawable.facebook_logo_32, 88 | R.drawable.instagram_logo_32, 89 | R.drawable.linkedin_logo_32 90 | }; 91 | 92 | private int[] customImageResId = { 93 | R.drawable.facebook, 94 | R.drawable.instagram, 95 | R.drawable.linkedin 96 | }; 97 | 98 | public PagerAdapter(FragmentManager fm, Context context) { 99 | super(fm); 100 | this.context = context; 101 | } 102 | 103 | public void addFragment(Fragment fragment, String title) { 104 | myFragments.add(fragment); 105 | myFragmentTitles.add(title); 106 | } 107 | 108 | @Override 109 | public Fragment getItem(int position) { 110 | return myFragments.get(position); 111 | } 112 | 113 | @Override 114 | public int getCount() { 115 | return myFragments.size(); 116 | } 117 | 118 | public View getTabView(int position) { 119 | // Given you have a custom layout in `res/layout/custom_tab_item.xml` with a TextView and ImageView 120 | View v = LayoutInflater.from(context).inflate(R.layout.custom_tab_item, null); 121 | TextView tv = (TextView) v.findViewById(R.id.tab_item_txt); 122 | tv.setText(myFragmentTitles.get(position)); 123 | ImageView img = (ImageView) v.findViewById(R.id.tab_item_view); 124 | img.setImageResource(customImageResId[position]); 125 | return v; 126 | } 127 | 128 | @Override 129 | public CharSequence getPageTitle(int position) { 130 | //text only, use this 131 | // return myFragmentTitles.get(position); 132 | 133 | //add Tab with icon and text, use this 134 | Drawable image = context.getResources().getDrawable(imageResId[position]); 135 | image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 136 | SpannableString sb = new SpannableString(" " + myFragmentTitles.get(position)); 137 | ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 138 | sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 139 | return sb; 140 | } 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/facebook.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/facebook_logo_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/facebook_logo_32.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/facebook_logo_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/facebook_logo_64.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/facebook_logo_select_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/facebook_logo_select_64.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/instagram.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/instagram_logo_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/instagram_logo_32.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/instagram_logo_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/instagram_logo_64.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/instagram_logo_select_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/instagram_logo_select_64.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/linkedin.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/linkedin_logo_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/linkedin_logo_32.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/linkedin_logo_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/linkedin_logo_64.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/linkedin_logo_select_64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/app/src/main/res/drawable/linkedin_logo_select_64.png -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | 14 | 18 | 19 | -------------------------------------------------------------------------------- /app/src/main/res/layout/custom_tab_item.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /app/src/main/res/layout/fragment_content.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/menu/menu_main.xml: -------------------------------------------------------------------------------- 1 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | TabLayoutWithViewPager 3 | 4 | Hello world! 5 | Settings 6 | 7 | 8 | Hello blank fragment 9 | 10 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColaCheng/AndroidTabLayoutWithViewPager/712c1286214569a8702dd01f1e28c0d3dde1f07f/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Wed Apr 10 15:27:10 PDT 2013 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.2.1-all.zip 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> $.*$$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | --------------------------------------------------------------------------------