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

android change toolbar text color with scrollview

I'm trying to animate CollapsingToolbarLayout title with scroll.My goal is to animate text center position ,right now text animate left side.Here is a my xml code
My goal is to receive like this result.I would to change CollapsingToolbarLayout text with toolbar text in center size and also I would to change toolbar background color with scroll position .
How I can solve this problem?
thanks
<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.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="321dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom|center_horizontal"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/imageViewCollapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/winterscenery"
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="parallax"
android:background="#ff00"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</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:padding="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_one" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_button" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_two" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Try this for any changes in to CollapsingToolbarLayout..
make style..
<style name="coll_toolbar_title">
<item name="android:textColor">#color/primary</item>
<item name="android:textSize">#dimen/_13sdp</item>
</style>
then set.. using id..
collapseLayout.setCollapsedTitleTextAppearance(R.style.coll_toolbar_title)
mange scrolling to change here you can change toolbar background ...
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = true;
int scrollRange = -1;
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
}
if (scrollRange + verticalOffset == 0) {
// expend
collapsingToolbarLayout.setTitle("Title");
isShow = true;
} else if(isShow) {
// collepse
collapsingToolbarLayout.setTitle(" ");//carefull there should a space between double quote otherwise it wont work
isShow = false;
}
}
});

first item on recyclerview stacked up to tab layout

i already check the xml file, but everything is okay (for me), but the view still stacked up. and i also get an error message like this
PlayingFragment: onResponse: hasil
pemanggilanretrofit2.ExecutorCallAdapterFactory$ExecutorCallbackCall#1c95dee5
and here's what inside on onResponse on my PlayingFramgment class
private void bacaData(){
progressBar.setVisibility(View.VISIBLE);
final RecyclerView rvCategory = getActivity().findViewById(R.id.playing_daftar);
rvCategory.setLayoutManager(new LinearLayoutManager(getActivity()));
ApiInterface apiInterface = ApiClient.getRetrofit(getContext()).create(ApiInterface.class);
Call<MovieResponse> call = apiInterface.getNowPlaying();
call.enqueue(new Callback<MovieResponse>() {
#Override
public void onResponse(Call<MovieResponse> call, Response<MovieResponse> response) {
MovieResponse data = response.body();
if (data.getResults().size() == 0){
Toast.makeText(getContext(), "Maaf data yang anda cari tidak ditemukan",
Toast.LENGTH_SHORT).show();
progressBar.setVisibility(View.GONE);
} else {
rvCategory.setAdapter(new MoviesAdapter(data.getResults(), R.layout.list_movie_row, getContext()));
Log.d(TAG, "onResponse: hasil pemanggil" + call);
progressBar.setVisibility(View.GONE);
}
}
#Override
public void onFailure(Call<MovieResponse> call, Throwable t) {
Toast.makeText(getContext(), "Gagal", Toast.LENGTH_SHORT).show();
Log.d(TAG, t.toString());
progressBar.setVisibility(View.GONE);
}
});
}
i post the xml layout fragment_playing
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.PlayingFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.v7.widget.RecyclerView
android:id="#+id/playing_daftar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/progressMainBar"
android:layout_centerInParent="true"/>
</RelativeLayout>
fragment_playing is the part of fragment_home, and here's the code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical"
tools:context=".BlankFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/appbar"
android:padding="#dimen/activity_vertical_margin" />
</FrameLayout>
</LinearLayout>
and i put the fragment_home into content_main
<RelativeLayout 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/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<android.support.v4.view.ViewPager
android:layout_below="#+id/toolbar"
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
content_main is the part of app_bar_main
<RelativeLayout 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/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:tabTextColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
android:id="#+id/tabs">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab_np"
android:text="#string/now_playing"
android:textColor="#color/colorAccent"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/up_coming"
android:id="#+id/tab_up"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</RelativeLayout>

You should use below property so your viewPager below your upper tab. I think your viewPager have height and width both are match parent.

Since you are using RelativeLayout as root component you have to give margin top to RecyclerView:
android:layout_marginTop="104dp"
EDIT:
if you were using coordinatorLayout as Root layout, the story would be different.
EDIT
Following issues are obvious in your codes:
1- AppBarLayout in Fragment home is extra since you have already an Appbar in activitie's home layout.
2- According to android official document use CoordinatorLayout instead of RelativeLayout. By using RelativeLayout you will loose some functionality and layout management of AppBarLayout
3- Since you have just included content_main inside app_bar_main, no needs to use tools:context=".MainActivity" and tools:showIn="#layout/app_bar_main"
4- Replace RelativeLayout inside content_main by merge tag
After above changes you have just removed extra layouts which may have side effects on margins and padings, then apply attribute below to your view pager. I hope these changes will be effective and no other hidden items are alive in your code:
android:layout_marginTop="104dp"

change you Relativelayout to android.support.design.widget.CoordinatorLayout and add app:layout_behavior="#string/appbar_scrolling_view_behavior" to android.support.v7.widget.RecyclerView

Use this for app_mar_main:
<RelativeLayout 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/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:tabTextColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
android:id="#+id/tabs">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab_np"
android:text="#string/now_playing"
android:textColor="#color/colorAccent"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/up_coming"
android:id="#+id/tab_up"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#+id/appbarlayout"
android:layout_marginTop="1dp"/>
</RelativeLayout>

Try this way..
make viewpager xml code..
<?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:clickable="true"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tab_bg_color"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tlConversation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/tab_color"
app:tabMinWidth="0dp"
app:tabMode="fixed"
app:tabTextAppearance="#style/Tab_Style"
app:tabSelectedTextColor="#color/tab_color"
app:tabTextColor="#color/tab_text_color">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
after that fragement xml code for recyclerview ..
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tool="http://schemas.android.com/tools">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rvData"
tool:listitem="#layout/item_row_layout"
></android.support.v7.widget.RecyclerView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvEmpty"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tool:text="No data found"
android:text="#string/no_found"
android:visibility="gone"
/>
</android.support.constraint.ConstraintLayout>
after that setup view pager like this way make viewpager adapter..
private void setupViewPager(ViewPager viewPager) {
viewPagerAdapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager(),conversationId);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setOffscreenPageLimit(1);
viewPager.setCurrentItem(currentItem);
}
And
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final Context context;
public ViewPagerAdapter(FragmentManager fragmentManager, Context context) {
super(fragmentManager);
this.context = context;
}
#Override
public Fragment getItem(int position) {
if(position == 0) return new ActiveConversationFragment();
if(position == 1) return new InvitedConversationFragment();
if(position == 2) return new RecentConversationFragment();
throw new IllegalStateException("Unexpected position " + position);
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
if(position == 0) return context.getString(R.string.tab_active_conversation_title);
if(position == 1) return getString(R.string.tab_invited_conversation_title);
if(position == 2) return getString(R.string.tab_recent_conversation_title);
throw new IllegalStateException("Unexpected position " + position);
}
}
after that call above method like this way set into tablayout..
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);

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();

ViewPager inside ScrollView not working

I want to put a ViewPager inside a CoordinatorLayout withing a NestedScrollView. The viewpager houses 3 fragments.
Problem is the fragments aren't visible. Tabs show up and the rest of the layout is visible and scrolls accordingly.
Below is the code for my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="vertical">
<include layout="#layout/toolbar" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/DarkBodyBackground"
android:fitsSystemWindows="true"
android:orientation="vertical">
<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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#color/DarkBodyBackground"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include layout="#layout/artist_header" />
</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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/loading_indicator" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/TabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

Try adding this piece of code before loading your viewPager
NestedScrollView scrollView = (NestedScrollView) findViewById (R.id.nest_scrollview);
scrollView.setFillViewport (true);
Let me know if it helped fix the issue.

Use android:fillViewport="true" in ScrollView

The accepted answer resulted in my fragments now being visible. However, it left me with the problem that my NestedScrollView would no longer scroll!
To overcome this, I have created a custom ViewPager (based on this article) that calculates it's height in the required manner.
Here is full code for my CustomViewPager:
package org.example;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
public class CustomViewPager extends ViewPager {
public CustomViewPager(#NonNull Context context) {
super(context);
}
public CustomViewPager(#NonNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
try {
int numChildren = getChildCount();
for (int i = 0; i < numChildren; i++) {
View child = getChildAt(i);
if (child != null) {
child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = child.getMeasuredHeight();
heightMeasureSpec = Math.max(heightMeasureSpec, MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY));
}
}
}
catch (Exception e) {
e.printStackTrace();
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
In your layout xml, you'd then just replace android.support.v4.view.ViewPager with org.example.CustomViewPager.
(I also removed the new android:fillViewport="true" attribute from my NestedScrollView element as it seems this is now no longer needed.)

No need to use ScrollView and NestedScroolview Just use SliderLayout it will work perfectly.
add below dependency inside build.gradle (app level)
implementation 'ru.noties:scrollable:1.3.0'
layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#color/cardview_light_background"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include layout="#layout/toolbar" /> <!-- its toolbar -->
<ru.noties.scrollable.ScrollableLayout
android:id="#+id/scrollable_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:scrollable_autoMaxScroll="true"
app:scrollable_defaultCloseUp="true">
<!-- what ever you want you can add here, its like tabs header part -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/imageViewProfilePic"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_weight=".75"
android:src="#drawable/hashtag" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_weight=".25"
android:orientation="vertical">
<TextView
android:id="#+id/textviewTagName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:fontFamily="#font/roboto_medium"
android:text=""
android:textColor="#000"
android:textSize="12sp"
android:textStyle="bold" />
/>
<TextView
android:id="#+id/textViewNoofPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textviewFollow"
android:layout_marginLeft="5dp"
android:fontFamily="#font/roboto"
android:text="(University name)"
android:textSize="11dp" />
</LinearLayout>
</LinearLayout>
<!--
<ru.noties.scrollable.sample.SampleHeaderView
style="#style/HeaderStyle"
app:shv_title="#string/sample_title_fragment_pager"/>
-->
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom|center_horizontal|center_vertical"
app:tabIndicatorColor="#color/appcolor"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/appcolor" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize" />
</ru.noties.scrollable.ScrollableLayout>
</LinearLayout>
Activity code:
public class TabActivity extends AppCompatActivity {
TabLayout tabLayout;
private SectionsPagerAdapter mSectionsPagerAdapter;
private ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);//back arrow on toolbar
getSupportActionBar().setDisplayShowTitleEnabled(false);
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setAdapter(mSectionsPagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(mViewPager);
}
#Override
public boolean onOptionsItemSelected(MenuItem menuItem) {
if (menuItem.getItemId() == android.R.id.home) {
onBackPressed();
}
}
#Override
public void onBackPressed() {
this.finish();
super.onBackPressed();
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new frag1();
case 1:
return new frag2();
}
return null;
}
#Override
public int getCount() {
// Show 2 total pages.
return 2;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "one";
case 1:
return "two";
}
return null;
}
}
}

Use nestedScrollview and set the property of nestedscrollenabled as true and I think you will do it.

So let me do it for you : the correct hierarchy as suggested by google blogspot it is working fine for me:Check this out
<?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:orientation="vertical"
android:id="#+id/cl_parent"
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="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/img_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/coverimage"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabGravity="center"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabContentStart="72dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/my_cloud_tv"
android:textColor="#fff"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</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" />
let me know if it helps