In my fragment I am using a collapsing toolbar with a ViewPager and a search box in it.Below the ViewPager there is a GridView. When the user scrolls down,the toolbar containing ViewPager and search box collapses. My issues comes in the situation that, when it collapses I want to show the searchbox below the collapsed toolbar. So I created an extra layout containing another search box below the collapsing toolbar. I made the extra layout visible and hide with respect to collapsing and expanding of the toolbar.My issue is when I make the visibility of extra layout gone, the GridView below that flicker, which causes the user a bad experience. I want a smooth transition without flickering of GridView.
What I have done yet is as follows:
xml file:
<?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:id="#+id/main_content"
android:orientation="vertical"
android:layout_marginBottom="10dp"
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="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="match_parent"
android:layout_gravity="center"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="top"
android:scaleType="centerCrop"
android:background="#drawable/loading_image"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user"
android:text=""
android:gravity="center"
android:layout_centerInParent="true"
android:textSize="16sp"
android:textColor="#ff0000"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/user"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search here"
android:padding="10dp"
android:id="#+id/srch"
android:textColor="#000"
android:maxLines="1"
android:background="#drawable/search_border_grey"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/search_24"
android:layout_centerVertical="true"
android:background="#fff"
android:layout_margin="5dp"
android:text="Button"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:id="#+id/rl_srch2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/transparent"
android:layout_marginLeft="15dp"
android:gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginRight="15dp">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search here"
android:padding="10dp"
android:id="#+id/srch2"
android:maxLines="1"
android:textColor="#000"
android:background="#drawable/search_border_grey"/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/search_24"
android:layout_centerVertical="true"
android:background="#fff"
android:layout_margin="5dp"
android:text="Button"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:id="#+id/root_layout"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/customgrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:paddingBottom="20dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:verticalSpacing="3dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
In my fragment I use the following code to hode and visible the layout
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = true;
int scrollRange = -1;
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed
if(is_visible_toolbar == false) {
toolbar.setVisibility(View.VISIBLE);
is_visible_toolbar = true;
toolbar.startAnimation(fadeIn);
}
} else if (verticalOffset == 0) {
// Expanded
toolbar.startAnimation(fadeOut);
toolbar.setVisibility(View.GONE);
is_visible_toolbar = false;
} else {
// Somewhere in between
toolbar.setVisibility(View.GONE);
is_visible_toolbar = false;
}
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
collapsingToolbar.setTitle("");
isShow = true;
} else if (isShow) {
collapsingToolbar.setTitle(" ");
isShow = false;
}
}
});
This is the layout , there are 2 search boxes. first in collapsing toolbar and second between collapsing toolbar and gridView.
How can I avoid the flickering of GridView or, is there any better approach for my requirement? All your responses are appreciated.
Related
This is what my nestedscrollview looks like
This is where my viewpager, along with other views and layouts are placed inside that nestedscrollview
Now issue is that the viewpager, which is swiping fragments of recyclerviews left and right, is not scrolling down along with the nestedscrollview. Activity scrolls only upto the tab layout, as shown in the second picture. Viewpager scrolls nested. Can you PLEASE solve this problem?
This is how my main activity's layout looks like:
<?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_height="match_parent"
android:id="#+id/main_profile"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="430dp"
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/profile_image"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:src="#drawable/sample_image"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="240dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="William Stevenson"
android:textSize="24sp"
android:gravity="center"
android:textColor="#f0f0f0"
android:id="#+id/userName" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Graphic Designer. Freelancer"
android:textSize="16sp"
android:gravity="center"
android:textColor="#f0f0f0"
android:layout_below="#id/userName"
android:id="#+id/tagline"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="#id/tagline"
android:layout_marginTop="48dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp">
<Button
android:layout_width="wrap_content"
android:layout_height="48dp"
android:paddingLeft="48dp"
android:paddingRight="48dp"
android:textSize="12sp"
android:textColor="#f0f0f0"
android:text="Follow"
android:layout_centerHorizontal="true"
android:id="#+id/follow"
android:background="#drawable/follow_button_flat"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_toLeftOf="#id/follow"
android:layout_centerVertical="true"
android:id="#+id/voiceCallMessage"
android:src="#drawable/ic_mic_none_white_48dp"
android:layout_marginRight="32dp" />
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_toRightOf="#id/follow"
android:layout_centerVertical="true"
android:id="#+id/videoCallMessage"
android:layout_marginLeft="32dp"
android:src="#drawable/ic_videocam_white_48dp" />
</RelativeLayout>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:rippleColor="#303030"
app:backgroundTint="#3292D3"
app:layout_anchor="#id/app_bar"
android:src="#drawable/ic_bubble_chart_white_48dp"
app:fabSize="normal"
app:layout_anchorGravity="bottom|right"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/nestedScrollView">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp"
android:id="#+id/profileStats"
android:orientation="horizontal">
...
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="48dp"
android:id="#+id/imagesAndVideos"
android:layout_below="#id/profileStats">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/frame_layout_corner"
android:clickable="false">
...
</TableLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="800+ Images"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#f0f0f0"
android:id="#+id/imagesTag"
android:textSize="18sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="32dp"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:text="Show All"
android:gravity="center"
android:id="#+id/showAll"
android:background="#drawable/follow_button_flat"
android:textColor="#f0f0f0"
android:textSize="14sp"/>
</LinearLayout>
</FrameLayout>
<com.gigamole.navigationtabstrip.NavigationTabStrip
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp"
app:nts_animation_duration="300"
app:nts_factor="1.2"
app:nts_size="16dp"
app:nts_type="line"
app:nts_titles="#array/posts_and_friends"
android:layout_below="#id/imagesAndVideos"
android:layout_marginTop="48dp"
android:id="#+id/post_and_friends_nav_strip"/>
<!--Problem is here-->
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/posts_friends_view_pager"
android:layout_below="#id/post_and_friends_nav_strip"
android:layout_marginTop="16dp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is what my both the fragments looks like:
Fragment 1's layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainPosts"
android:layout_height="wrap_content"/>
Fragment 2's layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/friends"
android:layout_height="wrap_content"/>
Yeah, almost similar.
Edit: I've tried setting android:nestedScrollingEnabled to false in the recyclerview. But It just stops scrolling of the viewpager. Activity can't be scrolled down below the tab layout of the viewpager. Viewpager remains below the phone screen.
Edit 2: This is what my main activity looks like:
public class Profile extends AppCompatActivity {
TextView userName, tagline, followers, followersTag, points, pointsTag, following, followingTag, imagesTag;
ImageView userImage, sample1, sample2, sample3, sample4;
Button showAllImages;
Typeface robotoRegular, robotoLight;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content_profile);
initActivity();
ViewPager postsAndFriendsViewPager = (ViewPager) findViewById(R.id.posts_friends_view_pager);
FragmentManager fragmentManager = getSupportFragmentManager();
ViewPagerAdapterPostsFriends viewPagerAdapterPostsFriends = new ViewPagerAdapterPostsFriends(fragmentManager);
postsAndFriendsViewPager.setAdapter(viewPagerAdapterPostsFriends);
NavigationTabStrip navigationTabStrip = (NavigationTabStrip) findViewById(R.id.post_and_friends_nav_strip);
navigationTabStrip.setTabIndex(0);
navigationTabStrip.setStripColor(Color.TRANSPARENT);
navigationTabStrip.setActiveColor(Color.RED);
navigationTabStrip.setInactiveColor(Color.DKGRAY);
navigationTabStrip.setViewPager(postsAndFriendsViewPager);
}
class ViewPagerAdapterPostsFriends extends FragmentStatePagerAdapter
{
ViewPagerAdapterPostsFriends(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
if(position == 0)
return Posts.init();
return ProfileFriends.init();
}
#Override
public int getCount() {
return 2;
}
}
private void initActivity()
{
userImage = (ImageView) findViewById(R.id.profile_image);
sample1 = (ImageView) findViewById(R.id.sample1);
sample2 = (ImageView) findViewById(R.id.sample2);
sample3 = (ImageView) findViewById(R.id.sample3);
sample4 = (ImageView) findViewById(R.id.sample4);
userName = (TextView) findViewById(R.id.userName);
imagesTag = (TextView) findViewById(R.id.imagesTag);
tagline = (TextView) findViewById(R.id.tagline);
points = (TextView) findViewById(R.id.points);
pointsTag = (TextView) findViewById(R.id.pointsTag);
followers = (TextView) findViewById(R.id.followers);
followersTag = (TextView) findViewById(R.id.followersTag);
following = (TextView) findViewById(R.id.following);
followingTag = (TextView) findViewById(R.id.followingTag);
showAllImages = (Button) findViewById(R.id.showAll);
robotoLight = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Light.ttf");
robotoRegular = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Regular.ttf");
Picasso.with(this).load(R.drawable.sample_image).transform(new BrightnessFilterTransformation(this, -0.1f)).into(userImage);
userName.setTypeface(robotoLight);
imagesTag.setTypeface(robotoLight);
tagline.setTypeface(robotoLight);
points.setTypeface(robotoRegular);
pointsTag.setTypeface(robotoRegular);
followers.setTypeface(robotoRegular);
followersTag.setTypeface(robotoRegular);
following.setTypeface(robotoRegular);
followingTag.setTypeface(robotoRegular);
showAllImages.setTypeface(robotoLight);
}
}
I have a collapsing toolbar layout which contains some textviews and on collapse shows the toolbar containg a textview. It works perfectly as i wanted but shows an error log generated repeatedly whenever I collapse the toolbar.
Layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:collapsedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_5dp"
android:layout_marginLeft="#dimen/_15dp"
android:layout_marginRight="#dimen/_15dp"
android:layout_marginTop="#dimen/_5dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="a"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<TextView
android:id="#+id/arates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="arates"
android:textColor="#color/white"/>
<TextView
android:id="#+id/aimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_5dp"
android:textColor="#color/bitupcolor"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="B"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<TextView
android:id="#+id/brates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=brates"
android:textColor="#color/white"/>
<TextView
android:id="#+id/bimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_5dp"
android:textColor="#color/bitdowncolor"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/btntoolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_30dp"
app:layout_collapseMode="pin">
<LinearLayout
android:id="#+id/llcollapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:clickable="true">
<TextView
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:clickable="true"
android:gravity="center"
android:layout_gravity="center"
android:text="dscbckbsZ"
android:textSize="#dimen/_12dp"
android:visibility="gone" />
<TextView
android:id="#+id/down"
android:layout_width="#dimen/_12dp"
android:layout_height="#dimen/_12dp"
android:layout_gravity="center"
android:background="#mipmap/ic_down"
android:gravity="center"
android:clickable="true"
android:visibility="gone" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Java Function
private void dynamicAppbar() {
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;
#Override
public void onOffsetChanged(final AppBarLayout appBarLayout, final int verticalOffset) {
getActivity().runOnUiThread(new Runnable() {
#Override
public void run() {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
live_btn.setVisibility(View.VISIBLE);
live_btn.setText(getResources().getString(R.string.live_price));
separator.setVisibility(View.VISIBLE);
down.setVisibility(View.VISIBLE);
initListener();
isShow = true;
} else if (isShow) {
separator.setVisibility(View.GONE);
live_btn.setVisibility(View.GONE);
down.setVisibility(View.GONE);
isShow = false;
}
}
});
}
});
}
error
requestLayout() improperly called by android.support.design.widget.CollapsingToolbarLayout{23967ac8 V.ED.... ........ 0,0-720,190 #7f0c0078 app:id/collapsing_toolbar} during second layout pass: posting in next frame
requestLayout() improperly called by android.support.v7.widget.AppCompatTextView{3f2b6761 V.ED..C. ........ 254,0-434,33 #7f0c008a app:id/btn} during second layout pass: posting in next frame
requestLayout() improperly called by android.support.design.widget.CollapsingToolbarLayout{23967ac8 V.ED.... ........ 0,0-720,190 #7f0c0078 app:id/collapsing_toolbar} during second layout pass: posting in next frame
requestLayout() improperly called by android.support.v7.widget.AppCompatTextView
I'm using retrofit and coordinatorlayout. All seems that work fine but I'm getting a small problem. That I want to do is that the layout will display in the moment that the response is success. For this reason, I'm calling the setContentView inside the response (I don't know if this is a good practice or not)
My problem is that this works, but the layout don't do the scroll in all the information. He cut the last lines of text. If I call the setContentView in the oncreate method the scroll in the coordinatorlayout is ok (show all the information) but in this scenario I can see the layout design before all the correct images and text when finish the success response.
Somebody know how can I fix this problem??
Thanks in advance
Detail Class:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
apiCall(R.layout.detail);
}
private void apiCall(final int layout){
Bundle extras = getIntent().getExtras();
if (extras != null) {
id = extras.getString("id");
}
ApiInterface apiService = ApiClient.getClient().create(ApiInterface.class);
Call<Hostel> call = apiService.getHostelId(id);
call.enqueue(new Callback<Hostel>() {
#Override
public void onResponse(Call<Hostel> call, Response<Hostel> response) {
try {
if (response.code() == 200) {
setContentView(layout);
initView(response);
setToolbar();
} else {
Toast.makeText(getApplication(), getResources().getString(R.string.no_conexion), Toast.LENGTH_SHORT).show();
}
}catch (Exception e){
Log.e(TAG, e.toString());
}
}
#Override
public void onFailure(Call<Hostel> call, Throwable t) {
Log.e(TAG, t.toString());
}
});
}
detail.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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="19dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingBottom="10dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/propertyName_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/description"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/description_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="19dp"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/address_1"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/addres_one_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/address_2"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/addres_two_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/city"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/city_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/county"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/country_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="19dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/directions"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/directions_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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/collapser"
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/image_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/CustomActionBar"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Call setContentView in oncreate just try do show layout to user when response is successful. you can manage it using alpha property of a widget
android:alpha="0.0" to make view invisible
android:alpha="1.0" to make view visible
now in oncreate call
CoordinatorLayout cL=(CoordinatorLayout)findViewById(R.id.coordinator);
cL.setAlpha(0);
and after getting successfull response make it visible like this :
cL.setAlpha(1);
I'd suggest to do the
setContentView(your_layout) on onCreate() as it's the good practice to follow.
If you don't want users to observe the wired frame design when the data is loading, try using a ProgressBar component to put on overlay the layout, when data arrive you can simply call
progressBar.setVisibility(View.GONE);
This is a common solution in native android component usage.
Otherwise you can set your scrollview visibility (id = scroll from your code) to be GONE at the beginning. Then simply set visible again when the data arrives successfully. Something like:
#Override
public void onResponse(Call<Hostel> call, Response<Hostel> response) {
try {
if (response.code() == 200) {
yourScrollView.setVisibility(View.VISIBLE);
// Do the rest of the your implementation here;
} catch (Exception e) {
// Blah blah
}
}
I am working on one android app in which I am using CoordinatorLayout,AppBarLayout and CollapsingToolbarLayout to use the advance collapse bar functionality.
I am using recyclerview to show the number of items in the fragment. When I'm scrolling up recyclerview it smoothly collapse AppBarLayout but when I scroll down and reach at on the first item of the recyclerview it automatically stop scrolling without expanding `AppBarLayout'.
Then again I need to scroll down again to make AppBarLayout visible. So my requirement is that on scrolling down when I reach to top of recyclerview it must expand `AppBarLayout'.
How can we do this. Any idea ? Please see video of same https://www.dropbox.com/s/va5jk27ikytk5ax/app_collapsebar_issue.mp4?dl=0
Here is my layout of same :-
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/offer_image"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- <com.flaviofaria.kenburnsview.KenBurnsView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="220dp"
android:src="#drawable/offer_image" />-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.flaviofaria.kenburnsview.KenBurnsView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="220dp"
android:src="#drawable/offer_image" />
<FrameLayout
android:id="#+id/collapse_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#B3c85a00">
</FrameLayout>
<FrameLayout
android:id="#+id/centerCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="#+id/imageViewCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/offer" />
</FrameLayout>
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="15dp"
app:tabIndicatorColor="#FFFFFF"
app:tabMode="scrollable" />
<!--</FrameLayout>-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--<FrameLayout-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!-- -->
<!--android:visibility="visible">-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_share_white_24dp"
android:visibility="gone"
app:backgroundTint="#FF9800"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom|fill_vertical"
android:layout_marginTop="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>
<!--</FrameLayout>-->
<!--<include layout="#layout/content_scrolling" />-->
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/bannerView"
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_gravity="bottom|center"
android:background="#drawable/curved_white_with_blue_border"
android:visibility="gone">
<TextView
android:id="#+id/bannerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:gravity="center"
android:padding="3dp"
android:text="Banner"
android:visibility="gone" />
<ImageView
android:id="#+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:padding="3dp"
android:scaleType="fitXY"
android:visibility="gone" />
<ImageView
android:id="#+id/bannerClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:src="#drawable/cross_icon" />
</RelativeLayout>
<LinearLayout
android:id="#+id/socialTabs"
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp"
android:background="#color/White"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="#drawable/follow" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/White">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_gravity="center"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:weightSum="3">
<ImageView
android:id="#+id/facebookImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/fb_follow" />
<ImageView
android:id="#+id/googlePlusImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/google_follow" />
<ImageView
android:id="#+id/twitterImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/twitter_follow" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</FrameLayout>
<ExpandableListView
android:id="#+id/left_drawer"
android:layout_width="265dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:choiceMode="singleChoice"
android:divider="#null"
android:dividerHeight="0dp"
android:drawSelectorOnTop="true"
android:groupIndicator="#null"
android:scrollbars="#null" />
</android.support.v4.widget.DrawerLayout>
I've just put together a sample app that seems to demonstrate the behaviour you're after. The AppBar will automatically expand whenever the RecyclerView beneath it is scrolled to the top, rather than stopping and waiting for another swipe to open the AppBar.
The most relevant components reside in a custom RecyclerView class. I've added a few explanatory comments:
public class ScrollFeedbackRecyclerView extends RecyclerView {
private WeakReference<Callbacks> mCallbacks;
public ScrollFeedbackRecyclerView(Context context) {
super(context);
attachCallbacks(context);
}
public ScrollFeedbackRecyclerView(Context context, AttributeSet attrs) {
super(context, attrs);
attachCallbacks(context);
}
/*If the first completely visible item in the RecyclerView is at
index 0, then we're at the top of the list, so we want the AppBar to expand
**if the AppBar is also collapsed** (otherwise the AppBar will constantly
attempt to expand).
*/
#Override
public void onScrolled(int dx, int dy) {
if(((LinearLayoutManager)getLayoutManager()).findFirstCompletelyVisibleItemPosition() == 0) {
Log.e(getClass().getSimpleName(), "index 0 visible");
if(mCallbacks.get().isAppBarCollapsed()) {
mCallbacks.get().setExpanded(true);
}
}
super.onScrolled(dx, dy);
}
/* the findFirstCompletelyVisibleItem() method is only available with
LinearLayoutManager and its subclasses, so test for it when setting the
LayoutManager
*/
#Override
public void setLayoutManager(LayoutManager layout) {
if(!(layout instanceof LinearLayoutManager)) {
throw new IllegalArgumentException(layout.toString() + " must be of type LinearLayoutManager");
}
super.setLayoutManager(layout);
}
private void attachCallbacks(Context context) {
try {
mCallbacks = new WeakReference<>((Callbacks)context);
} catch (ClassCastException e) {
throw new ClassCastException(context.toString() + " must implement " +
"ScrollFeedbackRecyclerView.Callbacks");
}
}
/* Necessary to interact with the AppBarLayout in the hosting Activity
*/
interface Callbacks {
boolean isAppBarCollapsed();
void setExpanded(boolean expanded);
}
}
MainActivity.java
public class MainActivity extends AppCompatActivity implements ScrollFeedbackRecyclerView.Callbacks{
private AppBarLayout mAppBarLayout;
private Toolbar mToolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ScrollFeedbackRecyclerView mRecyclerView = (ScrollFeedbackRecyclerView) findViewById(R.id.rv_container);
RecyclerViewAdapter mAdapter = new RecyclerViewAdapter();
mRecyclerView.setAdapter(mAdapter);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
}
/* When collapsed, calling getY() on the AppBar will return a negative number.
Adding this number to getHeight() will return the same value as the toolbar's
height if the AppBar is fully collapsed.
*/
#Override
public boolean isAppBarCollapsed() {
final int appBarVisibleHeight = (int) (mAppBarLayout.getY() + mAppBarLayout.getHeight());
final int toolbarHeight = mToolbar.getHeight();
return (appBarVisibleHeight == toolbarHeight);
}
#Override
public void setExpanded(boolean expanded) {
mAppBarLayout.setExpanded(expanded, true);
}
}
I write this code but not works properly. I want the imageview collapse in parallax mode, and toolbar and relative layout pin at top of the screen. they pin and don't scroll but the relative layout cover on the toolbar. I want relative layout stay bottom of toolbar and don't scroll.
<RelativeLayout 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=".MainActivity">
<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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="250dp"
android:text="New Button"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="250dp"
android:text="New Button"
android:id="#+id/button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="250dp"
android:text="New Button"
android:id="#+id/button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="250dp"
android:text="New Button"
android:id="#+id/button4" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/appBar"
android:background="#44C8F5">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/CollapsingToolbarLayout"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header_image"
android:src="#drawable/header_test"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:layout_collapseMode="parallax"
android:scaleType="fitXY"
android:adjustViewBounds="true"/>
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:layout_scrollFlags="enterAlways"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/footer_appbar_padding"
app:layout_scrollFlags="enterAlways"
android:focusableInTouchMode="false">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|center_vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView2" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/faranesh_logo"
android:layout_gravity="right|center_vertical" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button5"
android:layout_gravity="left|center_vertical" />
</FrameLayout>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
public class MainActivity extends AppCompatActivity {
private CollapsingToolbarLayout collapsingToolbar;
private ImageView headerImage;
private Toolbar toolbar;
private Drawer result;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(R.string.drawer_item_custom_container_drawer);
getSupportActionBar().setDisplayShowTitleEnabled(false);
AppBarLayout.OnOffsetChangedListener mListener = new AppBarLayout.OnOffsetChangedListener() {
#SuppressLint("NewApi")
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
headerImage.setImageAlpha((int)( 255*(((double)(headerImage.getHeight()+verticalOffset)/headerImage.getHeight()))));
}
};
((AppBarLayout) findViewById(R.id.appBar)).addOnOffsetChangedListener(mListener);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}