Images disappear when read more button is clicked?

Question

I created a ScrollView and added two LinearLayouts inside one big LinearLayout and have given weights for those.The problem is that it shows my images of the image slider at initial state and once I clicked read more the images dissapear except for the dot indicators.Once again when I press read less the images of the image slider appear.Two screenshots and the codes are given below.How can I solve it?

FragmentSL.xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="4.5"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:id="@+id/SliderDots"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            android:layout_marginBottom="20dp"
            android:orientation="horizontal"/>


    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="5.5"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/aboutsltext"
        android:maxLines="3"
        android:textSize="22sp"
        android:textColor="@color/colorPrimary"
        android:text="Sri Lanka (formerly Ceylon) is an island nation south of India in the Indian Ocean. Its diverse landscapes range from rainforest and arid plains to highlands and sandy beaches. It’s famed for its ancient Buddhist ruins, including the 5th-century citadel Sigiriya, with its palace and frescoes. The city of Anuradhapura, Sri Lanka's ancient capital, has many ruins dating back more than 2,000 years. Sri Lanka (formerly Ceylon) is an island nation south of India in the Indian Ocean. Its diverse landscapes range from rainforest and arid plains to highlands and sandy beaches. It’s famed for its ancient Buddhist ruins, including the 5th-century citadel Sigiriya, with its palace and frescoes. The city of Anuradhapura, Sri Lanka's ancient capital, has many ruins dating back more than 2,000 years. "
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/readmorebtn"
        android:layout_width="wrap_content"
        android:text="Read More"
        android:textAllCaps="false"
        android:textColor="@color/colorPrimary"
        android:background="@drawable/readmorebtn"
        android:layout_height="wrap_content" />


</LinearLayout>




</LinearLayout>
</ScrollView>

FragmentClass.java

public class aboutSLFragment extends Fragment{

ViewPager viewPager;
LinearLayout sliderDotspanel;
private int dotscount;
private ImageView[] dots;
TextView aboutsltext;
Button readmorebtn;

public aboutSLFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View rootView = inflater.inflate(R.layout.fragment_about_sl, container, false);
    viewPager = (ViewPager) rootView .findViewById(R.id.viewPager);

    sliderDotspanel = (LinearLayout)rootView.findViewById(R.id.SliderDots);

    ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getContext());

    viewPager.setAdapter(viewPagerAdapter);

    dotscount = viewPagerAdapter.getCount();
    dots = new ImageView[dotscount];

    for(int i = 0; i < dotscount; i++){

        dots[i] = new ImageView(getContext());
        dots[i].setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.non_active_dot));

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

        params.setMargins(8, 0, 8, 0);

        sliderDotspanel.addView(dots[i], params);

    }

    dots[0].setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.active_dot));

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

            for(int i = 0; i< dotscount; i++){
                dots[i].setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.non_active_dot));
            }

            dots[position].setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.active_dot));

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    aboutsltext=(TextView)rootView.findViewById(R.id.aboutsltext);
    readmorebtn=(Button)rootView.findViewById(R.id.readmorebtn);
    readmorebtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            if (readmorebtn.getText().toString().equalsIgnoreCase("Read More"))
            {
                aboutsltext.setMaxLines(Integer.MAX_VALUE);//your TextView
                readmorebtn.setText("Read Less");
            }
            else
            {
                aboutsltext.setMaxLines(3);//your TextView
                readmorebtn.setText("Read More");
            }
        }
    });

    // Inflate the layout for this fragment
    return rootView;
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    //you can set the title for your toolbar here for different fragments different titles
    getActivity().setTitle("About Sri Lanka");
}

}

before read more is clicked before read more button is clicked

after after clicked

Calculating code

   final View rootView = inflater.inflate(R.layout.fragment_about_sl, container, false);
    viewPager = (ViewPager) rootView .findViewById(R.id.viewPager);

    ViewTreeObserver vto =(ViewTreeObserver) rootView.findViewById(R.id.aboutslscrollview).getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            rootView.findViewById(R.id.aboutslscrollview).getViewTreeObserver().removeOnGlobalLayoutListener(this);

            int scrollViewHeightInPixels = rootView.findViewById(R.id.aboutslscrollview).getMeasuredHeight();

            //This is equal with %45 weight you tried before
            int height = (scrollViewHeightInPixels * 45) / 100;
            ViewGroup.LayoutParams pagerParams = viewPager.getLayoutParams();
            pagerParams.height = height;
        }
    });


    final View view = rootView.findViewById(R.id.aboutslscrollview);
    ViewTreeObserver vto = view.getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            view.getViewTreeObserver().removeOnGlobalLayoutListener(this);

            int scrollViewHeightInPixels = view.getMeasuredHeight();

            //This is equal with %45 weight you tried before
            int height = (scrollViewHeightInPixels * 45) / 100;
            ViewGroup.LayoutParams pagerParams = viewPager.getLayoutParams();
            pagerParams.height = height;
        }
    });

Answer 1

As I commented before, your logic will not work properly, because giving vertical weight inside a ScrollView causes calculation problems.

So you should not use need any weight to resize your ViewPager content width.

If you have certain width/height ratio, resize it programmatically like below. Write these lines inside of onCreate(), after findViewById:

UPDATE You can get scrollView height like this :

viewPager = (ViewPager) rootView.findViewById(R.id.viewPager);

ViewTreeObserver vto = scrollView.getViewTreeObserver(); 
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
    @Override 
    public void onGlobalLayout() { 
   scrollView.getViewTreeObserver().removeOnGlobalLayoutListener(this);

        int scrollViewHeightInPixels = layout.getMeasuredHeight(); 

        //This is equal with %45 weight you tried before
        int height = (scrollViewHeightInPixels * 45) / 100;
        ViewGroup.LayoutParams pagerParams = viewPager.getLayoutParams();
        pagerParams.height = height;
    } 
});

Then remove unnecessary layouts and change your layout like below:

200 dp on viewPager height is for fixed height at start, wrap_content and match_parent sometimes causes problems

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <LinearLayout
                android:id="@+id/SliderDots"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@id/viewPager"
                android:layout_marginBottom="20dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal" />


        </RelativeLayout>


        <TextView
            android:id="@+id/aboutsltext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:text="Sri Lanka (formerly Ceylon) is an island nation south of India in the Indian Ocean. Its diverse landscapes range from rainforest and arid plains to highlands and sandy beaches. It’s famed for its ancient Buddhist ruins, including the 5th-century citadel Sigiriya, with its palace and frescoes. The city of Anuradhapura, Sri Lanka's ancient capital, has many ruins dating back more than 2,000 years. Sri Lanka (formerly Ceylon) is an island nation south of India in the Indian Ocean. Its diverse landscapes range from rainforest and arid plains to highlands and sandy beaches. It’s famed for its ancient Buddhist ruins, including the 5th-century citadel Sigiriya, with its palace and frescoes. The city of Anuradhapura, Sri Lanka's ancient capital, has many ruins dating back more than 2,000 years. "
            android:textColor="@color/colorPrimary"
            android:textSize="22sp" />

        <Button
            android:id="@+id/readmorebtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/readmorebtn"
            android:text="Read More"
            android:textAllCaps="false"
            android:textColor="@color/colorPrimary" />

    </LinearLayout>
</ScrollView>