Android Textview滚动问题

Question

Firstly, I am new to android so if I have missed something basic I do apologise.

I have created a GridView to store some information. The GridView consists of a 3x6 grid. In each cell, there is an image and text directly under the image. As the GridView is so large I have implemented a scrollbar.

This is how the page should look normally and is when first loaded/selected :

Everything looks wonderful, however, when I scroll down to the bottom and then back up, the text seems to wrap up and then push the image out of place. I am not sure why this is?

This is how the page looks after I have scrolled down and they scroll back up :

For the GridView, I have an XML file with the GridView itself along with a TextView at the very top called content_rewards.xml. I have also create an XML file for each picture/text in the grid itself called relics_gridlayout.xml. I believe I am probably missing a property of the TextViews in either one of these files, however, I am not sure which one or which property. I don't think it has anything to do with the grid or adapter itself hence I will not include that code.

content_rewards.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="true"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="25dp">

<GridView
    android:id="@+id/customgrid"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_below="@+id/os_texts"
    android:columnWidth="100dp"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    android:verticalSpacing="35dp"
    android:scrollbars="horizontal"
    tools:layout_constraintTop_creator="1"
    android:layout_marginTop="116dp"
    tools:layout_constraintLeft_creator="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/textView4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="B = 0   S = 0   G = 0"
    android:textSize="24sp"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintBottom_creator="1"
    app:layout_constraintBottom_toTopOf="@+id/customgrid"
    app:layout_constraintRight_toRightOf="parent"
    tools:layout_constraintLeft_creator="1"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>

relics_gridlayout.xml

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

<ImageView
    android:id="@+id/os_images"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher" />

<TextView
    android:layout_below="@+id/os_images"
    android:id="@+id/os_texts"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="This is Just Dummy Text"
    android:textAlignment="center"
    android:textSize="18dp"
    android:textStyle="bold"/>

</RelativeLayout>

Any help would be great. Thanks.

Answer 1

<?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:background="#ECEFF1"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

    <GridView
        android:id="@+id/grd1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:gravity="center"
        android:horizontalSpacing="6dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="6dp">

    </GridView>


</RelativeLayout>

This should solve your problem.

The scrolling view behavior will handle the scrolling irrespective of the size

Now add the Text view out of the Relative layout to view it always.

Or have a parent as Nested scrolling View and allow the nested scrolling enabled as false

setNestedScrollingEnabled(false)

A sample from my code that I already have used successfully to resolve such issue

Use your Grid view instead of Recycler View.

If you want the Item Text View to be always of 2 lines then set munLines="2" in the item Layout

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_container_reports"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

                <android.support.v7.widget.AppCompatTextView
                    android:id="@+id/tab_header"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginTop="8dp"
                    android:text="@string/user_reports"
                    android:textAllCaps="true"
                    android:textColor="@color/colorPrimaryDark"
                    android:textSize="@dimen/tab_label"
                    app:textAllCaps="true" />


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

                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/reports_recycler"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:fadeScrollbars="false"
                        android:nestedScrollingEnabled="false"
                        android:padding="4dp" />
                </RelativeLayout>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.v4.widget.SwipeRefreshLayout>

Answer 2

This is a problem that i faced as well , the only solution that i could come up with was hardcoding the height of the grid item.

 <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:padding="3dp">

A better option would be to use recycler view with a grid layout manager.

Answer 3

you can use LinearLayout and assign weights so that every item in your grid view occupy same space

Update the relics_gridlayout.xml with below code ( you may need to adjust gravity and layout weights)Try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/linearLayout_root_single_home_option"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">


<ImageView
    android:id="@+id/os_images"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    android:layout_weight="9" />


<TextView
    android:id="@+id/os_texts"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is Just Dummy Text"
    android:textSize="18dp"
    android:textStyle="bold"
    android:layout_weight="1" />


</LinearLayout>