Last active
October 3, 2018 09:07
-
-
Save iChintanSoni/6a28e0a666820458520149d9d0b8aa46 to your computer and use it in GitHub Desktop.
CollapsingToolbarLayout with TabLayout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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="com.chintansoni.android.myapplication.ScrollingActivity"> | |
<android.support.design.widget.AppBarLayout | |
android:id="@+id/appBar" | |
android:layout_width="match_parent" | |
android:layout_height="wrap_content" | |
android:fitsSystemWindows="true" | |
android:theme="@style/AppTheme.AppBarOverlay"> | |
<android.support.design.widget.CollapsingToolbarLayout | |
android:layout_width="match_parent" | |
android:layout_height="wrap_content" | |
android:fitsSystemWindows="true" | |
app:contentScrim="?attr/colorPrimary" | |
app:layout_scrollFlags="scroll|exitUntilCollapsed"> | |
<ImageView | |
android:layout_width="match_parent" | |
android:layout_height="256dp" | |
android:fitsSystemWindows="true" | |
android:scaleType="centerCrop" | |
app:layout_collapseMode="parallax" /> | |
<android.support.v7.widget.Toolbar | |
android:id="@+id/toolbar" | |
android:layout_width="match_parent" | |
android:layout_height="?attr/actionBarSize" | |
app:layout_collapseMode="pin" | |
app:popupTheme="@style/AppTheme.PopupOverlay" /> | |
</android.support.design.widget.CollapsingToolbarLayout> | |
<android.support.design.widget.TabLayout | |
android:id="@+id/tabs" | |
android:layout_width="match_parent" | |
android:layout_height="wrap_content" | |
android:background="@color/colorPrimary" | |
app:layout_anchor="@id/appBar" | |
app:layout_anchorGravity="bottom"> | |
</android.support.design.widget.TabLayout> | |
</android.support.design.widget.AppBarLayout> | |
<android.support.v4.view.ViewPager | |
android:id="@+id/viewpager" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
app:layout_behavior="@string/appbar_scrolling_view_behavior" /> | |
</android.support.design.widget.CoordinatorLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class ScrollingActivity extends AppCompatActivity { | |
private SectionsPagerAdapter mSectionsPagerAdapter; | |
private ViewPager mViewPager; | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_scrolling); | |
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); | |
setSupportActionBar(toolbar); | |
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); | |
mViewPager = (ViewPager) findViewById(R.id.viewpager); | |
mViewPager.setAdapter(mSectionsPagerAdapter); | |
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); | |
tabLayout.setupWithViewPager(mViewPager); | |
} | |
@Override | |
public boolean onCreateOptionsMenu(Menu menu) { | |
getMenuInflater().inflate(R.menu.menu_scrolling, menu); | |
return true; | |
} | |
@Override | |
public boolean onOptionsItemSelected(MenuItem item) { | |
int id = item.getItemId(); | |
if (id == R.id.action_settings) { | |
return true; | |
} | |
return super.onOptionsItemSelected(item); | |
} | |
public static class PlaceholderFragment extends Fragment { | |
private static final String ARG_SECTION_NUMBER = "section_number"; | |
public PlaceholderFragment() { | |
} | |
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) { | |
View rootView = inflater.inflate(R.layout.fragment_main, container, false); | |
TextView textView = (TextView) rootView.findViewById(R.id.section_label); | |
textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER))); | |
return rootView; | |
} | |
} | |
public class SectionsPagerAdapter extends FragmentPagerAdapter { | |
public SectionsPagerAdapter(FragmentManager fm) { | |
super(fm); | |
} | |
@Override | |
public Fragment getItem(int position) { | |
return PlaceholderFragment.newInstance(position + 1); | |
} | |
@Override | |
public int getCount() { | |
return 3; | |
} | |
@Override | |
public CharSequence getPageTitle(int position) { | |
switch (position) { | |
case 0: | |
return "SECTION 1"; | |
case 1: | |
return "SECTION 2"; | |
case 2: | |
return "SECTION 3"; | |
} | |
return null; | |
} | |
} | |
} |
can you give the whole project?
distance below toolbar text and tabs i have placed image and it shows primary color below image .
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this line in style
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />