Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: RelativeLayout in ScrollView

I have a RelativeLayout with multiple ImageViews and when I turn around the screen, the ImageViews become disordered. So I decided to wrap it into a ScrollView. But the ScrollView doesn't work!

Can any one help me with that? I know that the right way is to design a GridView or ListView, but since I had some questions and no one answered me, I decided to go this way.

Here is my xml code :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="none" >

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

    <Button
        android:id="@+id/continuePizza"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="continue" />

    <Button
        android:id="@+id/finishP"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/continuePizza"
        android:layout_alignParentLeft="true"
        android:text="finish" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="16dp"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imageView1"
        android:layout_marginLeft="18dp"
        android:layout_toRightOf="@+id/imageView1"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_marginTop="18dp"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imageView3"
        android:layout_centerVertical="true"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imageView3"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView5"
        android:layout_marginTop="17dp"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imageView2"
        android:layout_alignTop="@+id/imageView5"
        android:layout_marginLeft="10dp"
        android:src="@drawable/download" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imageView7"
        android:layout_alignTop="@+id/imageView3"
        android:src="@drawable/download" />

</RelativeLayout>
</ScrollView>
like image 554
eng.m.a Avatar asked Sep 07 '13 20:09

eng.m.a


3 Answers

Simple Solution, just add android:fillViewport="true" to Scrollview like :

<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

<RelativeLayout ....... />

</ScrollView>
like image 84
Divyang Panchal Avatar answered Oct 13 '22 20:10

Divyang Panchal


I experienced same problem with Relative Layout within Scroll View to overcome this i wrapped around my relative layout with a linear layout , try like this and also remove orientation from relative layout

<?xml version="1.0" encoding="utf-8"?>


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

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


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


<Button
    android:id="@+id/continuePizza"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:text="continue" />

<Button
    android:id="@+id/finishP"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/continuePizza"
    android:layout_alignParentLeft="true"
    android:text="finish" />

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="16dp"
    android:src="@drawable/download" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView1"
    android:layout_marginLeft="18dp"
    android:layout_toRightOf="@+id/imageView1"
    android:src="@drawable/download" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageView1"
    android:layout_marginTop="18dp"
    android:src="@drawable/download" />

<ImageView
    android:id="@+id/imageView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView3"
    android:layout_centerVertical="true"
    android:src="@drawable/download" />

<ImageView
    android:id="@+id/imageView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView3"
    android:src="@drawable/download" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageView5"
    android:layout_marginTop="17dp"
    android:src="@drawable/download" />

<ImageView
    android:id="@+id/imageView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView2"
    android:layout_alignTop="@+id/imageView5"
    android:layout_marginLeft="10dp"
    android:src="@drawable/download" />
<ImageView
    android:id="@+id/imageView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView7"
    android:layout_alignTop="@+id/imageView3"
    android:src="@drawable/download" />

</RelativeLayout>
</LinearLayout>
</ScrollView>
like image 28
Ravi Avatar answered Oct 13 '22 18:10

Ravi


When you use the ScrollView, you should know that you only can scroll when height of ScrollView smaller than height of ScrollView's child.
To solve this problem, you can define the Height of LinearLayout to match_parent, which is the only child of ScrollView. Then define the Height of ScrollView in the Java code, like scrollView.getChildAt(0).getHeight() - 1; to make sure the height of ScrollView smaller than height of ScrollView's child.
For your own answer, it's not a good way to use magic numbers in your code, like 427dp and 548dp.

like image 43
Daniel Mi Avatar answered Oct 13 '22 20:10

Daniel Mi