Develop Reference

Horizontal ImageSlider in Horizontal Recyclerview does not work

I have a horizontal recyclerview that takes up the entire screen. Within that recyclerview is a textview and an imageslider than holds three images.
I used this for the imageslider:
https://github.com/denzcoskun/ImageSlideshow
Recyclerview XML
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/bonus_detail_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="#layout/bonus_detail_item"/>
Bonus Detail XML
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/bonus_detail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:background="#color/myOrange"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textAlignment="center"
android:autoSizeMaxTextSize="100sp"
android:autoSizeMinTextSize="10sp"
android:autoSizeTextType="uniform"
android:layout_gravity="center_horizontal"
android:textColor="#android:color/white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/bonus_image_slider"/>
<com.denzcoskun.imageslider.ImageSlider
android:id="#+id/bonus_image_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:iss_auto_cycle="false"
app:iss_period="1000"
app:iss_delay="0"
app:iss_placeholder="#drawable/placeholder"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that when I try to swipe on the imageslider the entire recyclerview scrolls. I have searched here trying to find a solution, but the option suggested on many other posts does not work for me.
holder.imageSlider.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
I am not restricted to using the imageSlider, but I do have to maintain the horizontal recyclerview and a horizontal swipe between images. I also tried adding the images in a horizontalscrollview, but I have been unable to set the images to be the full screen width.

You have to request disallow intercepting touch events on your RecyclerView not the direct parent of your ImageSlider which is ConstraintLayout:
holder.imageSlider.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent() // ConstraintLayout
.getParent() // RecyclerView
.requestDisallowInterceptTouchEvent(true);
return false;
}
});

How to apply fitsSystemWindows on Fragment pages of a ViewPager?

I can't get my pages of my ViewPager respect the statusbar height.
My ViewPager has several pages, on one of them there is an image that needs to go under the translucent statusbar. The rest of the pages only require a coloured statusbar, so my idea was to use fitsSystemWindows="true" on the fragment layouts that will serve as pages for the viewpager. But This doesn't work. It seems on the first draw only the second pages gets the paddings applied. But when scrolling through the pages. It disappears. So it seems to me that the pages don't get the dispatch from the ViewPager to apply the insets. But I have no clue how to make it happen.
I have tried to do something with
public static void setOnApplyWindowInsetsListener(View v, OnApplyWindowInsetsListener listener), but I couldn't get working. My idea was to somehow on every new page to apply the insets. Maybe it is the right approach, but I couldn't find the right place to call this method.
So is there anybody that can help me address this problem?
I will place some of my code below to give some context on the problem.
Activity.xml
<..WindowInsetsFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
This is a custom layoutmanager to support changing fragments (fragment transitions) and apply the windowInset again. Just for reference this is the code:
public class WindowInsetsFrameLayout extends FrameLayout {
public WindowInsetsFrameLayout(#NonNull Context context) {
this(context, null);
}
public WindowInsetsFrameLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public WindowInsetsFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// Look for replaced fragments and apply the insets again.
setOnHierarchyChangeListener(new OnHierarchyChangeListener() {
#Override
public void onChildViewAdded(View parent, View child) {
requestApplyInsets();
}
#Override
public void onChildViewRemoved(View parent, View child) {
}
});
}
}
Then at some point in time I load the following fragment to the fragment_container.
fragmentWithViewpager.xml
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.ViewPagerController
android:id="#+id/view_pager_controller"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:showConfirmButton="true" />
</android.support.constraint.ConstraintLayout>
Where the ViewPagerController is a holder for the ViewPager, TabLayout(for the page indication of the ViewPager) and some buttons that I omitted in the layout below.
ViewPagerController
<merge>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/tab_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
...some other buttons for next en previous of the ViewPager...
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="#dimen/size_48"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_pager"
app:tabBackground="#drawable/tab_selector"
app:tabIndicatorHeight="0dp" />
</merge>
And finally the majorty of the pages for the ViewPager have this layout:
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="handler"
type="fragmentX" />
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_white">
<android.support.constraint.ConstraintLayout
android:id="#+id/top_panel"
android:layout_width="0dp"
android:layout_height="#dimen/header_input_height"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:paddingEnd="#dimen/size_16"
android:paddingStart="#dimen/size_16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/actionBarItemBackground"
android:minHeight="#dimen/size_48"
android:minWidth="#dimen/size_48"
android:onClick="#{(V) -> handler.onClose()}"
android:src="#drawable/ic_close"
app:layout_constraintBottom_toBottomOf="#id/icon_img"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/icon_img" />
<ImageView
android:id="#+id/icon_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/size_16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_logo" />
<TextView
android:id="#+id/title_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/size_32"
android:fontFamily="#font/alvania_regular"
android:text="title or page"
android:textColor="#color/white"
android:textSize="#dimen/font_size_biggest"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/icon_img" />
<TextView
android:id="#+id/message_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/size_8"
android:alpha="0.87"
android:fontFamily="#font/frutiger_light"
android:gravity="center"
android:lineSpacingExtra="8sp"
android:text="sub title fo a page"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/title_txt" />
</android.support.constraint.ConstraintLayout>
...more views
</android.support.constraint.ConstraintLayout>
</layout>

First of all you have to apply Fullscreen to your activity so all fragments in your activity will be on fitsSystemWindow (Fullscreen), then on every fragment you can set statusBar color, which will trigger fullscreen or normal case. If statubar transparent then fragment in fullscreen.
Enable Fullscreen:
window.decorView.systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
Enable/Disable Fullscreen by coloring StatusBar:
activity?.window?.statusBarColor = Color.TRANSPARENT //Fullscreen
activity?.window?.statusBarColor = Color.TRANSPARENT //non-Fullscreen
Just enable disable it when your Fullscreen is visible or hidden
Read post about it:
https://medium.com/jama9779/single-activity-with-fullscreen-simple-fragments-fefe7f041765

View animated using CoordinatorLayout and AppBarLayout getting crazy (sometimes)

This thing is getting me nuts.
I have been able to get this behavior (exactly what I want): http://i.imgur.com/PGhL22k.gif
And this is the behavior is has when I scroll down very fast: http://i.imgur.com/kk7icAc.gif and http://i.imgur.com/YNPNiA6.gif
I am sorry but the GIFs are larger than 2Mb and I cannot upload them here...
I want the pagination bar at the bottom to hide the same amount the toolbar does. When scrolling slowly it goes very well, but when fast scrolling it has a really strange behavior as you can see at the GIFs provided above.
This is the layout XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:kiosk="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
layout="#layout/android_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
kiosk:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
kiosk:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<include
layout="#layout/paginator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
kiosk:layout_behavior="carl.fri.fer.views.KioskPaginator.KioskPaginatorScrollBehaviour"/>
</android.support.design.widget.CoordinatorLayout>
The "android_toolbar" include is as follows:
<?xml version="1.0" encoding="utf-8"?>
<carl.fri.fer.views.KioskToolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
And the "paginator_layout" is the following:
<?xml version="1.0" encoding="utf-8"?>
<carl.fri.fer.views.KioskPaginator.KioskPaginator
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kpPaginator"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:animateLayoutChanges="true"
android:background="#color/primaryColor"
android:clickable="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tvCurrentPage"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:padding="10dp"
android:textColor="#color/color_pure_black"
android:textSize="17sp"/>
<LinearLayout
android:id="#+id/llMoreOptions"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:orientation="horizontal"/>
<TextView
android:id="#+id/tvTotalPages"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:padding="10dp"
android:textColor="#color/color_pure_black"
android:textSize="17sp"/>
</carl.fri.fer.views.KioskPaginator.KioskPaginator>
And the ScrollBehavior is as follows:
public class KioskPaginatorScrollBehaviour extends AppBarLayout.ScrollingViewBehavior {
public KioskPaginatorScrollBehaviour(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
float depY = - dependency.getHeight();
depY -= dependency.getY();
Utils.log("dependency", "" + depY);
child.setTranslationY(depY);
return true;
}
}
Inside of every page of the ViewPager, there is a Fragment. And the content of this Fragment is a RecyclerView with dynamic content. All the content from the RecyclerView is loaded from database and images are loaded at runtime.
Can someone please tell me why is this strange behavior happening? How can I fix it?
Thank you in advance...
EDIT 1:
I just spotted the cause of the weird behavior! The ViewPager loads the current page and the adjoining ones. The content of the RecyclerView loads from the Internet and as soon as it is loaded, it goes into the RecyclerView. The ViewPager first loads the current page and then the adjoining ones. If I have scrolled down the current page RecyclerView (Toolbar is hidden) when the 2nd RecyclerView just loads and shows the content, it resets the current page AppBarLayout behavior, so it resets my custom view behavior... How can I fix that? I want to avoid not loading adjoining views..
EDIT 2:
Ok, it happens when loading adjoining pages of ViewPager and also when loading from the Internet images inside the RecyclerView... this is crazy.

So finally resolved your problem - make your custom behavior extending CoordinatorLayout.Behavior instead of ScrollingViewBehavior and it will work as expected. Just set the value to your view's translationY, that is opposite to Y of AppBarLayout:
public class KioskPaginatorScrollBehaviour extends CoordinatorLayout.Behavior<View> {
public KioskPaginatorScrollBehaviour(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
float depY = -dependency.getY();
child.setTranslationY(depY);
return true;
}
}

A Fragment's height (in a Viewpager) cannot be reduced

I have a tablayout with a viewpager that contains four fragments, the first 3 tabs( fragments) works fine. But the last fragment's height cannot be reduced . Its layout contains only an Imageview with fixed size height. but the fragment height is always greater than the imageview. I tried to put the imageview inside a frame layout and linearlayout, trying all height possibilities: match_parent, wrap_content and fixed size height but, it didn't work.
I tried to add maxHeight to the imageview with no luck.
I guessed that the problem may be with the view pager since it may be measuring other fragment's height and stuck with this height, but why other fragments is working fine.So I need your help. Thanks in advance
This is my last fragment layout:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="260dp"
android:maxHeight="260dp"
android:scaleType="centerCrop"
android:src="#drawable/gs350f"/>
And this is the viewpager layout:
<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.support.design.widget.TabLayout
android:id="#+id/car_overview_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/rounded_corner"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/transparent"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/high" />
<com.myproject.ui.custom.NonSwipeableViewPager
android:id="#+id/overview_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/car_overview_tabs" />
And finally this is NonSwipeableViewPager class:
public class NonSwipeableViewPager extends ViewPager {
public NonSwipeableViewPager(Context context) {
super(context);
}
public NonSwipeableViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override public boolean onInterceptTouchEvent(MotionEvent event) {
// Never allow swiping to switch between pages
return false;
}
#Override public boolean onTouchEvent(MotionEvent event) {
// Never allow swiping to switch between pages
return false;
}
}

make page scroll disable in pagerslidingtabstrip

Can we disable page sliding in PagerSlidingTabStrip ? I am using PagerSlidingTabStrip where tabs are created dynamically in my example. On each fragment there are tow buttons
Chapter wise analysis
Rank wise analysis
What i want is when user click on Rank wise analysis Sliding should disable and tabs get hide and when click on Chapter wise analysis tabs should visible again and sliding should also enable. How to achieve this? Tabs hide and show is working properly but am not able to make slide disable.

Create a separate class which should extend ViewPager:
public class CustomViewPager extends ViewPager {
public CustomViewPager(Context context) {
super(context);
}
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
// Never allow swiping to switch between pages
return false;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// Never allow swiping to switch between pages
return false;
}
}
And then use this viewPager to set in your xml file like this:
<com.packagename.CustomViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Then in your activity, set your FragmentPagerAdapter to this viewPager:
mViewPager.setAdapter(YourFragmentPagerAdapter)

Extend ViewPager and override onInterceptTouchEvent() and onTouchEvent().
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return false;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
return false;
}

Here is my solution....
I make slight changes with my layout.Previously i had 2 buttons on each fragment.
Now i place that two button in parent activity.. here is my xml file.
<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:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/lintab"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.joyoflearning.utils.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="#drawable/background_tab" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/lintab"
android:background="#drawable/background_tab"
tools:context=".TestAnalysisActivity" />
<LinearLayout
android:id="#+id/RankAnalysisFragment"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/linButtons"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/linButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/darkGray"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnChapterWise"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#drawable/btn_blue_bg"
android:drawableLeft="#drawable/checkbtn_icon"
android:drawablePadding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Chapterwise"
android:textColor="#ffffff" />
<Button
android:id="#+id/btnRankWise"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:background="#drawable/btn_blue_bg"
android:drawableLeft="#drawable/uncheckbtn_icon"
android:drawablePadding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Rankwise"
android:textColor="#ffffff" />
</LinearLayout>
Now click on ChapterWiseAnalysisbutton will hide LinerLayout having id RankAnalysisFragment and click on RankWiseAnalysis will hide Tabs,ViewPager and add a fragment to LinerLayout .