Develop Reference

Floating button between action bar and Frame Layout

I want something like this:
I have the following now:
With the following XML:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="130dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/book_detail">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_input_add"
android:layout_margin="16dp"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
But I have some problems:
The Title is on top instead of bottom
There's something like a separator on top
I'm using a coordinator now, but I don't need a collapsing toolbar, so I think that there must be another solution maybe. How can I solve this?

Let's first start by making the toolbar taller. I think what you're looking for is CollapingToolbarLayout
To use the CollapsingToolbarLayout you have to change your ConstraintLayout to CoordinatorLayout.
Then you have to create an AppBarLayout to hold the CollapsingToolbarLayout and the Toolbar.
Then to make the floating button in that place you have to anchor it to the AppBarLayout created earlier like below:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
That way it will be anchored to the AppBarLayout so it will go up and down as the AppBarLayout goes up or down.
EDIT #1 :
To remove the title from the top and remove the separator you have to set your activity's theme to NoActionBar. In your AndroidManifest.xml file go to your activity and change its code to the following:
<activity
android:name="YOUR_ACTIVITY_PATH.BookDetailActivity"
android:theme="#style/AppTheme.NoActionBar" />
This way the activity will be declared without an action bar which means no separator and no title.
Then to add the title to the bottom you just have to set the title of the CollapsingToolbarLayout to the text you want.
You can set it in the xml with app:title="YOUR_TITLE" attribute or you can set it programmatically by calling the function setTitle("YOUR_TITLE") for your CollapsingToolbarLayout variable .
Here is what the full code could look like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BookDetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:title="YOUR_TITLE"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<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.AppBarLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:id="#+id/book_detail">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
</android.support.design.widget.CoordinatorLayout>
EDIT 2:
In your activity set your action bar by this :
setSupportActionBar(YOUR_TOOLBAR_VARIABLE) then you can use getSupportActionBar().setDisplayHomeAsUpEnabled(true)
Note that the toolbar should be the id of this one:
android.support.v7.widget.Toolbar so in our case the toolbar with the id toolbar

Use this layout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="192dp">
<android.support.design.widget.CollapsingToolbarLayout
android:elevation="4dp"
android:id="#+id/collapsing_toolbar"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
style="#style/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
The use this class for action of FAB
public class FlexibleSpaceExampleActivity extends AppCompatActivity
implements AppBarLayout.OnOffsetChangedListener {
private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
private View mFab;
private int mMaxScrollSize;
private boolean mIsImageHidden;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flexible_space);
mFab = findViewById(R.id.flexible_example_fab);
Toolbar toolbar = (Toolbar) findViewById(R.id.flexible_example_toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
onBackPressed();
}
});
AppBarLayout appbar = (AppBarLayout) findViewById(R.id.flexible_example_appbar);
appbar.addOnOffsetChangedListener(this);
}
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (mMaxScrollSize == 0)
mMaxScrollSize = appBarLayout.getTotalScrollRange();
int currentScrollPercentage = (Math.abs(i)) * 100
/ mMaxScrollSize;
if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE) {
if (!mIsImageHidden) {
mIsImageHidden = true;
ViewCompat.animate(mFab).scaleY(0).scaleX(0).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE) {
if (mIsImageHidden) {
mIsImageHidden = false;
ViewCompat.animate(mFab).scaleY(1).scaleX(1).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
}
public static void start(Context c) {
c.startActivity(new Intent(c, FlexibleSpaceExampleActivity.class));
}
}
There are some Github Implementation to develope this view and many other
Collapsing Toolbar with Fab

RecyclerView - How to smooth scroll to top of item on a certain position inside Nested scrollview?

I implemented Recycler view, when click on recyclerview it goes to next activity but when I came back I should be back with the same position which I was clicked, like I need to scroll to specific position based on the position of the item, I have the position but I couldn't able to scroll because of nested scrollview.
How can I fix this issue?
<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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/theme_color"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title="#string/app_name"
app:titleEnabled="false">
<LinearLayout
android:id="#+id/ll_report_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical">
......
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/theme_color"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
.....
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/palegray"
android:scrollbars="none"
android:id="#+id/nested_scroll"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/palegray"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/card_header" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
In this recyclerview, I need to scroll to specific item based on the position how can I make it? I used:
recyclerview.smoothScrollToPosition(position);
But didn't worked, and I used this one also but this one also dint worked for me,
RecyclerView.SmoothScroller smoothScroller = new LinearSmoothScroller(RoleActivity.this) {
#Override protected int getVerticalSnapPreference() {
return LinearSmoothScroller.SNAP_TO_START;
}
};
smoothScroller.setTargetPosition(i);
mLayoutManager.startSmoothScroll(smoothScroller);

private int mPosition = RecyclerView.NO_POSITION;
mPosition is the certain position you want to scroll. Save this in onSaveInstanceState
#Override
public void onSaveInstanceState(Bundle outState) {
outState.putInt(SELECTED_KEY, mPosition);
}
in onCreate
if(savedInstanceState != null && savedInstanceState.containsKey(SELECTED_KEY))
{
mPosition = savedInstanceState.getInt(SELECTED_KEY);
}
Call mRecylerView.smoothScrollToPosition(mPosition) once the data to be passed to reccylerview is ready,that is after adapter.notifyDataSetChanged();

Android CollapsingToolbarLayout title - top margin bug

CollapsingToolbarLayout title have a strange top margin but only when it is collapsed and only when inside a fragment.
Prior to the 25.0.0 version of Design Support Library everything worked fine.
Video: https://www.youtube.com/watch?v=7WUrFhmvs_Q&feature=youtu.be
XML:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/image_placeholder"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Lorem ipsum dolor sit amet enim ..."
android:textSize="20sp"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Fragment :
public class TestFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.test_fragment, container, false);
return view;
}
#Override
#CallSuper
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar_layout);
toolbarLayout.setTitle("Lorem Ipsum");
}
}
Any ideas?

I have the same issue right now, but it's because I'm hosting it inside a FrameLayout and LinearLayout and they aren't calling their children's "OnApplyWindowInsets" methods.
Even when fixing that I still get the issue.
But for you, try to only have android:fitsSystemWindows="true" on your CoordinatorLayout, not the rest. I think what you're seeing is a double insets because you have it on almost all your controls.

How can i implement Collapsing layout with tabs without a list view?

i am working on a android project where i have to implement collapsing toolbar with tabs . Tabs should contain a normal Relative layout which has 4 textview.
I am successfully able to implement the collapsing toolbar but the problem is when ever i try to scroll upwards holding the tabs i have implemented collapse toolbar is not working. On the same tabs if i use a list view or Grid layout its working fine when i scroll. If i try to use Normal layout's such as Linear or Relative layout i am not able to scroll. is there any way i can fix this without list or grid layout?
below is my code for 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyStyle"
android:layout_width="match_parent"
app:tabIndicatorColor="#F21757"
app:tabSelectedTextColor="#F21757"
android:layout_height="?actionBarSize"
app:tabTextColor="#android:color/white"
app:layout_anchor="#+id/MyAppbar"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabMode="scrollable"
android:background="#171C20" />
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#000000"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/load"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:paddingBottom="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Try this
Step 1. main_activity.xml
<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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.ncrypted.demoapplications.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar_hotel_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/img_hotel_details"
android:layout_width="match_parent"
android:layout_height="300dp"
android:contentDescription="#string/strong_image_of_andorid"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar_hotel_detail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabMode="fixed" />
</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.v4.view.ViewPager>
Step:2 Create fragments activity
- FragmentActivity1
fragment1.xml
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.ncrypted.demoapplications.FragmentActivity1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment1" />
FragmentActivity.java
public class FragmentActivity1 extends Fragment {
public FragmentActivity1()
{
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment_activity1, container, false);
}
}
Step:3 take two other Fragment 2,3 and write code as above
Step:4 MainActivity.java
public class MainActivity extends AppCompatActivity {
private ViewPager pager;
private TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar_hotel_detail);
setSupportActionBar(toolbar);
ViewCompat.setTransitionName(findViewById(R.id.app_bar_layout), "Extra Image");
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)
findViewById(R.id.collapsingToolBar_hotel_details); collapsingToolbarLayout.setContentScrimColor(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimary));
collapsingToolbarLayout.setTitle("Collaps");
pager = (ViewPager) findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentActivity1());
adapter.addFragment(new FragmentActivity2());
adapter.addFragment(new FragmentActivity3());
pager.setAdapter(adapter);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(pager);
tabLayout.getTabAt(0).setText("Tab1");
tabLayout.getTabAt(1).setText("Tab2");
tabLayout.getTabAt(2).setText("Tab3");
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = 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) {
mFragmentList.add(fragment);
}
}
}

Android does not show tabs

I am in a process of changing home activity to include tabs. I use https://github.com/saulmm/CoordinatorExamples as a source. For unknown reason I do not see the tabs in my AppBarLayout. I can see the Fragment content but tab headers are not displayed at all. I use appcompat-v7:23.3.0.
Shortened layout:
<android.support.design.widget.CoordinatorLayout
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
<ImageView ..
<android.support.v7.widget.Toolbar ..
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
Activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.main_collapsing);
collapsingToolbarLayout.setTitle(getString(R.string.app_name));
ViewPager viewPager = (ViewPager) findViewById(R.id.dashboard_viewpager);
viewPager.setAdapter(new TabsAdapter(getSupportFragmentManager()));
TabLayout tabLayout = (TabLayout) findViewById(R.id.main_tabs);
tabLayout.setupWithViewPager(viewPager);
}
class TabsAdapter extends FragmentPagerAdapter {
public TabsAdapter(FragmentManager fm) {
super(fm);
}
public int getCount() {
return 1;
}
public Fragment getItem(int i) {
switch(i) {
case 0: return DashboardHomeFragment.newInstance();
}
return null;
}
public CharSequence getPageTitle(int position) {
return "Home";
}
}
Fragment:
public class DashboardHomeFragment extends Fragment implements View.OnClickListener {
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_dashboard_home, container, false);
}
public void onActivityCreated(#Nullable Bundle state) {
log.debug("onActivityCreated()");
super.onActivityCreated(state);
}
and its layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hry"
android:textAppearance="#style/TextAppearance.Header"
android:paddingRight="8dp"
android:paddingLeft="8dp"
style="#style/TextComponent.ItemRow"/>
<TextView
android:id="#+id/main.button.puzzle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Najdi výsledek"
android:textAppearance="#style/TextAppearance.Item"
android:drawableRight="#drawable/ic_arrow_forward_24dp"
style="#style/TextComponent.ItemRow.Selectable"/>
There is a second problem but I will post it in separate question linked to this question.
Update:
It was caused by CoordinatorLayout misconfiguration. I changed:
android:layout_height="150dp"
to
android:layout_height="wrap_content"
and the tabs appeared suddenly.

According to the guidelines of Android and the material design, it is correct to use the coordinatorLayout.
The appBarLayout should be max 256dp and inside we find the toolbar and the views that you need.
If you want the views collapsing insert into collapsingToolbarLayout.
If you want the toolbar expandable will be inserted inside the collapsingToolbarLayout.
The tabLayout often is insert into appBarLayout but out collapsingToolbarLayout.
The sum of views height is equals at appBarLayout height (or use wrap_content for appBarLayout).
This is an example of expandable toolbar with tabLayout, in this case appBarLayout has a fixed height but you can use wrap_content.
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="202dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/your_color"
android:fitsSystemWindows="true">
<--Your views-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:titleMarginTop="13dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/your_color"
app:tabSelectedTextColor="#color/your_color"
app:tabTextColor="#color/your_color"
app:tabIndicatorColor="#color/your_color"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>