Develop Reference

accessing different children in different pages of ViewPager

The layout of my StartupPreference is defined with only one ViewPager as:
<?xml version="1.0" encoding="utf-8"?>
<androidx.viewpager.widget.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/startPref_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
and the associated activity associates this as:
public class StartupPreference extends AppCompatActivity implements StartupPrefFrag_interfaces{
private final static int no_of_prefs = 2;
private LinearLayout dot_animation_holder;
private static int temp_count = 0;
public void ViewUpdater(View updatedView){
dot_animation_holder = (LinearLayout) updatedView;
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_startup_preference);
//we're not using the layout natively, but using Fragment's layout
//but setContentView is required -> it is accessed by : R.id.startPref_pager
dot_animation_holder= findViewById(R.id.dot_animation_holder);
StartPrefPagerAdapter prefPagerAdapter =
new StartPrefPagerAdapter(getSupportFragmentManager());
ViewPager StartPref_Viewpager = findViewById(R.id.startPref_pager);
StartPref_Viewpager.setAdapter(prefPagerAdapter);
StartPref_Viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
((ImageView)(findViewById(R.id.dot_animation_holder).findViewById(R.id.page1))).setImageResource(R.drawable.active_dot);
((ImageView)(findViewById(R.id.dot_animation_holder).findViewById(R.id.page2))).setImageResource(R.drawable.inactive_dot);
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
private class StartPrefPagerAdapter extends FragmentPagerAdapter {
public StartPrefPagerAdapter(FragmentManager fm){
super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
}
#Override
public int getCount(){
return StartupPreference.no_of_prefs;//no. of preference pages
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new Frag_StartPref_Layout();
case 1:
return new Frag_StartPref_Theme();
}
return null;
}
}
}
The problem I am having is that I'm not getting it how to access different Views associated with the ViewPager. Since both the layout of the fragments include a common layout called dot_animation.xml using the <include...> tag, but the code in the onPageSelected method above updates only the first page, and if I use different ids in the <include...> like:
fragment_startpref_layout.xml:
...
<include
layout="#layout/dot_animation"
android="#+id/dot_animation_holder1"
/>
...
fragment_startpref_theme.xml
...
<include
layout="#layout/dot_animation"
android="#+id/dot_animation_holder2"
/>
...
and I use these ids to update the ImageView then I get a NullPointer Exception.(I use the code in the activity)
So, what can I do to access the different Views in the respective pages of the ViewPager?
The layout of the fragments are given below:
fragment_startpref_layout.xml:
<?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:id="#+id/C_startPref_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<ImageView
android:id="#+id/startPref_Layout"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/startPref_layout_info"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/startPref_layout_info"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="#string/Frag_startPref_layout_info"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="#+id/startPref_layout_select1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".125"
app:layout_constraintStart_toStartOf="parent" />
<RadioGroup
android:id="#+id/startPref_layout_select1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/dot_animation_holder"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".125"
app:layout_constraintStart_toStartOf="parent">
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:checked="true"
android:text="#string/Frag_startPref_Radio1"
android:textSize="15sp" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/Frag_startPref_Radio2"
android:textSize="15sp" />
</RadioGroup>
<include
layout="#layout/dot_animation"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_theme_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/C_startPref_theme"
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_height="match_parent"
android:layout_width="match_parent"
>
<ImageView
android:id="#+id/startPref_Theme"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/startPref_layout_info"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/startPref_layout_info"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="#string/Frag_startPref_layout_info"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="#+id/startPref_layout_select2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".125"
app:layout_constraintStart_toStartOf="parent" />
<RadioGroup
android:id="#+id/startPref_layout_select2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/dot_animation_holder"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".125"
app:layout_constraintStart_toStartOf="parent">
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:checked="true"
android:text="#string/Frag_startPref_Radio1"
android:textSize="15sp" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/Frag_startPref_Radio2"
android:textSize="15sp" />
</RadioGroup>
<include
layout="#layout/dot_animation"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

First of all you need to update the view in fragmnet on onViewCreated.
the reason that you cant update other views is the viewpager only shows the current fragment.and the reason for nullpointexception also is that the other view are not loaded into the activity by viewpager.(You may also want to check if the correct layout is being called in the onCreateView method.) If you want to load all of them even if they are out of the screen you can use viewPager.setOffscreenPageLimit(); but this lose the viewpager purpose. so what i suggest is to create call back to communicate with your fragment and send data through callbacks and update your view inside of there fragment. also this make your activity less messy.
Update :
example of using ViewPager with multiple layouts
Document About setOffscreenPageLimit
Set the number of pages that should be retained to either side of the current page in the view hierarchy in an idle state. Pages beyond
this limit will be recreated from the adapter when needed.
This is offered as an optimization. If you know in advance the number
of pages you will need to support or have lazy-loading mechanisms in
place on your pages, tweaking this setting can have benefits in
perceived smoothness of paging animations and interaction. If you have
a small number of pages (3-4) that you can keep active all at once,
less time will be spent in layout for newly created view subtrees as
the user pages back and forth.
You should keep this limit low, especially if your pages have complex
layouts. This setting defaults to 1.

Shared Elements Transitions only working in 2/3 cases

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

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.

ScrollView inside fragment not scrolling

In my Activity I have a FrameLayout, that suppose to use as container for fragments.
In my fragment I got a ScrollView that doesn't respond. ScrollView contains TextView set android:layout_height="wrap_content", with text from my java code that clearly longer than the size of the ScrollView.
My fragment xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="#dimen/bookview.imageWidth"
android:layout_height="250dp"
android:id="#+id/bookView.image"/>
<TextView
android:textSize="#dimen/custom_book_text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toEndOf="#id/bookView.image"
android:id="#+id/bookView.name"/>
<TextView
android:textSize="#dimen/custom_book_text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toEndOf="#id/bookView.image"
android:layout_below="#id/bookView.name"
android:id="#+id/bookView.author"/>
<TextView
android:textSize="#dimen/custom_book_text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toEndOf="#id/bookView.image"
android:layout_below="#id/bookView.author"
android:id="#+id/bookView.pages"/>
<TextView
android:textSize="#dimen/custom_book_text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toEndOf="#id/bookView.image"
android:layout_below="#id/bookView.pages"
android:id="#+id/bookView.category"/>
<TextView
android:textSize="#dimen/custom_book_text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toEndOf="#id/bookView.image"
android:layout_below="#id/bookView.category"
android:id="#+id/bookView.publishingDate"/>
</RelativeLayout>
<ScrollView
android:layout_height="200dp"
android:layout_width="match_parent"
android:layout_gravity="end">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:textSize="#dimen/custom_book_text"
android:id="#+id/bookView.description"/>
</ScrollView>
</LinearLayout>
the xml of the activity:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/use.drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="#dimen/user_custom_book_height"
android:id="#+id/user.customBookContainer"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:id="#+id/user.container"/>
</LinearLayout>
<include
layout="#layout/navigation_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
i use FrameLayout because i want to change the fragment in that area,in runtime.better idea? i like to hear.
i have tried to decrese the heigth of the ScrollView.
my fragment java code:
public class BookView extends Fragment {
private Bitmap bitmap;
private String name;
public static BookView newInstance(String book,Bitmap bitmap) {
Bundle args = new Bundle();
BookView fragment = new BookView();
fragment.bitmap = bitmap;
fragment.name = book;
fragment.setArguments(args);
return fragment;
}
public BookView() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View v = inflater.inflate(R.layout.fragment_book_view, container, true);
Backend backend = BackendFactory.getInstance();
try {
Book b = backend.readBook(name);
TextView textView = (TextView)v.findViewById(R.id.bookView_name);
textView.setText(b.getBookName());
textView = (TextView)v.findViewById(R.id.bookView_author);
textView.setText(b.getAuthor());
textView = (TextView)v.findViewById(R.id.bookView_category);
textView.setText(b.getCategory().name());
textView = (TextView)v.findViewById(R.id.bookView_description);
textView.setText(b.getDescription());
textView = (TextView)v.findViewById(R.id.bookView_pages);
textView.setText(Integer.toString(b.getPages()));
textView = (TextView)v.findViewById(R.id.bookView_publishingDate);
textView.setText(b.getPublishingDate());
final ImageView imageView = (ImageView)v.findViewById(R.id.bookView_image);
if(bitmap != null){
imageView.setImageBitmap(bitmap);
} else{
ImageLoader imageLoader = new ImageLoader();
imageLoader.setListener(new ImageLoader.ImageTaskListener() {
#Override
public void onActionEnd() {}
#Override
public void onImageDownload(Bitmap bitmap) {
imageView.setImageBitmap(bitmap);
}
});
imageLoader.execute(b.getImage());
}
}
catch (Exception e) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setMessage(e.getMessage());
builder.create().show();
}
return inflater.inflate(R.layout.fragment_book_view, container, false);
}
}
imageLoader is a class i wrote,it extened AsyncTask for download image from a url and update the UI when it ready.

I think other parts (TextViews and ImageViews) of this fragment full all area of screen and ScrollView render out of screen.
I suggest you put all layout inside ScrollView.
like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/bookView.image"
android:layout_width="#dimen/bookview.imageWidth"
android:layout_height="250dp"/>
<TextView
android:id="#+id/bookView.name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/bookView.image"
android:textSize="#dimen/custom_book_text"/>
<TextView
android:id="#+id/bookView.author"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookView.name"
android:layout_toEndOf="#id/bookView.image"
android:textSize="#dimen/custom_book_text"/>
<TextView
android:id="#+id/bookView.pages"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookView.author"
android:layout_toEndOf="#id/bookView.image"
android:textSize="#dimen/custom_book_text"/>
<TextView
android:id="#+id/bookView.category"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookView.pages"
android:layout_toEndOf="#id/bookView.image"
android:textSize="#dimen/custom_book_text"/>
<TextView
android:id="#+id/bookView.publishingDate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bookView.category"
android:layout_toEndOf="#id/bookView.image"
android:textSize="#dimen/custom_book_text"/>
</RelativeLayout>
<TextView
android:id="#+id/bookView.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/custom_book_text"/>
</LinearLayout>

I assume you are able to see the fragment's view.
If so a few things to try:
Set the scroll view to fillViewPort="true"
and then set the text view to match parent since this is the only view in the scroll view. As a note you should really avoid using hard coded widths & heights (even dp heights).
Instead of returning
return inflater.inflate(R.layout.fragment_book_view, container, false);
just return the original view: v
Nother' bit of readability: instead of reassigning textview each time.
do:
((TextView)v.findViewById(R.id.blabla)).setText("BLA");
Edit:
I have tested this & it works.
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:fillViewport="true">
<TextView
android:id="#+id/faq_output_answer"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="match_parent" />
</ScrollView>

Try putting an empty view as the last item in your scrollview.
<View
android:layout_width = "match_parent"
android:layout_height = "50dp" />
This worked for me.

Implementing listeners for Views from different layout

I have a ViewPager for the user to swipe between two layouts. My Activity's layout is the one containing the viewPager and I have two additional xml the ones that describe the layout of the screens that are to be swiped. My question is how can I implement the listeners of the buttons of these two layouts in my activity, the one containing the the viewPager. I'll also post the code I've written so far:
main:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/fonto1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/grammi" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginEnd="17dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/aristerovelos2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/aristerovelos3"
android:layout_marginTop="21dp" />
<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="match_parent"
android:layout_gravity="center" >
</android.support.v4.view.ViewPager>
</LinearLayout>
<ImageView
android:id="#+id/deksivelos1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/deksivelos3" />
</RelativeLayout>
first layout to be swiped in the viewPager
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/galika"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:src="#drawable/gallika" />
<ImageView
android:id="#+id/germanika"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/germanika" />
<ImageView
android:id="#+id/ellinika"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ellinika" />
<ImageView
android:id="#+id/agglika"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="#drawable/agglika" />
The second is something like that, won't need posting it.
This is how I've tried setting my listeners but it won't work.
final LayoutInflater factory = getLayoutInflater();
final View panel = factory.inflate(R.layout.first_panel, null);
iv = (ImageView) panel.findViewById(R.id.el);
and then I set its listener which is trivial though it won't work properly

Ok I'm really sorry, I was really absent-minded I re-inflated another layout, not the one that was on the ViewPager that's why i was getting the button events I will post my way of making it work, just in case
#Override
public Object instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = (LayoutInflater) container.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int resId = 0;
switch (position) {
case 0:
resId = R.layout.first_panel;
break;
case 1:
resId = R.layout.second_panel;
break;
}
View view = inflater.inflate(resId, null);
((ViewPager) container).addView(view, 0);
if(resId==R.layout.first_panel)
ibellinika = (ImageView) view.findViewById(R.id.ellinika);
ibellinika.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
progressBar = new ProgressDialog(v.getContext());
progressBar.setCancelable(false);
progressBar.setMessage("Transfering Data ...");
}
});
return view;
}