PercentRelativeLayout inside ScrollView

Question

I have created a layout using a ScrollView which has a PercentRelativeLayout as its child. It doesn't work on Lollipop and older devices but works fine on Marshmallow devices. Please check the code below:

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <android.support.percent.PercentRelativeLayout
        android:id="@+id/scrollContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_heightPercent="100%"
        app:layout_widthPercent="50%">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_dark"
            android:text="kkjknadko"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView1"
            android:text="Abcaad"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview2"
            android:background="@android:color/holo_red_dark"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview3"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview4"
            android:background="@android:color/holo_red_dark"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview5"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview6"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview7"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

    </android.support.percent.PercentRelativeLayout>
</ScrollView>

And also I android:fillViewport="true", it doesn't show anything in Lollipop and older Android versions.

Unfortunately, the percent layout won't work with ScrollView before M. The reason for that is that they depend on the size hint being delivered in the measuring step. Before M most layouts would provide size hint 0 when sending unspecified measure spec.

You can try to fix that by creating your own subclass of ScrollView and overriding measureChild and measureChildWithMargins (fortunately both are protected) to provide the size hint.

source - plus.google.com.

Can someone help me with creating custom ScrollView to make it work?

Answer 1

Create one custom scrollview and set Measured Height and Width as you want to it for Example

CustomScrollView

public class CustomScrollView extends ScrollView {


    public CustomScrollView(Context context) {
        super(context);
    }

    public CustomScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int size = 0;
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        if (width > height) {
            size = height;
        } else {
            size = width;
        }
        setMeasuredDimension(size, size);
    }
}

Use customscrollview in your xml.

    <yourscrollviewclasspath.CustomScrollView           // here you have scrollview path like com.yourpackage.folder_where_your_scrollview_lies
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        >
</yourscrollviewclasspath.CustomScrollView >

hope this will help.

Answer 2

The question as I understand it is: I want these TextViews to be 50% width of parent view.

Way that works for me is:

<Space
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/space" />

Then allign the View(s) to that. Either the RelativeLayout or the TextViews. You lose the control (if you ever had it) over the percentage of the RelativeLayout. I tend to go with things like:

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"

Does this help?

Answer 3

Add one Layout after ScrollView because ScrollView can only function with one child layouts.

<?xml version="1.0" encoding="utf-8" ?>
<ScrollView
    android:id="@+id/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:fillViewport="true">


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

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/scrollContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_heightPercent="100%"
            app:layout_widthPercent="50%">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/holo_red_dark"
                android:text="kkjknadko"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView1"
                android:text="Abcaad"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView2"
                android:background="@android:color/holo_red_dark"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview3"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview4"
                android:background="@android:color/holo_red_dark"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview5"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview6"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview7"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

        </android.support.percent.PercentRelativeLayout>

    </LinearLayout>

</ScrollView>

Answer 4

I encountered the same problem with android K and android L.

You could have used constraint layout instead of percent relative layout but there seems scrolling problem with that too. Even custom Scroll View as suggested in other answers wasn't helpful for me.

Though there's a way.

Convert your percent relative layout to relative layout and set the height of the views programmatically according to your device height.

There seems no problem in scrolling with relative layout. And you can use 'Space' view for margin between TextViews. This is not a very elegant solution but for me it worked.

Java Code:

int height = getWindowManager().getDefaultDisplay().getHeight();
int width = getWindowManager().getDefaultDisplay().getWidth();

// to set height to each textview to 10% of screen
textView1.getLayoutParams().height = (int) (height * 0.10);
textView2.getLayoutParams().height = (int) (height * 0.10);
textView3.getLayoutParams().height = (int) (height * 0.10);
textView4.getLayoutParams().height = (int) (height * 0.10);
textView5.getLayoutParams().height = (int) (height * 0.10);
textView6.getLayoutParams().height = (int) (height * 0.10);

// to set width to each textview to 50% of screen
textView1.getLayoutParams().width = (int) (width * 0.50);
textView2.getLayoutParams().width = (int) (width * 0.50);
textView3.getLayoutParams().width = (int) (width * 0.50);
textView4.getLayoutParams().width = (int) (width * 0.50);
textView5.getLayoutParams().width = (int) (width * 0.50);
textView6.getLayoutParams().width = (int) (width * 0.50);

// for margin between textviews
space1.getLayoutParams().height = (int) (height * 0.10);
space2.getLayoutParams().height = (int) (height * 0.10);
space3.getLayoutParams().height = (int) (height * 0.10);
space4.getLayoutParams().height = (int) (height * 0.10);
space5.getLayoutParams().height = (int) (height * 0.10);

XML Code:

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">

<RelativeLayout
    android:id="@+id/scrollContent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_dark"
        android:text="kkjknadko"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space1"
        android:layout_below="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space1"
        android:text="Abcaad"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space2"
        android:layout_below="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space2"
        android:background="@android:color/holo_red_dark"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space3"
        android:layout_below="@+id/textView3"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space3"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space4"
        android:layout_below="@+id/textView4"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space4"
        android:background="@android:color/holo_red_dark"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space5"
        android:layout_below="@+id/textview5"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

    <TextView
        android:id="@+id/textview6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space5"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

</RelativeLayout>