Adjust ViewBounds of ImageView when parent layout contents overflow

Question

I've a vertical LinearLayout containing following widgets displayed in center with LinearLayout's gravity set to "center":

ImageView
TextInputLayout
TextInputLayout
Button

This looks fine normally when when on smaller screen devices, the button in bottom is going out of view. This goes even worst when I display error for both TextInputLayouts.

Screenshots Normal Screens:

Screenshots Small Screens:

PROBLEM:

What I want is that on small screens, the ImageView should resize itself to accommodate all views, while on bigger screens, ImageView should keep its maximum available size while all contents appear in center (as in Screenshot 1).

Any help would be greatly appreciated! :)

SOURCE XML:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/input_view_margin"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_transaction_history_big" />

    <TextView
        style="@style/ReportHeading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/txt_transaction_history" />

    <android.support.v4.widget.Space
        android:layout_width="wrap_content"
        android:layout_height="40dp" />

    <TextInputLayout
        android:id="@+id/wrapperFromDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextInputEditText
            android:id="@+id/edtFromDate"
            style="@style/InputLayoutEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="false"
            android:hint="@string/hint_from_date" />
    </TextInputLayout>

    <TextInputLayout
        android:id="@+id/wrapperToDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <TextInputEditText
            android:id="@+id/edtToDate"
            style="@style/InputLayoutEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="false"
            android:hint="@string/hint_to_date" />
    </TextInputLayout>

    <Button
        android:id="@+id/btnSubmit"
        style="@style/PrimaryButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="35dp"
        android:text="@string/action_submit" />
</LinearLayout>

Have you fixed the size of your views in xml? Post your xml? — Nouman Ghaffar, Mar 16 '17 at 10:52
Give the views a weight.. And then adjust the size of the image by using scaleType. — Rachit, Mar 16 '17 at 10:59

score 0 · Answer 1 · answered Mar 16 '17 at 11:03

You can add a ScrollView to your XML like this for the user to be able to see your button

 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/input_view_margin"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_transaction_history_big" />

    <TextView
        style="@style/ReportHeading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/txt_transaction_history" />

    <android.support.v4.widget.Space
        android:layout_width="wrap_content"
        android:layout_height="40dp" />

    <TextInputLayout
        android:id="@+id/wrapperFromDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextInputEditText
            android:id="@+id/edtFromDate"
            style="@style/InputLayoutEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="false"
            android:hint="@string/hint_from_date" />
    </TextInputLayout>

    <TextInputLayout
        android:id="@+id/wrapperToDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <TextInputEditText
            android:id="@+id/edtToDate"
            style="@style/InputLayoutEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="false"
            android:hint="@string/hint_to_date" />
    </TextInputLayout>

    <Button
        android:id="@+id/btnSubmit"
        style="@style/PrimaryButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="35dp"
        android:text="@string/action_submit" />
</LinearLayout>
</ScrollView>

I don't want to add a ScrollView. If ImageView takes a bit less space, I'll have a perfect view. — Umair, Mar 16 '17 at 11:10

score 0 · Answer 2 · answered Mar 16 '17 at 11:38

Give your views weight and set width height to match parent of parent layout give weights to child views. Remember to set height to 0dp and width also to 0dp so that it can adjust according to the weight.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/input_view_margin"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_transaction_history_big" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            style="@style/ReportHeading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/txt_transaction_history" />

        <android.support.v4.widget.Space
            android:layout_width="wrap_content"
            android:layout_height="40dp" />

        <TextInputLayout
            android:id="@+id/wrapperFromDate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextInputEditText
                android:id="@+id/edtFromDate"
                style="@style/InputLayoutEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="false"
                android:hint="@string/hint_from_date" />
        </TextInputLayout>

        <TextInputLayout
            android:id="@+id/wrapperToDate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <TextInputEditText
                android:id="@+id/edtToDate"
                style="@style/InputLayoutEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="false"
                android:hint="@string/hint_to_date" />
        </TextInputLayout>

        <Button
            android:id="@+id/btnSubmit"
            style="@style/PrimaryButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="35dp"
            android:text="@string/action_submit" />

    </LinearLayout>

</LinearLayout>

It will solve your issue do let me know if it works.Best of luck!

score 0 · Answer 3 · answered Sep 13 '17 at 09:28

0

Use ConstraintLayout for "flex views", so you can set flexible constraints for your elements.

PS: You can easily test your implementation in android studio, when you expand, reduce the screen size in the preview/design.

answered Sep 13 '17 at 09:28

Javatar

2,518
1
31
43

Adjust ViewBounds of ImageView when parent layout contents overflow

3 Answers3