How to set scroll view which expands due to background image on different devices?

Question

In my app I have the main layout, having the linear layout as parent and child is scroll view and inside this scroll view, I have another linear layout.

Example would be

LinearLayout->

ScrollView->

LinearLayout-> (Setting Background Image here)

So if the background is very high resolution it will expand a lot, so I have resized the background so it could work on most devices as expansion is reduced but still in devices with different screen sizes has a lot of differences in sizes. So the issue still persists, what is the proper way to handle this?

What screen looks like with background image with resolution (729*1296) Background Image(729*1296)

After resizing background image with resolution (400*711) and running on the xxhdpi device it looks like this. Background image(400*711)

So now I have a little scroll available. Which is good but applying on different devices can be tricky and there is a difference in layout sizes.

What I want on all devices is to look like this. Background Image(What i want)

Without any resize of background image I want my layout to look like this in all devices, only 3 inner layouts (pics, audios, videos) should be visible rest should be scrolled.

This is the layout XML file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".StartActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_weight="1"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/pg5"
            android:orientation="vertical"
            android:weightSum="5"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp">

            <LinearLayout
                android:id="@+id/gb_text"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2.55"
                android:gravity="center|top"
                android:orientation="vertical"
                android:weightSum="3">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1.2"
                    android:orientation="vertical">  
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal"
                        android:weightSum="3">

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="0.5"
                            android:orientation="horizontal"></LinearLayout>

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="2"
                            android:gravity="center|top"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:gravity="center|top"
                                android:orientation="vertical">

                                <TextView
                                    android:id="@+id/textView"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Duplicate Files Remover"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/DuplicateFileRemovertext" />
                            </LinearLayout>

                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="0.5"
                            android:orientation="horizontal"></LinearLayout>
                    </LinearLayout>
                </LinearLayout>

                <com.intrusoft.sectionedrecyclerviewapp.CircularProgressBar
                    android:id="@+id/circularProgress"
                    android:layout_width="@dimen/circularprogresswidth"
                    android:layout_height="@dimen/circularprogressheight"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="@dimen/circularprogresstopmargin" />

                <TextView
                    android:id="@+id/gb_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:gravity="center"
                    android:text="TextView"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/totalavailablesize" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2.45"
                android:orientation="vertical"
                android:weightSum="5">

                <LinearLayout
                    android:id="@+id/scanimages_layout"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_margin="3dp"
                    android:layout_weight="1"
                    android:weightSum="2">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        app:cardCornerRadius="12dp">

                        <LinearLayout
                            android:id="@+id/piccardlayout"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@color/bluelayout"
                            android:orientation="horizontal"
                            android:weightSum="2">

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="0.5"
                                android:orientation="horizontal"
                                android:paddingLeft="8dp">

                                <com.makeramen.roundedimageview.RoundedImageView
                                    android:id="@+id/imageView2"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_alignParentStart="true"
                                    android:layout_alignParentLeft="true"
                                    android:layout_alignParentTop="true"
                                    android:layout_alignParentEnd="true"
                                    android:layout_alignParentRight="true"
                                    android:layout_alignParentBottom="true"
                                    android:layout_marginStart="0dp"
                                    android:layout_marginLeft="0dp"
                                    android:layout_marginTop="0dp"
                                    android:layout_marginEnd="0dp"
                                    android:layout_marginRight="0dp"
                                    android:layout_marginBottom="0dp"
                                    android:layout_weight="1"
                                    android:adjustViewBounds="true"
                                    android:background="@drawable/picicon"
                                    android:scaleType="fitXY"
                                    app:riv_corner_radius="12dip"
                                    app:riv_mutate_background="true"
                                    app:riv_oval="false"
                                    app:riv_tile_mode="clamp" />
                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="1.5"
                                android:gravity="center"
                                android:orientation="horizontal">
                                <TextView
                                    android:id="@+id/textView2"
                                    android:layout_width="0dp"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="0.5"
                                    android:paddingLeft="8dp"
                                    android:text="  Pictures"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/Scanpicturestext" />

                            </LinearLayout>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>


                </LinearLayout>

                <LinearLayout
                    android:id="@+id/scanaudio_layout"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"

                    android:layout_margin="3dp"
                    android:layout_weight="1"
                    android:weightSum="2">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        app:cardCornerRadius="12dp">

                        <LinearLayout
                            android:id="@+id/audiocardlayout"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@color/purplelayout"
                            android:orientation="horizontal"
                            android:weightSum="2">

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="0.5"
                                android:orientation="horizontal"
                                android:paddingLeft="8dp">

                                <com.makeramen.roundedimageview.RoundedImageView
                                    android:id="@+id/imageView3"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_alignParentStart="true"
                                    android:layout_alignParentLeft="true"
                                    android:layout_alignParentTop="true"
                                    android:layout_alignParentEnd="true"
                                    android:layout_alignParentRight="true"
                                    android:layout_alignParentBottom="true"
                                    android:layout_margin="1dp"
                                    android:layout_marginStart="0dp"
                                    android:layout_marginLeft="0dp"
                                    android:layout_marginTop="0dp"
                                    android:layout_marginEnd="0dp"
                                    android:layout_marginRight="0dp"
                                    android:layout_marginBottom="0dp"
                                    android:layout_weight="1"
                                    android:adjustViewBounds="true"
                                    android:background="@drawable/playicon"
                                    android:scaleType="fitXY"
                                    app:riv_corner_radius="12dip"
                                    app:riv_mutate_background="true"
                                    app:riv_oval="false"
                                    app:riv_tile_mode="clamp" />
                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="1.5"
                                android:gravity="center"
                                android:orientation="horizontal">

                                <TextView
                                    android:id="@+id/textView3"
                                    android:layout_width="0dp"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="0.5"
                                    android:paddingLeft="8dp"
                                    android:text=" Audios"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/Scanaudiostext" />

                            </LinearLayout>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/scanvideos_layout"
                    android:layout_width="match_parent"

                    android:layout_height="0dp"
                    android:layout_margin="3dp"
                    android:layout_weight="1"
                    android:weightSum="2">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        app:cardCornerRadius="12dp">

                        <LinearLayout
                            android:id="@+id/videocardlayout"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@color/redlayout"
                            android:orientation="horizontal"
                            android:weightSum="2">

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="0.5"
                                android:orientation="horizontal"
                                android:paddingLeft="8dp">

                                <com.makeramen.roundedimageview.RoundedImageView
                                    android:id="@+id/imageView4"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_alignParentStart="true"
                                    android:layout_alignParentLeft="true"
                                    android:layout_alignParentTop="true"
                                    android:layout_alignParentEnd="true"
                                    android:layout_alignParentRight="true"
                                    android:layout_alignParentBottom="true"
                                    android:layout_margin="1dp"
                                    android:layout_marginStart="0dp"
                                    android:layout_marginLeft="0dp"
                                    android:layout_marginTop="0dp"
                                    android:layout_marginEnd="0dp"
                                    android:layout_marginRight="0dp"
                                    android:layout_marginBottom="0dp"
                                    android:layout_weight="1"
                                    android:adjustViewBounds="true"
                                    android:background="@drawable/vidicon"
                                    android:scaleType="fitCenter"
                                    app:riv_corner_radius="12dip"
                                    app:riv_mutate_background="true"
                                    app:riv_oval="false"
                                    app:riv_tile_mode="clamp" />

                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="1.5"
                                android:gravity="center"
                                android:orientation="horizontal">

                                <TextView
                                    android:id="@+id/textView4"
                                    android:layout_width="0dp"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="0.5"
                                    android:paddingLeft="8dp"
                                    android:text="Videos"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/Scanvideostext" />

                            </LinearLayout>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/scandocs_layout"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_margin="3dp"
                    android:layout_weight="1"
                    android:weightSum="2">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        app:cardCornerRadius="12dp">

                        <LinearLayout
                            android:id="@+id/doccardlayout"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@color/greenlayout"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="0.5"
                                android:orientation="horizontal"
                                android:paddingLeft="8dp">

                                <com.makeramen.roundedimageview.RoundedImageView
                                    android:id="@+id/imageView5"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_alignParentStart="true"
                                    android:layout_alignParentLeft="true"
                                    android:layout_alignParentTop="true"
                                    android:layout_alignParentEnd="true"
                                    android:layout_alignParentRight="true"
                                    android:layout_alignParentBottom="true"
                                    android:layout_margin="1dp"
                                    android:layout_marginStart="0dp"
                                    android:layout_marginLeft="0dp"
                                    android:layout_marginTop="0dp"
                                    android:layout_marginEnd="0dp"
                                    android:layout_marginRight="0dp"
                                    android:layout_marginBottom="0dp"
                                    android:layout_weight="1"
                                    android:adjustViewBounds="true"
                                    android:background="@drawable/docxicon"
                                    android:scaleType="fitXY"
                                    app:riv_corner_radius="12dip"
                                    app:riv_mutate_background="true"
                                    app:riv_oval="false"
                                    app:riv_tile_mode="clamp" />

                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_height="match_parent"
                                android:layout_weight="1.5"
                                android:gravity="center"
                                android:orientation="horizontal">

                                <TextView
                                    android:id="@+id/textView5"
                                    android:layout_width="0dp"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="0.5"
                                    android:paddingLeft="8dp"
                                    android:text="Docs"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/Scandocumentstext" />

                            </LinearLayout>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>

                </LinearLayout>

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

in above question the last image mentioned is the result i want,there are five inner layouts and i want to preview only top 3(blue,purple,red)layout , the 2 of them should be in bottom and will be visible only on scrolling. — dan walker, Apr 29 '19 at 10:45

Abdullah Riaz · Answer 1 · 2019-04-29T08:17:02.137

I just had a look at layout code. It is showing this kind of behavior because you are assigning your background to a Linear Layout which has a height of wrap_content. So the size of linear layout changes with the background provided. You should put the background in an imageview.

However, in my opinion you should change the overall hierarchy of your layout. It should be something like this:

RelativeLayout
    ImageView
    ScrollView
        LinearLayout-> this will contain your code, which you want to scroll

A simple structure xml would be like this,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center"
        android:src="@drawable/background"/>

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

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

            <!-- Your Layout code goes here -->
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

i already tried this and image parts will be hidden during scroll. — dan walker, Apr 29 '19 at 08:20
Of course, the image is on the background. So if you have a button over it, the image part behind the button would not be visible. — Abdullah Riaz, Apr 29 '19 at 08:24
suppose there is only image view in scroll view, the preview should be 60% of image to user and the rest needs to be scrolled. — dan walker, Apr 29 '19 at 09:20
In this case, where you want to scroll the imageView and linear layout both, the best option would be to use onTouchListener with ImageView. ImageView would still be out of ScrollView. And ScrollView would only scroll your other views. It would be something like this, https://stackoverflow.com/a/3732377/10948830 — Abdullah Riaz, Apr 29 '19 at 09:48

How to set scroll view which expands due to background image on different devices?

1 Answers1