Android - ScrollView and PercentRelativeLayout

Question

I have a problem with combining the android.support.percent.PercentRelativeLayout with ScrollView. The following xml file

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

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >
    <ImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="5%"
        app:layout_marginLeftPercent="5%"
        android:src="@drawable/o"
        android:id="@+id/imageView3" />
    <ImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="30%"
        app:layout_marginLeftPercent="5%"
        android:src="@drawable/o"
        android:layout_below="@+id/imageView3"
        android:layout_alignStart="@+id/imageView3"
        android:layout_marginTop="151dp" />
</android.support.percent.PercentRelativeLayout>

prints this

With RelativeLayout it works fine. Does anyone knows where is the problem? Thanks!

EDIT: If i set ScrollView height into 1000dp it also works fine but i want the height to be as mach as the elements

Answer 1

I want to learn how to use the percentage options for width height and margin so i can use them like in html, css. I want to set margin in % and not in dp same for width and height.

Believing that you can do all your layouts in Android in this fashion is going to get you into trouble. If you are learning UI layout in Android, the first step is to forget about everything you know regarding HTML layout. HTML is mainly about documents. A good mobile device UI shouldn't look like a document.

Let's take a really simple example: a button. Say you want to put a button in your layout. How big should it be? Well, it should be big enough to display the entire text of the button. It should also not take a lot of excessive space.

When you are designing your layouts, you have to keep in mind that you don't know how big the user's screen is going to be. So if you say, "I want to make my button width 20% of the screen", on some devices you may not have enough room to display the entire text of the button. On other screens, you may have a button with an embarrassing amount of space, where the text takes up very little of the actual button.

And as for margins, Google UI guidelines recommend grid spacing in 16dp units. So on a phone, a typical margin is going to be 16dp. On a tablet where you have more room, a 48dp margin is going to be more appropriate. Specifying margins with percentages will create packed layouts on small devices and wasted space on large layouts.

You have to understand three main sizing concepts:

1. Absolute measurement in density-independent pixels (dp). This is generally used for margins and padding.

2. match_parent. I want my component to take up the entire width/height of the parent component.

3. wrap_content. I want my component to take up only the width/height it needs to display appropriately, and no more. Generally this will only be used for width or height, but not both. Most widget sizing algorithms require at least one side to be a "known" size in order to determine how much space it needs in the other dimension.

You can do an incredible amount of UI layouts just using these three sizings. What's the best size for a button? On a phone, in portrait mode, android:width="match_parent" & android:height="wrap_content". Take the entire width of the phone, but restrict the height to just enough to show all the button text. Perfect.

Of course, eventually you will want to have a layout with two components side-by-side. Now what do you do? This is a good place to use a LinearLayout and use the android:layout_weight attribute to say: I want these two components to have the same width (i.e. 50% of the screen width).

And then you may end up trying to do a more complex layout for a larger device like a tablet. This is where PercentRelativeLayout might be most appropriate. PercentageRelativeLayout is a specialized container meant to handle some of the trickier layouts.

If you want a layout that has two vertical images and scrolls for smaller screens, this is what I would use:

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:src="@drawable/image1"
            android:adjustViewBounds="true" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/image2"
            android:adjustViewBounds="true" />
    </LinearLayout>
</ScrollView>

Two images in a scrolling container that are as wide as the device.

When it comes to ImageView, there is a trick to know about sizing. android:adjustViewBounds="true" means: since my height is "wrap_content" (i.e. flexible), make my height so that it retains the aspect ratio with the width.

I recommend that you go through the Android tutorials about UI layouts, and look at the sample projects to learn about how layouts are done in Android.

Dude, I get it. When I first learned Android layout, I was pretty mystified to see there wasn't a standard percentage-type sizing. But as I did more and more layouts in Android, I started to understand how component sizing worked and got better at it. Then I started to write custom components that implemented their own sizing algorithms, using the capabilities built into Android.

Just stick with it, it will all make sense after you've worked with layouts for awhile.