Shared Elements Transitions only working in 2/3 cases

Shared Elements Transitions only working in 2/3 cases - android

I was playing around with the Shared Element Transition and developed a testapp with 4 Fragments.
In the picture you can see, the first Fragment contains a "start now" message, when it's clicked I want to replace the container with the Fragment in the middle. As an eye candy I want an Animation by using Shared Element Transitions.
Problem
My Problem is, if I leave the first Fragment empty (without starting message) and I for example set the OnClickListener to the Icon itself, everything is working alright with a nice animation. But if the first Fragment has that message in it only the first Icon (the second Fragment, picture in mid) doesn't have an animation anymore. It's just replacing the first fragment. The curios thing is, if I change my OnClickListener and let it start the second page (right picture) the animation is working fine again. So only the first/left Icon does not provide an animation though all Methods and XML are mostly 1:1 the same.
As I couldn't develope a better solution, each "toolbar" is designed in the Fragment itself.
Main Activity
public class FirstStartupActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_firststartup);
doFragmentTransaction(new MainFragment(), "TAG", false, null);
}
public void doFragmentTransaction(Fragment fragment, String tag, boolean addToBackStack, List<View> sharedElements){
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.ActivityFirstStartup_fragmentContainer, fragment, tag);
if(addToBackStack){
transaction.addToBackStack(tag);
}
if( sharedElements != null && !sharedElements.isEmpty()){
for(int i = 0; i < sharedElements.size(); i++){
View view = sharedElements.get(i);
transaction.addSharedElement(view, view.getTransitionName());
}
}
transaction.commit();
}}
First Fragment with Message
public class MainFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_home, container, false);
View view = v.findViewById(R.id.relLayoutPageOne);
final List<View> listview = new ArrayList<>();
listview.add(view);
View view2 = v.findViewById(R.id.relLayoutPageTwo);
final List<View> listview2 = new ArrayList<>();
listview2.add(view2);
Button button = v.findViewById(R.id.buttonStart);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
((FirstStartupActivity)getActivity()).doFragmentTransaction(new UsernameFragment(), "test", true, listview);
//((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
}
});
RelativeLayout rel2 = v.findViewById(R.id.relLayoutPageTwo);
rel2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
}
});
return v;
}}
Second Fragment No Animation
public class UsernameFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_pgone, container, false);
postponeEnterTransition();
return v;
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
}
}}
Third Fragment Working
public class CameraFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_pgtwo, container, false);
return v;
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
}
}}
Second Fragment (Picture in middle) No Animation when replacing)
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/draw_login_edittext">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:id="#+id/relLayoutPageTwo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileCam"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:transitionName="ProfileCam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:transitionName="ProfilePic"
android:layout_width="273dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/draw_login_edittext_rounded"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/test" />
</RelativeLayout>
First Fragment (Picture left)
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#a8655c">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:transitionName="ProfilePic"
android:id="#+id/relLayoutPageOne"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.049"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/test" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageTwo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileCam"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:forceHasOverlappingRendering="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/draw_login_edittext_rounded"
android:padding="25dp"
android:transitionName="ProfilePic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Bevor du loslegen könnst benötigen wir noch kurz ein paar Informationen über dich! :)"
android:textAlignment="center"
android:textColor="#BFFFFFFF" />
<Button
android:id="#+id/buttonStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text"
android:layout_centerHorizontal="true"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="15dp"
android:background="#drawable/draw_rounded_edittext_dark"
android:text="Start now"
android:textColor="#BFFFFFFF" />
</RelativeLayout>
Third Fragment (right Picture) Animation when replacing
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/draw_login_edittext">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:id="#+id/relLayoutPageOne"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfilePic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.049"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/test" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:layout_width="273dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#c8c8c8"
android:transitionName="ProfileCam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testtwo" />
</RelativeLayout>
Visual Description
First Icon doesn't work but the second one works like charm
For some Reason the first GIF is way too fast, its popping up normally the only Problem is the missing Animation

Well I tried to change some things and I made everything worse. Then I "repaired" it and now it works, unfortunetly I can't show you a solution for that. I try to work through the codes again
EDIT: #LieForBanana had the solution but I understood him wrong, indeed my first Fragment also had the Transition Name it (3x TransitionName ProfilePic). I am ashamed, it was just one silly mistake

Related

Handle button event of ListView of Fragment class?

I have used two Fragment in my code. I have to display a custom ListView in each fragment. But I would like to handle Button's onClickListener event which is in this ListView.
I can't find online how to use these Button (ImageButton, actually) components in Fragment class.
Here is my code:
My fragment class:
public class tabtodo extends Fragment implements View.OnClickListener {
public tabtodo() {}
private View view, view2;
private ListView lstTask;
private ImageButton btndelete;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_tabtodo, container, false);
lstTask = (ListView) view.findViewById(R.id.listView);
AlUpdater alUpdater = new AlUpdater(getContext());
lstTask.setAdapter(alUpdater.getAdapterTodo());
view2 = inflater.inflate(R.layout.row, container, false);
btndelete = (ImageButton) view2.findViewById(R.id.btntest);
btnTest.setOnClickListener(this);
return mView;
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btntest:
Log.i("prova", "prova ");
break;
default:
Log.i("prova", "def");
break;
}
}
alUpdater.getAdapterTodo() is:
public ArrayAdapter < String > getAdapterTodo() {
ArrayList < String > taskList = (dG).getListTodo("todo");
if (adptodo == null) {
adptodo = new ArrayAdapter < > (context, R.layout.row, R.id.task_title, taskList);
adptodo.notifyDataSetChanged();
} else {
adptodo.clear();
adptodo.addAll(taskList);
adptodo.notifyDataSetChanged();
}
return adptodo;
}
as you can see, I am using a custom layout for the arrayadapter.
R.layout.fragment_tabtodo: is a fragment with just a listview:
<?xml version="1.0" encoding="utf-8"?>`
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".tabtodo"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:background="#color/white">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/white"
android:dividerHeight="0dp"
android:footerDividersEnabled="true"
android:headerDividersEnabled="true">
</ListView>
</FrameLayout>
and finally, the XML of the row of the adapter (**R.layout.row**):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingVertical="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/themeselector">
<TextView
android:id="#+id/task_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:text="TASK"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnGoToDone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<ImageButton
android:id="#+id/btnGoToDone"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/transparent"
android:onClick="switchTodoDone"
android:src="#drawable/ic_done_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btndelete"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/btndelete"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:backgroundTint="#android:color/transparent"
android:src="#drawable/ic_delete_icon"
android:onClick="deleteTask"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

you need to create a custom adapter for you ListView. and handle the button click there.
check this tutorial here
I would recommend that you use RecyclerView instead of ListView since it enforces the ViewHolder pattern which improves the performance.

ViewPager indicator scrolling up/down with whole page

I've made Activity with ViewPager and I also have adapter for it and Fragment which is displayed by ViewPager. Whole Fragment (in XML) is inside ScrollView. When I'm scrolling page up and down the indicator doesn't scroll with whole layout.
I know the reason why this is happening (indicator is inside Activity layout and ScrollView is inside Fragment XML file). I need some help or advice how to make it scroll or any other solution how to avoid that because indicator at "start position" is looking good but when I scroll down it covers part of text.
I know it is possible because I've seen it on Instagram but I don't know how to achieve this.
Let me provide some code:
Activity with ViewPager:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Album.AlbumPagerActivity">
<android.support.design.widget.FloatingActionButton
android:id="#+id/album_pager_fab_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="10dp"
android:layout_marginStart="15dp"
android:alpha=".7"
android:backgroundTint="#color/CKBrownie"
android:elevation="2dp"
android:scaleType="center"
android:src="#drawable/back_ico"
android:tint="#color/CKGold"
android:translationZ="0dp"
app:backgroundTint="#color/CKBrownie" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/album_pager_fab_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
android:layout_marginEnd="15dp"
android:alpha=".7"
android:backgroundTint="#color/CKBrownie"
android:elevation="2dp"
android:scaleType="center"
android:src="#drawable/forward_ico"
android:tint="#color/CKGold"
android:translationZ="0dp"
app:backgroundTint="#color/CKBrownie" />
<android.support.v4.view.ViewPager
android:id="#+id/album_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignTop="#+id/album_view_pager"
android:layout_marginTop="#dimen/_360sdp" />
</RelativeLayout>
Fragment:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroudmck">
<android.support.constraint.ConstraintLayout 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"
tools:context=".Album.PhotoFragment">
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/photo_pager_image"
android:layout_width="#dimen/_240sdp"
android:layout_height="#dimen/_360sdp"
android:layout_marginTop="#dimen/_12sdp"
android:background="?android:attr/selectableItemBackground"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/photo_pager_image_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_24sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_24sdp"
android:gravity="left"
android:text="Image title"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/photo_pager_image" />
<LinearLayout
android:id="#+id/underline_photo_fragment"
android:layout_width="match_parent"
android:layout_height="#dimen/_2sdp"
android:layout_marginStart="#dimen/_22sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_22sdp"
android:background="#color/CKGold"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/photo_pager_image_title" />
<TextView
android:id="#+id/photo_pager_image_technique"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_24sdp"
android:layout_marginTop="#dimen/_8sdp"
android:layout_marginEnd="#dimen/_24sdp"
android:textSize="#dimen/_18sdp"
android:text="Additional info about image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/underline_photo_fragment" />
<TextView
android:id="#+id/photo_pager_image_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_24sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_24sdp"
android:layout_marginBottom="#dimen/_2sdp"
android:textSize="#dimen/_18sdp"
android:text="Long image description (because of this TextView I had to make it scrollable)"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/photo_pager_image_technique" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Adapter:
public class AlbumViewPagerAdapter extends FragmentStatePagerAdapter {
private int number;
public AlbumViewPagerAdapter(FragmentManager fm, int number) {
super(fm);
this.number = number;
}
#Override
public Fragment getItem(int i) {
PhotoFragment pf;
Bundle bundle;
switch (i) {
case 0:
bundle = new Bundle();
bundle.putInt("num", i);
bundle.putInt(Constants.NUMBER, number);
pf = new PhotoFragment();
pf.setArguments(bundle);
return pf;
case 1:
bundle = new Bundle();
bundle.putInt("num", i);
bundle.putInt(Constants.NUMBER, number);
pf = new PhotoFragment();
pf.setArguments(bundle);
return pf;
case 2:
bundle = new Bundle();
bundle.putInt("num", i);
bundle.putInt(Constants.NUMBER, number);
pf = new PhotoFragment();
pf.setArguments(bundle);
return pf;
}
return null;
}
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, int position) {
Object obj = super.instantiateItem(container, position);
return obj;
}
#Override
public int getCount() {
return 3;
}
}
Instagram app has a ViewPager with indicator placed below a photo but above a text and when I navigate between "pages" the text and the photo are changing but when I scroll page up/down the indicator move with whole page up and down. Maybe it's a problem with my indicator placement? But when I try to put it inside the Fragment I won't be able to attach it to my ViewPager which is created inside Activity

Recycler view is not rendering when width & height are set to 0dp

I have a simple layout, which contains a text view, ImageView, and a recycler view, If i set recycler's view width & height to 0dp, and connects its constraint to parent, it does not render the recycler view.
But if i define height in numbers then it works fine, and renders recyclerview
This is my code
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
tools:context=".activities.MyActivityV2">
<include layout="#layout/content_more_activity" />
</android.support.design.widget.CoordinatorLayout>
Inner Layout
<android.support.constraint.ConstraintLayout 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"
tools:context=".activities.MyActivityV2"
tools:showIn="#layout/activity_more">
<ImageView
android:id="#+id/imageView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
<TextView
android:id="#+id/tvLabelMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="10dp"
android:letterSpacing="0.1"
android:text="MORE"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="24dp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/imageView23"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvMoreItems"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView23" />
Class File
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
init();
generateDataForRecyclerView();
initRecyclerView();
}
private void init() {
rvMoreItems= findViewById(R.id.rvMoreItems);
}
private void generateDataForRecyclerView() {
MoreDataClass moreDataClass= new MoreDataClass();
moreDataClass.setLabel("AAA");
moreDataClass.setHeaderItem(true);
dataList.add(moreDataClass);
dataList.add(moreDataClass);
}
private void initRecyclerView() {
MoreAdapter moreAdapter= new MoreAdapter(this);
moreAdapter.setData(dataList);
rvMoreItems.setLayoutManager(new LinearLayoutManager(this));
rvMoreItems.setAdapter(moreAdapter);
}

Update this function check below.
private void initRecyclerView() {
MoreAdapter moreAdapter= new MoreAdapter(this);
rvMoreItems.setLayoutManager(new LinearLayoutManager(this));
rvMoreItems.setAdapter(moreAdapter);
moreAdapter.setData(dataList);
}

Custom fragment transition parent-to-child navigation setExitTransition not showing

Background
I've been trying to get parent-to-child navigational transition implemented (specifically for recyclerview items -> detail fragment). I'm currently using sharedElementTransitions with the item container and detail container as the sharedElement along with ChangeTransform and ChangeBounds transitions. The detail fragment's enter transition is mostly working. However, I am having problems with the recyclerview item's exit transition. What I want to do is have the recyclerview dim/turn darker while the detail view expands to full screen. When I try to use a custom transition, the exit transition never animates. Instead, the detail view is immediately shown and its enter transition animates.
As you can see, the recyclerview fragment is hidden before the exit animation is played. I need the recyclerview to be shown with the dimming effect while the detail view is expanding.
Problem
How do I get the dim custom exit transition to play while the detail enter transition is also playing?
What I've tried
setDelay - setDelay on detail enter transition. The transition is delayed but the detail fragment immediately shown (the recyclerview is blocked off by the new fragment).
setDuration - setDuration on recyclerview exit transition. Detail fragment still blocks the recyclerview.
ItemViewModel.java
public void displayArticle(View view) {
MainActivity mainActivity = (MainActivity) view.getContext();
ArticleFragment detailsFragment = ArticleFragment.newInstance(article.getValue(), transitionName.getValue());
ArticleListingFragment itemFragment = (ArticleListingFragment) mainActivity.getSupportFragmentManager().findFragmentByTag(ArticleListingFragment.TAG);
doOpenArticleTransition(detailsFragment, itemFragment);
mainActivity.getSupportFragmentManager()
.beginTransaction()
.addSharedElement(view.findViewById(R.id.article_entry), transitionName.getValue())
.replace(R.id.main_content_container, detailsFragment)
.addToBackStack(null)
.commit();
}
private void doOpenArticleTransition(Fragment newFragment, Fragment oldFragment) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Transition openArticleTransition = TransitionInflater.from(oldFragment.getContext()).inflateTransition(R.transition.transition_article);
newFragment.setSharedElementEnterTransition(openArticleTransition);
newFragment.setEnterTransition(new Fade());
oldFragment.setExitTransition(new Dim(oldFragment.getContext()));
newFragment.setSharedElementReturnTransition(openArticleTransition);
}
}
Dim.java
public class Dim extends BaseTransition {
private static final String PROPNAME_BACKGROUND = "meridian:dim:background";
private final Context context;
public Dim(Context context) {
this.context = context;
}
public Dim(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
#Override
public void captureValues(TransitionValues transitionValues) {
Drawable background = transitionValues.view.getBackground();
transitionValues.values.put(PROPNAME_BACKGROUND, background);
}
#Override
public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues) {
final View view;
if (startValues == null && endValues != null) {
view = endValues.view;
} else {
view = startValues.view;
}
int whiteBackground = ContextCompat.getColor(context, R.color.white);
int grayBackground = ContextCompat.getColor(context, R.color.gray700);
ValueAnimator animator = ValueAnimator.ofArgb(whiteBackground, grayBackground);
animator.setDuration(400);
animator.setStartDelay(300);
animator.addUpdateListener(animation -> view.setBackgroundColor((Integer)animation.getAnimatedValue()));
return animator;
}
}
transition_article.xml
<?xml version="1.0" encoding="utf-8"?>
<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
android:transitionOrdering="together">
<changeBounds/>
<changeTransform/>
<transition
class="meridian.custom.anim.Elevate"/>
</transitionSet>
recyclerview_item.xml
<android.support.constraint.ConstraintLayout
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/article_entry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground">
<TextView
android:id="#+id/article_listing_section"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/two_line_list_entry_margin_lr"
android:layout_marginEnd="#dimen/two_line_list_entry_margin_lr"
android:layout_marginTop="#dimen/two_line_list_entry_margin_tb"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/article_listing_section_title_barrier"
app:layout_constraintTop_toTopOf="parent"
style="#style/EntryOverline"
tools:text="#tools:sample/cities" />
<TextView
android:id="#+id/article_listing_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/two_line_list_entry_margin_tb"
android:layout_marginEnd="#dimen/two_line_list_entry_margin_lr"
android:textAlignment="viewEnd"
app:layout_constraintEnd_toStartOf="#+id/article_listing_date_image_barrier"
app:layout_constraintTop_toTopOf="parent"
style="#style/EntryOverlineGray"
tools:text="17h" />
<TextView
android:id="#+id/article_listing_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/two_line_list_entry_margin_tb"
android:layout_marginEnd="#dimen/two_line_list_entry_margin_lr"
android:layout_marginTop="#dimen/two_line_list_entry_first_line_second_line_spacing"
app:layout_constraintStart_toStartOf="#id/article_listing_section"
app:layout_constraintEnd_toStartOf="#id/article_listing_section_title_barrier"
app:layout_constraintTop_toBottomOf="#id/article_listing_section"
app:layout_constraintBottom_toBottomOf="parent"
android:minLines="3"
android:maxLines="3"
style="#style/EntrySubtitle1"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
<ImageView
android:id="#+id/article_listing_image"
android:layout_width="#dimen/two_line_list_entry_image_width"
android:layout_height="#dimen/two_line_list_entry_image_width"
android:layout_marginStart="#dimen/two_line_list_entry_margin_lr"
android:layout_marginEnd="#dimen/two_line_list_entry_margin_lr"
android:contentDescription="#string/content_description_image_article_entry"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/article_listing_date_image_barrier"
app:layout_constraintTop_toTopOf="parent"
android:src="#drawable/item_article_entry_image_placeholder" />
<android.support.constraint.Barrier
android:id="#+id/article_listing_section_title_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="article_listing_date"/>
<android.support.constraint.Barrier
android:id="#+id/article_listing_date_image_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="article_listing_image"/>
</android.support.constraint.ConstraintLayout>
recyclerview_fragment.xml
<android.support.v4.widget.DrawerLayout
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/drawer_article_sections"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout_articles"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar" />
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_to_refresh_articles"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/articles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="2"
tools:layoutManager="android.support.v7.widget.LinearLayoutManager"
tools:listitem="#layout/item_article_entry" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view_article_sections"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextAppearance="#style/SectionSubtitle1"
app:menu="#menu/navigation_article_topic"
app:headerLayout="#layout/navigation_header_article_sections"/>
details_fragment.xml
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:elevation="24dp">
<include
layout="#layout/toolbar" />
<android.support.v4.widget.NestedScrollView
android:id="#+id/article_scroll_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:id="#+id/article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".ui.article.display.ArticleFragment">
<HorizontalScrollView
android:id="#+id/article_description_scroll_container"
style="#style/HorizontalChipScroller"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="none"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.chip.ChipGroup
android:id="#+id/article_description_chip_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/chip_group_description_tags"
app:singleLine="true"/>
</HorizontalScrollView>
<ImageView
android:id="#+id/article_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="#dimen/detail_general_margin_lr"
android:layout_marginStart="#dimen/detail_general_margin_lr"
android:layout_marginTop="#dimen/detail_general_margin_tb"
android:contentDescription="#string/content_description_image_article"
android:scaleType="centerCrop"
android:src="#drawable/item_article_entry_image_placeholder"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.45"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/article_description_scroll_container"
tools:layout_height="208dp"
tools:src="#color/colorImagePlaceholder" />
<TextView
android:id="#+id/article_section"
style="#style/DetailOverline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/detail_general_margin_lr"
android:layout_marginStart="#dimen/detail_general_margin_lr"
android:layout_marginTop="#dimen/detail_general_margin_tb"
app:layout_constraintEnd_toStartOf="#id/article_subsection"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/article_image"
tools:text="US"
tools:textColor="#color/gray900" />
<TextView
android:id="#+id/article_subsection"
style="#style/DetailOverline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/detail_general_margin_lr"
android:layout_marginTop="#dimen/detail_general_margin_tb"
app:layout_constraintStart_toEndOf="#id/article_section"
app:layout_constraintTop_toBottomOf="#id/article_image"
tools:text="Poverty"
tools:textColor="#color/gray900" />
<TextView
android:id="#+id/article_title"
style="#style/DetailH6Headline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/detail_general_margin_tb"
android:layout_marginEnd="#dimen/detail_general_margin_lr"
android:layout_marginStart="#dimen/detail_general_margin_lr"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/article_section"
tools:text="Pope Accepts Wuerl's Resignation as Washington Archbishop, but Calls Him a Model Bishop"
tools:textColor="#color/gray900"
tools:textSize="20sp"
tools:textStyle="bold" />
<TextView
android:id="#+id/article_abstract"
style="#style/DetailBody2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/detail_general_margin_tb"
android:layout_marginEnd="#dimen/detail_general_margin_lr"
android:layout_marginStart="#dimen/detail_general_margin_lr"
android:layout_marginTop="#dimen/detail_general_margin_tb"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/article_title"
tools:text="Despite demands to oust Cardinal Wuerl over sexual abuse scandals, Pope Francis praised him as a model leader."
tools:textColor="#color/gray600" />
<TextView
android:id="#+id/article_author"
style="#style/DetailBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/detail_general_margin_tb"
android:layout_marginEnd="#dimen/detail_general_margin_lr"
android:layout_marginStart="#dimen/detail_general_margin_lr"
android:layout_marginTop="#dimen/detail_general_margin_tb"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/article_abstract"
tools:text="by Jason Horowitz, Elizabeth Dias and Laurie Goodstein"
tools:textColor="#color/gray900" />
<android.support.design.button.MaterialButton
android:id="#+id/article_full_content_button"
style="#style/OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/detail_general_margin_tb"
android:layout_marginEnd="#dimen/detail_general_margin_lr"
android:layout_marginStart="#dimen/outlined_button_padding_lr"
android:layout_marginTop="#dimen/detail_general_margin_tb"
android:text="#string/button_label_article_read_more"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/article_author" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
DetailsFragment.java
#BindView(R.id.article)
ConstraintLayout container;
#Override
public void onViewCreated(View view, #Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
setupToolbar();
setTransitionName();
loadArticle();
}
private void setTransitionName() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
container.setTransitionName(this.getArguments().getString(ARG_TRANSITION));
}
}

Constraint issue with fragments inside TabLayout in activity

I am trying to implement a step-by-step tutorial at the start of my app. I created 3 fragment instances that the user can scroll through. They are combined using a FragmentPagerAdapter, that is set up and added to a TabLayout so that the fragments are treated as tabs. The tab indicators are given a custom style so that they appear as dots.
The issue I am encountering is that everything looks fine in design view, but when the app is deployed in the emulator, the constraint layouts are not respected and the positioning and sizing of the view controls within the fragment end up in a wonky configuration. The activity is set to portrait only, so display orientation is not an issue.
This is how the fragment appears in design view:
3 separate GIFs are loaded in the WebView instances (they are random for the purposes of this question).
This is how everything actually appears in the emulator:
As you can see, the WebView is the size of the entire fragment, and the TextView and Button are nowhere to be found, even if the WebView is removed.
Here is the entire code and Android Studio project associated with the question: https://github.com/mathusummut/StackOverflowQuestionCode1
Here is the most relevant code:
TutorialActivity.java:
package mathusummut.dabtest;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
public class TutorialActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tutorial);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
Fragment currentPage = new TutorialFragment();
Bundle currentBundle = new Bundle();
currentBundle.putString("tutorialText", "1. Turn the volume up ↑");
currentBundle.putString("tutorialGif", "file:///android_asset/volume.gif");
currentPage.setArguments(currentBundle);
adapter.addFragment(currentPage, "");
currentPage = new TutorialFragment();
currentBundle = new Bundle();
currentBundle.putString("tutorialText", "2. Grab the phone in one hand...");
currentBundle.putString("tutorialGif", "file:///android_asset/step2.gif");
currentPage.setArguments(currentBundle);
adapter.addFragment(currentPage, "");
currentPage = new TutorialFragment();
currentBundle = new Bundle();
currentBundle.putString("tutorialText", "Dab...");
currentBundle.putString("tutorialGif", "file:///android_asset/step3.gif");
currentPage.setArguments(currentBundle);
adapter.addFragment(currentPage, "");
ViewPager viewPager = findViewById(R.id.viewpager);
viewPager.setOffscreenPageLimit(3);
viewPager.setAdapter(adapter);
((TabLayout) findViewById(R.id.tabs)).setupWithViewPager(viewPager);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId()== android.R.id.home) {
finish();
return true;
} else
return super.onOptionsItemSelected(item);
}
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
private final List<String> fragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
#Override
public int getCount() {
return fragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
}
}
fragment_tutorial.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
tools:context="mathusummut.dabtest.TutorialFragment">
<WebView
android:id="#+id/tutorialGifView"
android:layout_width="330dp"
android:layout_height="346dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</WebView>
<TextView
android:id="#+id/tutorialTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:text="Instructions"
android:textAlignment="center"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/nextButton"
android:layout_width="124dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="456dp"
android:layout_x="69dp"
android:layout_y="386dp"
android:background="#android:color/holo_red_dark"
android:text="Next"
android:textAlignment="center"
android:textAllCaps="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
activity_tutorial.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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/coordinatorLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/appBarLayout2"
app:layout_constraintTop_toTopOf="#+id/appBarLayout2">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabMode="fixed"
app:tabIndicatorHeight="0dp"/>
</android.support.constraint.ConstraintLayout>
I have tried using RelativeLayout instead of ConstraintLayout, but the change seems to have no effect on the result. What can I do to resolve this issue, please?

This is you code done my change you required.
enter image description here
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View currentFragment = inflater.inflate(R.layout.fragment_tutorial, container, false);
WebView view = currentFragment.findViewById(R.id.tutorialGifView);
Bundle passedArguments = getArguments();
((TextView) currentFragment.findViewById(R.id.tutorialTextView)).setText(passedArguments.getString("tutorialText"));
view.loadDataWithBaseURL(null, TEMPLATE_HTML.replace("gif", passedArguments.getString("tutorialGif")), "text/html", "utf-8", null);
view.setBackgroundColor(Color.TRANSPARENT);
view.setInitialScale(1);
view.getSettings().setJavaScriptEnabled(true);
view.getSettings().setLoadWithOverviewMode(true);
view.getSettings().setUseWideViewPort(true);
view.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
view.setScrollbarFadingEnabled(false);
return currentFragment;
}
}˚
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:orientation="vertical"
tools:context="mathusummut.dabtest.TutorialFragment">
<TextView
android:id="#+id/tutorialTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp"
android:text="Instructions"
android:textAlignment="center"
android:textSize="36sp" />
<WebView
android:id="#+id/tutorialGifView"
android:layout_width="330dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp" />
<Button
android:id="#+id/nextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:background="#android:color/holo_red_dark"
android:text="Next"
android:textAlignment="center"
android:textAllCaps="false"
android:textSize="24sp" />
I pull you code from GitHub .I think it is ok and working fine for you.
I make a separated branch push for you GitHub.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Shared Elements Transitions only working in 2/3 cases - android

Related

Handle button event of ListView of Fragment class?

ViewPager indicator scrolling up/down with whole page

Recycler view is not rendering when width & height are set to 0dp

Custom fragment transition parent-to-child navigation setExitTransition not showing

Constraint issue with fragments inside TabLayout in activity

Categories

Resources