Search code examples
androidandroid-layoutscrollviewandroid-scrollview

Is it possible to make the first view in ScrollView match dimensions to screen?


I was able to this somehow using RecyclerView. When I create a view for a specific item in my RecyclerView, the recyclerview item layout is matched to parent.

I am wondering if this is also possible using ScrollView?

Here's what I did so far:

ScrollView xml:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scrollview_homescreen"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <include layout="@layout/listitem_comic_menu"/>

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

        </LinearLayout>

    </LinearLayout>

</ScrollView>

Content:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout_homescreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageview_menu_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:adjustViewBounds="true" />

    <ImageView
        android:id="@+id/imageview_menu_title_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/starwars_webtoon_home_1_logo"
        android:scaleType="fitXY"
        android:adjustViewBounds="true" />

    <Button
        android:id="@+id/button_start_reading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/button_menu"
        android:layout_marginBottom="18dp"
        android:text="@string/button_start_reading"
        android:gravity="start"
        android:drawableRight="@drawable/ic_keyboard_arrow_right_black_24dp"
        android:drawableEnd="@drawable/ic_keyboard_arrow_right_black_24dp"
        android:background="@drawable/button_bg"
        android:textSize="18sp"
        android:layout_marginStart="12dp"
        android:layout_marginLeft="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginRight="12dp" />

    <Button
        android:id="@id/button_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="28dp"
        android:text="@string/button_menu"
        android:textSize="18sp"
        android:textColor="#FFFFFF"
        android:drawableLeft="@drawable/ic_menu_white_24dp"
        android:drawableStart="@drawable/ic_menu_white_24dp"
        android:background="?android:attr/selectableItemBackground" />

</RelativeLayout>

So what am I trying to do? Basically this is for comic listing. The first item should be the homescreen, a couple of button here and there and the entire application logo. The next item should show the listings (I have 40 items of the same width and height) and a footer.

I need my homescreen to match the parent which is the screen. So when I scroll the topmost part, the first item (the first view, which is the homescreen) fills the entire devices screen.

I was able to to do this on RecyclerView and looks nice. I have encountered some of problems that plague me which I have to fix extensively to the point that I am hacking through the system and I realize RecyclerView is not really the best layout for this kind of case. I am currently deciding whether to switch to ScrollView and dynamically/statically add the comic items. But, the homescreen, which is the first View is not matching the screen device.

I would just like to ask if this possible at all to do in ScrollView?

Thanks!


Solution

  • Use weight attribute:

    <LinearLayout
      android:id="@+id/linearlayout_homescreen"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:orientation="vertical">
    
            <include layout="@layout/listitem_comic_menu"/>
    
            <LinearLayout
                android:id="@+id/linearlayout_comic_listings"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
    
            </LinearLayout>
    
    </LinearLayout>