How to use Scrollview + Listview

Asked

Viewed 1,934 times

2

I am creating a profile system for users using ListView and RecyclerView and I’m failing to do the scroll work. Currently it works like this:

inserir a descrição da imagem aqui

When I don’t use the ScrollView, he just does the scroll of LisView and the top part gets stuck. When I use the ScrollView, it continues with the same problem, but works perfectly if I specify a size for the layout_height other than wrap_content or match_parente, as an example: 500dp .. but it doesn’t take all posts, it takes the ones that match the height.

I did not understand very well, I searched in some sites and could not solve this problem, I saw in some international sites that it would not be possible to use the ScrollView within a ListView and others saying that I had how, but I did not succeed, I did not understand very well, will someone help me?

What I really want is for the list to do scroll along with the page as shown in the image below, in the Instagram style case, Facebook among others.

inserir a descrição da imagem aqui

Script of my profile:

<?xml version="1.0" encoding="utf-8"?>


<ScrollView
    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:weightSum="1">

<android.support.v7.widget.CardView
    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="130dp"
    cardView:cardBackgroundColor="#FFF"
    cardView:cardCornerRadius="4dp"
    android:layout_margin="5dp"
    android:id="@+id/cardview01"
    xmlns:cardView="http://schemas.android.com/apk/res-auto">


<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profileuimage"
    android:layout_width="70dp"
    android:layout_height="70dp"
    app:border_color="#FFF"
    android:src="@drawable/placeholder"
    app:border_width="2dp"
    app:layout_marginLeftPercent="2%"
    app:layout_marginTopPercent="2%"
    app:layout_marginRightPercent="4%"
    app:layout_marginBottomPercent="5%"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ucStatus"
        android:background="@drawable/ic_offline"
        app:layout_marginLeftPercent="15%"
        app:layout_marginTopPercent="35%"/>

    <com.addfrases.addfrases.MyCustomTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#4C4C4C"
        android:textSize="25dp"
        android:id="@+id/profileuname"
        app:layout_marginTopPercent="5%"
        android:layout_toRightOf="@+id/profileuimage" />

    <com.addfrases.addfrases.MyCustomTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ccc"
        android:textSize="12dp"
        android:id="@+id/profileuregion"
        app:layout_marginTopPercent="30%"
        android:layout_toRightOf="@+id/profileuimage"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_about"
        android:id="@+id/useraboutimg"
        android:layout_below="@+id/profileuimage"
        app:layout_marginLeftPercent="8%"
        app:layout_marginRightPercent="8%" />

    <com.addfrases.addfrases.MyCustomTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/profileuserabout"
        android:textColor="#696969"
        android:textSize="12dp"
        app:layout_marginTopPercent="60%"
        android:layout_toRightOf="@+id/useraboutimg"
        android:allowUndo="false" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/separator"
        android:id="@+id/separator"
        android:layout_below="@+id/profileuserabout"/>

    <Button
        android:layout_width="90dp"
        android:layout_height="30dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="SEGUIR"
        android:textColor="#FFF"
        android:background="@drawable/ic_follower"
        android:id="@+id/followButton"
        android:layout_below="@+id/separator"
        android:backgroundTint="#4B7AB2"
        app:layout_marginLeftPercent="65%" />


</android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    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="70dp"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    cardView:cardBackgroundColor="#FFF"
    cardView:cardCornerRadius="4dp"
    android:id="@+id/cardview02"
    xmlns:cardView="http://schemas.android.com/apk/res-auto">


    <android.support.percent.PercentRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.addfrases.addfrases.MyCustomTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:id="@+id/totalposts"
            android:textSize="20dp"
            android:textColor="#414141"
            android:text="0"
            app:layout_marginLeftPercent="15%"
            app:layout_marginTopPercent="20%"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="PUBLICAÇÕES"
            android:textColor="#4B4F54"
            android:textSize="10dp"
            app:layout_marginLeftPercent="8%"
            android:layout_below="@+id/totalposts"/>

        <com.addfrases.addfrases.MyCustomTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:text="0"
            android:textSize="20dp"
            android:textColor="#34373B"
            android:id="@+id/totalFollowing"
            app:layout_marginLeftPercent="45%"
            app:layout_marginTopPercent="20%"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SEGUINDO"
            android:textColor="#4B4F54"
            android:textSize="10dp"
            app:layout_marginLeftPercent="41%"
            android:layout_below="@+id/totalFollowing"/>

        <com.addfrases.addfrases.MyCustomTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:text="0"
            android:id="@+id/totalFollowerss"
            android:textSize="20dp"
            android:textColor="#34373B"
            app:layout_marginLeftPercent="80%"
            app:layout_marginTopPercent="20%"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SEGUIDORES"
            android:textColor="#4B4F54"
            android:textSize="10dp"
            app:layout_marginLeftPercent="73%"
            android:layout_below="@+id/totalFollowing"/>

    </android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.CardView>

<view
    android:id="@+id/recycler_view"
    class="android.support.v7.widget.RecyclerView"
    android:layout_width="match_parent"
    android:layout_height="453dp"
    android:layout_marginTop="5dp"
    android:layout_weight="0.31" />

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="200dp"
    android:layout_marginTop="250dp"/>
    </LinearLayout></ScrollView></FrameLayout>
android android-layout

  • Here’s a link showing a technique using linear layout inside the Scrollview is very easy to understand, if you don’t know English translate the page with Chrome which is still very understandable the explanation https://blogactivity.wordpress.com/2012/02/22/smart-headers-and-footers-in-scrollviews/

3 answers

1

use the fillViewport tag on your scroll

android:fillViewport="true"

Your structure will stay that way:

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

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

        <!-- codigo -->


    </LinearLayout>
</ScrollView>

  • Yes, I’ve tried, what I really want is for the listview to scroll along with the page, in case it goes down together. as happens on facebook, instagram etc... when I put the <scrollview /> up meche, but when I get to the listview it hangs and only the list starts to scroll, when I do not put, the top.

  • Ah! I got it. I edited the answer according to your explanation.

  • Thanks for the reply, but it didn’t work, I made a gif showing what is happening http://i.imgur.com/iSCVdjA.gifv. Note: I am using your code, when I put the scroll height as wrap_content the list does not work, it looks as if it had no height http://i.imgur.com/2eCVBaK.jpg, it did not work :/

0

You forgot to close your Scrollview tag. He can only have one child.

Place this line at the end of your code:

<ScrollView/>

  • Hello, good night, I closed, only here in the post did not appear in full.

0

If I understand correctly, you want Listview to be outlined in red in your question, to be an infinite Scrollview until the last post, and the top 2 images to be locked.

If it was this try the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.ajuda.ajuda.MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/relativeLayout">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/x">

        </ImageView>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/c"
            android:layout_below="@+id/imageView"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

        </ImageView>
    </RelativeLayout>

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

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/relativeLayout">

        <ListView
            android:id="@+id/lista_jornais"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            tools:listitem="@android:layout/simple_list_item_1"
            android:layout_alignParentTop="true" />

        <ScrollView
            android:id="@+id/scrollView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
    </RelativeLayout>

</RelativeLayout>

The result was this:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

  • Thanks for the answer but it wasn’t quite that, I would like the listview to scroll along with the page, in case if I drag down the page goes down, and the whole content scrolls, but I couldn’t, the image was to demonstrate how is happening, in case only the bottom part is making the scroll, the red part, the top part is stopped, when I put the scrollview the top part until meche, but when I get in the listview it hangs and only the list starts making the scroll.

Browser other questions tagged android android-layout

You are not signed in. Login or sign up in order to post.