PercentRelativeLayout not taking height and margin top/bottom related attributes in percentage

Question

I am using percent relative layout to defined the layout of a card view. It works fine when defining width and horizontal margin attributes. However, defining height and margin top/bottom in percentages has no effect on the layout. Here is the xml of my card layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="10dp"
    app:cardBackgroundColor="@color/cardview_light_background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/exam_card">
    <android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:textStyle="bold"
            android:textColor="@color/colorPrimaryDark"
            app:layout_widthPercent="60%"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:id="@+id/exam_name"/>
        <TextView
            app:layout_marginLeftPercent="58.5%"
            app:layout_marginStartPercent="58.5%"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold"
            app:layout_widthPercent="20%"
            android:id="@+id/from_test_date"
            android:layout_height="wrap_content"
            android:textSize="28sp"
            />
        <TextView
            app:layout_widthPercent="20%"
            app:layout_marginLeftPercent="56%"
            app:layout_marginStartPercent="56%"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold"
            android:layout_below="@+id/from_test_date"
            android:id="@+id/from_time_year"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            />
        <View
            app:layout_marginLeftPercent="73%"
            app:layout_marginRightPercent="24%"
            android:id="@+id/divider"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:background="@color/colorPrimaryDark"/>
        <TextView
            app:layout_marginLeftPercent="79.5%"
            app:layout_marginStartPercent="79.5%"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold"
            app:layout_widthPercent="20%"
            android:id="@+id/to_test_date"
            android:layout_height="wrap_content"
            android:textSize="28sp"
            />
        <TextView
            app:layout_marginLeftPercent="77%"
            app:layout_marginStartPercent="77%"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold"
            android:layout_below="@+id/to_test_date"
            app:layout_widthPercent="20%"
            android:id="@+id/to_time_year"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            />
    </android.support.percent.PercentRelativeLayout>

</android.support.v7.widget.CardView>

http://www.pushinteractions.com/2015/11/percentage-based-margin-size-android-app-development/ — Surya Prakash Kushawah, Dec 02 '16 at 11:57
been through this link already. The problem is app:layout_marginBottomPercent="10%" and even if i set a heightpercent alongside height in dp anywhere, that particular textview is nowhere even visible. I even upgraded the entire project to sdk-version 25 to use parent library 25.0.1, but that didn't solve the problem. — sanket pahuja, Dec 02 '16 at 12:27

score 0 · Answer 1 · answered Dec 07 '16 at 12:53

0

So I don't think there is any explanation to why this is happening. But I found a work around which might help someone having similar issues.

So the percent relative layout works fine for widthPercentage. However, you can't couple it along with margin Start/Left percent or margin End/Right percent, both(or all 4) of which work fine together as well.

So for layouts where you have to define the height/margin in similar sense as well, you can create a linear layout with vertical orientation within the PercentRelativeLayout, specify it's widthPercent/marginPercent, set height to 0dp and use the weight attribute for elements within the linear layout.

I primarily used this in a card view and the elements take only a certain part of the screen regardless of the screen size or orientation.

answered Dec 07 '16 at 12:53

sanket pahuja

325
2
12

To clarify, there is a good reason this is happening, PercentRelativeLayouts get their dimensions computed at runtime, so when you first load a layout, the PercentRelativeLayout has a height of 0, couple that with height being match_parent and you get a height of 0. – Trevor Hart Jul 17 '17 at 19:52
By that logic, shouldn't I be facing the same issue with the width aspect? – sanket pahuja Jul 19 '17 at 07:09
1

No, when you use 'android:layout_height="wrap_content"' that means that the dimensions are computed at runtime, whereas 'android:layout_width="match_parent"' actually has a set height when the layout first loads, since the percentRelativeLayouts parent has a width of match parent, it just matches that width, and everything within the percentRelativeLayout then bases it's width off the percentage of that width. – Trevor Hart Jul 19 '17 at 22:12

PercentRelativeLayout not taking height and margin top/bottom related attributes in percentage

1 Answers1