ScrollView starts from tabbar, but needs to scroll from top of the layout

Question

I have an issue over Scroll bar in my layout. My layout contains a scrollbar which contains two layouts. The first layout has static height. And the second latout contains tabHost for tabgroup. Second layout also contains Expandable Gridview.

The issue is, when I load my layout, It shows Tabbar directly and hides the first layout . We can scroll But initially I need to show the top layout instead of tabHost . Can anyone help me to slove this issue?

Thanks in Advance...

I have added my code snippet from xml file.

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/header"
    android:fillViewport="true" >

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

        <RelativeLayout
            android:id="@+id/relay1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="true" >

            <include
                android:id="@+id/cover"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                layout="@layout/coverphoto" />

            <ImageView
                android:id="@+id/ximg_logo"
                android:layout_width="70dip"
                android:layout_height="70dip"
                android:layout_below="@+id/cover"
                android:layout_marginLeft="16dip"
                android:layout_marginTop="-42dip" />

            <TextView
                android:id="@+id/xtxt_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/ximg_logo"
                android:layout_marginLeft="5dip"
                android:layout_toRightOf="@+id/ximg_logo"
                android:ellipsize="end"
                android:ems="5"
                android:singleLine="true"
                android:textColor="@color/sixty_black"
                android:textSize="20sp" >

                <requestFocus />
            </TextView>

            <Button
                android:id="@+id/xbtn_follow"
                style="@style/follow_button_normal"
                android:layout_width="95dip"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/cover"
                android:layout_marginRight="7dip"
                android:background="@drawable/buttons_shape_fill_orange"
                android:text="@string/str_follow" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/cover"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:background="@color/fifty_black"
                android:orientation="vertical"
                android:paddingLeft="3dip"
                android:paddingRight="3dip"
                android:weightSum="3" >

                <RelativeLayout
                    android:id="@+id/xlay_following"
                    android:layout_width="match_parent"
                    android:layout_height="0dip"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="10dip"
                    android:layout_weight="1"
                    android:onClick="following" >

                    <TextView
                        android:id="@+id/xtxt_imfollowing"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentTop="true"
                        android:layout_centerHorizontal="true"
                        android:textColor="@color/white"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/xtxt_imfollowing_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/xtxt_imfollowing"
                        android:layout_centerHorizontal="true"
                        android:padding="5dip"
                        android:text="@string/str_im_following"
                        android:textColor="@color/white"
                        android:textSize="14sp" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/xlay_follower"
                    android:layout_width="match_parent"
                    android:layout_height="0dip"
                    android:layout_weight="1"
                    android:onClick="follower" >

                    <TextView
                        android:id="@+id/xtxt_myfollower"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dip"
                        android:textColor="@color/white"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/xtxt_myfollowers_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/xtxt_myfollower"
                        android:layout_centerHorizontal="true"
                        android:padding="5dip"
                        android:text="@string/str_myfollowers"
                        android:textColor="@color/white"
                        android:textSize="14sp" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/xlay_interests"
                    android:layout_width="match_parent"
                    android:layout_height="0dip"
                    android:layout_alignParentBottom="true"
                    android:layout_below="@+id/xlay_follower"
                    android:layout_centerHorizontal="true"
                    android:layout_weight="1" >

                    <TextView
                        android:id="@+id/xtxt_interests"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dip"
                        android:textColor="@color/white"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/xtxt_interests_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/xtxt_interests"
                        android:layout_centerHorizontal="true"
                        android:paddingBottom="5dip"
                        android:text="@string/str_interest"
                        android:textColor="@color/white"
                        android:textSize="14sp" />
                </RelativeLayout>
            </LinearLayout>

            <RelativeLayout
                android:id="@+id/xrl_msg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:background="@color/fifty_black"
                android:padding="10dip" >

                <ImageView
                    android:id="@+id/ximg_message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:src="@drawable/ic_msg" />
            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relay2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/relay1"
            android:layout_marginTop="10dip" >

            <TabHost
                android:id="@android:id/tabhost"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

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

                    <TabWidget
                        android:id="@android:id/tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="20dip" >
                    </TabWidget>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="1dip"
                        android:background="@color/orange" />

                    <FrameLayout
                        android:id="@android:id/tabcontent"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" >

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

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

                        <LinearLayout
                            android:id="@+id/tab3"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical" >
                        </LinearLayout>
                    </FrameLayout>
                </LinearLayout>
            </TabHost>
        </RelativeLayout>
    </RelativeLayout>
</ScrollView>

Answer 1

Of course, the RelativeLayout rl1 overlaps with rl2. They're both match_parent on layout_width. You need to align both layouts with left/right or top/bottom using android:layout_alignParentTop or android:layout_alignParentLeft="true" . However you cannot use it for RelativeLayout. It is used for the UI elements inside RelativeLayout or LinearLayout.

Since you did not post the full layout file with your tab elements or any UI, I cannot give you any xml example.

Answer 2

I have a similar issue and one way that works for my layout is to change the height and visibility like below (using your layout schema as a good example):

<RelativeLayout
    android:id="@+id/relay1"
    android:layout_width="match_parent"
    android:focusable="true"

    android:layout_height="0dp"
    android:visibility="gone"
    >

Notice the android:layout_height and visibility . Of course I know you don't want your first layout to be absolutely hidden always. But this is the idea, and you can do the same with your second layout relay2.

Here's a sample code to hide/show a layout, dynamically. Object relayLayout is your relay1 view.

if "hide the layout" {
  relayLayout.setVisibility(LinearLayout.GONE);
}
else {
  relayLayout.setVisibility(LinearLayout.VISIBLE);
}

Notice setVisibility and the valid constants.

Now, sample code to set the height of a view. This may be the only code you need and may actually work better.

ViewGroup.LayoutParams layoutParams = relayLayout.getLayoutParams();
layoutParams.height = 0;
relayLayout.setLayoutParams(layoutParams);

Notice ViewGroup.LayoutParams and height attribute, mainly. In this code, the layout will be hidden and the second layout should rise to the top.

Answer 3

Another solution and possibly the best is the Google's answer to show/hide 2 different layouts. In your layout file, I see 2 very different layout designs and so this is applicable in your case. One webpage stating this is Building a Dynamic UI with Fragments . It's good reading.

Here's a sample code, making this idea work:

// Create new fragment and transaction
Fragment newFragment = new ExampleFragment();
FragmentTransaction transaction = getFragmentManager().beginTransaction();

// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);

// Commit the transaction
transaction.commit();

The sample code is from Fragments .

One advantage of this code and layout design is that your 2 layouts are separated in 2 files, at least, and forces separation for future code changes. Have fun with this :-) Tommy Kwee.