Kinda circular dependency in RelativeLayout with embedded ScrollView

Question

Basically, an Activity should display on screen:
1. A logo on top. Must always be displayed. Must center both vertically and horizontally, when choices leaves extra space on screen.
2. A ScrollView at bottom. Hosts vertical LinearLayout, which in turn hosts a set of choices a user can choose from. Must take minimal space necessary to display all choices (So logo is vertically centered). Can take up up to (Screen - Logo) space on screen. Choices are added programmatically.

Now, I have defined it in layout as:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:padding="5dp"
            android:src="@drawable/logo" />

        <ScrollView
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_below="@id/imageView"
            >

            <LinearLayout
                android:id="@+id/ChoicesPanel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >
            </LinearLayout>
        </ScrollView>
    </RelativeLayout>

If ImageView is layed out using layout_above=scrollView, ScrollView is layed out before, NOT taking into consideration minimum size of ImageView.
If ScrollView is layed out using layout_below=ImageView, ImageView just stays on top. When there are only 2-3 choices, screen looks pretty ugly.

Is there a way I can satisfy the constraints? Or should I define two different layout xml files, and switch to the correct one programmatically?

Get rid of the `ScrollView`. If "all choices" must be visible, there is nothing to scroll. — CommonsWare, Apr 18 '12 at 20:01
Cannot get rid of ScrollView. I did not state that all choices must be displayed immediately. If it can fit on the screen, then ScrollView must take as little space as possible, centering ImageView. Else, ScrollView must take up to (ParentContainer - ImageView) height on screen. — Mirbek Samiev, Apr 18 '12 at 21:22

score 0 · Answer 1 · answered Apr 18 '12 at 19:06

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:padding="5dp"
        android:src="@drawable/ic_launcher" />


    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView" >

        <LinearLayout
            android:id="@+id/ChoicesPanel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_1"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_2"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_2"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_3"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_3"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_4"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_4"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_5"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_5"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_6"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_6"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_2"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_2"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_3"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_3"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_4"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_4"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_5"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_5"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_text_6"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scroll_view_1_button_6"/>


        </LinearLayout>
    </ScrollView>
</RelativeLayout>

this seems to work for me. its like 14 items in the scrollview

Well, logo simply stays on top, even when there is just one button to display, doesn't it? — Mirbek Samiev, Apr 18 '12 at 19:25
yes. i took out all but one and it still stays there. to make it center itself AFTER nothing is there u have to javacode. — blakspryte, Apr 18 '12 at 20:21
Probably javacode is true %P. I did a `View.post(Runnable task)`, that checks ScrollView and it's immediate LinearLayout child heights, switches to alternate layout if necessary. Still open to suggestions to get rid of ugly workaround. — Mirbek Samiev, Apr 18 '12 at 21:26

score 0 · Answer 2 · answered Apr 19 '12 at 18:29

public class TestActivity extends Activity {

private RelativeLayout mRelativeLayout;
private RelativeLayout mRelativeLayout2;
private ImageView mImageView;
private ScrollView mScrollView;
private TextView TV1;
private TextView TV2;
private TextView TV3;
private TextView TV4;
private Button B1;
private Button B2;
private Button B3;
private Button B4;
private RelativeLayout.LayoutParams lp;


public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

mRelativeLayout = new RelativeLayout(this);
    setContentView(mRelativeLayout);

mImageView = new ImageView(this);
mImageView.setId(1);
RelativeLayout.LayoutParams lp = new      RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
mImageView.setImageResource(R.drawable.ic_launcher);
mRelativeLayout.addView(mImageView, lp);

mScrollView = new ScrollView(this);
RelativeLayout.LayoutParams lp2 = new     RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
lp2.addRule(RelativeLayout.BELOW, mImageView.getId());
mRelativeLayout.addView(mScrollView, lp2);

mRelativeLayout2 = new RelativeLayout(this);
int itemcounts = mRelativeLayout2.getChildCount();
mScrollView.addView(mRelativeLayout2);

TV1 = new TextView(this);
TV1.setId(2);
TV1.setTextSize(20);
TV1.setText("Im a Text View. The First");
mRelativeLayout2.addView(TV1);

B1 = new Button(this);
B1.setId(3);
RelativeLayout.LayoutParams bl1 = new     RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
bl1.addRule(RelativeLayout.BELOW, TV1.getId());
B1.setText("Im a Button. The First");
B1.setTextSize(25);
mRelativeLayout2.addView(B1, bl1);

TV2 = new TextView(this);
RelativeLayout.LayoutParams tvl2 = new     RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
tvl2.addRule(RelativeLayout.BELOW, B1.getId());
TV2.setId(4);
TV2.setTextSize(20);
TV2.setText("Im a Text View. The Second");
mRelativeLayout2.addView(TV2, tvl2);

B2 = new Button(this);
B2.setId(5);
RelativeLayout.LayoutParams bl2 = new     RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
bl2.addRule(RelativeLayout.BELOW, TV2.getI());
B2.setText("Im a Button. The Second");
B2.setTextSize(25);
mRelativeLayout2.addView(B2, bl2);

TV3 = new TextView(this);
TV3.setId(6);
RelativeLayout.LayoutParams tvl3 = new      RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
tvl3.addRule(RelativeLayout.BELOW, B2.getId());
TV3.setTextSize(20);
TV3.setText("Im a Text View. The Third");
mRelativeLayout2.addView(TV3, tvl3);

B3 = new Button(this);
B3.setId(7); 
RelativeLayout.LayoutParams bl3 = new     RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
bl3.addRule(RelativeLayout.BELOW, TV3.getId());
B3.setText("Im a Button. The Third");
B3.setTextSize(25);
mRelativeLayout2.addView(B3, bl3);

TV4 = new TextView(this);
TV4.setId(8);
RelativeLayout.LayoutParams tvl4 = new     RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
tvl4.addRule(RelativeLayout.BELOW, B3.getId());
TV4.setTextSize(20);
TV4.setText("Im a Text View. The Fourth");
mRelativeLayout2.addView(TV4, tvl4);


if (itemcounts < 4) {
    lp = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
    lp.addRule(RelativeLayout.CENTER_IN_PARENT);
}
if (itemcounts > 4) {
    lp = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
}

}
}

try this

`if (itemCounts < 4)` :). Nice try. It is better to rely on actual sizes after layout is complete. Actual sizes are available when running a `Runnable` task that is posted on root layout. Task is executed after all other tasks in queue complete, i.e. images loaded, all views properly layed out and sized, etc. — Mirbek Samiev, Apr 20 '12 at 06:04
try to measure the views outside of the `super.onCreate()` method [learn how to here](http://stackoverflow.com/questions/2159320/how-to-size-an-android-view-based-on-its-parents-dimensions) then apply a case statement — blakspryte, Apr 20 '12 at 13:24

Kinda circular dependency in RelativeLayout with embedded ScrollView

2 Answers2