CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
User3
User3

Reputation: 2535

Android RelativeLayout, hiding views and pushing the views beneath up

I have a RelativeLayout which includes a Spinner and some RadioButtons, based on the selection of these I have to hide some views and make others visible. The problem is if I make the views GONE by view.setVisibility(View.GONE) the layout gets messed up, the views overlap, if I use view.Visibility(View.INVISIBLE) everything is fine but the missing views create a void on the page. I want to push the views beneath up to properly augment the page. Below is a better explanation:

enter image description here

enter image description here

So far the code I have is: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_app" >

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:isScrollContainer="true"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:scrollbarStyle="insideOverlay"
        android:scrollbars="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true" >

            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="60dp"
                android:background="@drawable/drop_down" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/spinner1"
                android:layout_below="@+id/textView5"
                android:layout_marginTop="30dp"
                android:text="xxx"
                android:textColor="#002f44"
                android:textSize="18sp" />

            <Button
                android:id="@+id/button2"
                android:layout_width="170dp"
                android:layout_height="30dp"
                android:layout_alignBaseline="@+id/textView1"
                android:layout_alignRight="@+id/spinner1"
                android:background="@drawable/btn_calendar"
                android:textColor="#FFBF00" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:visibility="invisible" />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_alignLeft="@+id/textView1"
                android:layout_below="@+id/textView1"
                android:layout_marginTop="20dp"
                android:scaleType="centerCrop" />

            <AutoCompleteTextView
                android:id="@+id/editText1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/spinner1"
                android:layout_alignTop="@+id/imageView1"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="5dp"
                android:layout_toRightOf="@+id/imageView1"
                android:ems="6"
                android:hint="xx xx"
                android:inputType="textPersonName"
                android:maxLength="25"
                android:textColor="#002f44" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/editText1"
                android:layout_below="@+id/editText1"
                android:padding="03dp"
                android:textColor="#610B0B" />

            <Button
                android:id="@+id/button1"
                android:layout_width="120dp"
                android:layout_height="50dp"
                android:layout_alignLeft="@+id/textView2"
                android:layout_below="@+id/textView2"
                android:background="@drawable/btn_addreminder"
                android:text="xxx"
                android:textColor="#002f44"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/spinner1"
                android:layout_below="@+id/spinner1"
                android:layout_marginTop="20dp"
                android:text="xxx "
                android:textColor="#002f44"
                android:textSize="18sp" />

            <RadioGroup
                android:id="@+id/radioGroup1"
                android:layout_width="180dp"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/spinner1"
                android:layout_alignTop="@+id/textView4"
                android:layout_marginTop="-5dp"
                android:background="@drawable/widget_style"
                android:orientation="horizontal" >

                <RadioButton
                    android:id="@+id/radio0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="xxx"
                    android:textColor="#002f44" />

                <RadioButton
                    android:id="@+id/radio1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="25dp"
                    android:text="xxx"
                    android:textColor="#002f44" />
            </RadioGroup>

            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/spinner1"
                android:layout_below="@+id/radioGroup1"
                android:layout_marginTop="25dp"
                android:text="xxx"
                android:textColor="#002f44"
                android:textSize="18sp" />

            <AutoCompleteTextView
                android:id="@+id/autoname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/textView5"
                android:layout_alignRight="@+id/spinner1"
                android:ellipsize="end"
                android:ems="8"
                android:hint="xx xx"
                android:maxLines="1"
                android:scrollHorizontally="true"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#002f44" >
            </AutoCompleteTextView>

            <Button
                android:id="@+id/button4"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:layout_alignLeft="@+id/imageView1"
                android:layout_below="@+id/button1"
                android:layout_marginLeft="05dp"
                android:layout_marginTop="66dp"
                android:background="@drawable/btn_addreminder"
                android:text="xxx"
                android:textColor="#002f44"
                android:textStyle="bold" />

            <Button
                android:id="@+id/Button01"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:background="@drawable/btn_addreminder"
                android:text="xxx"
                android:textColor="#002f44"
                android:textStyle="bold" />

            <Button
                android:id="@+id/Button02"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/button4"
                android:layout_alignBottom="@+id/button4"
                android:layout_alignRight="@+id/editText1"
                android:background="@drawable/btn_addreminder"
                android:text="xxx"
                android:textColor="#002f44"
                android:textStyle="bold" />
        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

Upvotes: 3

Views: 4450

Answers (3)

Onik
Onik

Reputation: 19959

I would recommend to create a view of height 1dp with transparent background below texView4 and then set android:layout_below="@id/view" attribute for textView5. Here is how the changes to the layout would look like:

</RadioGroup> <!-- RadioGroup ends -->

<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_below="@id/textView4"
    android:background="@color/transparent"/>

<!-- Changed layout_below attribute value -->
<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/spinner1"
    android:layout_below="@id/view"
    android:layout_marginTop="25dp"
    android:text="xxx"
    android:textColor="#002f44"
    android:textSize="18sp" />

And here is how the layout looks like with textView4 and RadioGroup gone:

enter image description here

Upvotes: 1

Yoric
Yoric

Reputation: 508

You should use alignWithParentIfMissing attribute.

I've reworked your layout, try it 

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

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:isScrollContainer="true"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:scrollbarStyle="insideOverlay"
        android:scrollbars="vertical" >

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

            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="60dp" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:paddingLeft="20dp"
                android:paddingRight="20dp" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/textView5"
                    android:layout_marginTop="30dp"
                    android:text="xxx"
                    android:textColor="#002f44"
                    android:textSize="18sp" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="170dp"
                    android:layout_height="30dp"
                    android:layout_alignBaseline="@+id/textView1"
                    android:layout_alignParentRight="true"
                    android:textColor="#FFBF00" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:visibility="invisible" />

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:layout_alignLeft="@+id/textView1"
                    android:layout_below="@+id/textView1"
                    android:layout_marginTop="20dp"
                    android:scaleType="centerCrop" />

                <AutoCompleteTextView
                    android:id="@+id/editText1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignTop="@+id/imageView1"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="5dp"
                    android:layout_toRightOf="@+id/imageView1"
                    android:ems="6"
                    android:hint="xx xx"
                    android:inputType="textPersonName"
                    android:maxLength="25"
                    android:textColor="#002f44" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/editText1"
                    android:layout_below="@+id/editText1"
                    android:padding="03dp"
                    android:textColor="#610B0B" />

                <Button
                    android:id="@+id/button1"
                    android:layout_width="120dp"
                    android:layout_height="50dp"
                    android:layout_alignLeft="@+id/textView2"
                    android:layout_below="@+id/textView2"
                    android:text="xxx"
                    android:textColor="#002f44"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="20dp"
                    android:text="xxx "
                    android:textColor="#002f44"
                    android:textSize="18sp" />

                <RadioGroup
                    android:id="@+id/radioGroup1"
                    android:layout_width="180dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignTop="@+id/textView4"
                    android:layout_marginTop="-5dp"
                    android:orientation="horizontal" >

                    <RadioButton
                        android:id="@+id/radio0"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:text="xxx"
                        android:textColor="#002f44" />

                    <RadioButton
                        android:id="@+id/radio1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="25dp"
                        android:text="xxx"
                        android:textColor="#002f44" />
                </RadioGroup>

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/radioGroup1"
                    android:layout_marginTop="25dp"
                    android:text="xxx"
                    android:textColor="#002f44"
                    android:textSize="18sp" />

                <AutoCompleteTextView
                    android:id="@+id/autoname"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBaseline="@+id/textView5"
                    android:layout_alignParentRight="true"
                    android:ellipsize="end"
                    android:ems="8"
                    android:hint="xx xx"
                    android:maxLines="1"
                    android:scrollHorizontally="true"
                    android:singleLine="true"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#002f44" >
                </AutoCompleteTextView>

                <Button
                    android:id="@+id/button4"
                    android:layout_width="100dp"
                    android:layout_height="40dp"
                    android:layout_alignLeft="@+id/imageView1"
                    android:layout_below="@+id/button1"
                    android:layout_marginLeft="05dp"
                    android:layout_marginTop="66dp"
                    android:text="xxx"
                    android:textColor="#002f44"
                    android:textStyle="bold" />

                <Button
                    android:id="@+id/Button01"
                    android:layout_width="100dp"
                    android:layout_height="40dp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:text="xxx"
                    android:textColor="#002f44"
                    android:textStyle="bold" />

                <Button
                    android:id="@+id/Button02"
                    android:layout_width="100dp"
                    android:layout_height="40dp"
                    android:layout_alignBaseline="@+id/button4"
                    android:layout_alignBottom="@+id/button4"
                    android:layout_alignRight="@+id/editText1"
                    android:text="xxx"
                    android:textColor="#002f44"
                    android:textStyle="bold" />
            </RelativeLayout>
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

Upvotes: 4

Kaustuv
Kaustuv

Reputation: 821

Use LinearLayout(vertical) inside ScrollView and create RelativeLayouts as child of this LinearLayout. Set height of these RelativeLayout as wrap content, so that as you set visibility of items as GONE its height will shrink.

Now as per image that you have given here, you can have spinner first then below that a relative layout which will contain two (horizontal) items that you wanna hide. then next two (horizontal) items in another layout and then your image, editText and Button in third layout. So you hide any relative layout others will arrange properly.

Upvotes: 1

Related Questions