Problem with Scrollview Layout Android Studio

25 views Asked by At

I'm new on mobile dev, so i started with android studio XML/Java and i have a litle problem with my main page. Like i will show you, i want to put my scrollview just after my first LinearLayout which is my "header" but i don't understand how. I know my code is really bad so if you can explain me what is the biggest problem just to do that.

I tried a lot of things but as you can see it's still not working only on one format but its because of the margin-top so it's really dirty.

My code :

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TableDesCours">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="vertical"
        android:background="@color/top_bg"
        android:clickable="true"
        android:focusable="true"
        android:padding="5dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/string1"
            android:typeface="monospace"
            android:fontFamily="@font/madimi"
            android:textSize="25sp"
            android:layout_marginLeft="20sp"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Libérez votre potentiel d'étudiant avec nos cours en ligne."
            android:textSize="15sp"
            android:fontFamily="@font/roboto"
            android:layout_marginLeft="20dp" />
    </LinearLayout>
    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/header_scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_marginTop="80dp"
        >
        <TableLayout
            android:id="@+id/header_linear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginTop="100dp"
            android:layout_gravity="center">
            <LinearLayout
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:background="@drawable/math_bg"
                android:orientation="horizontal"
                android:layout_marginTop="30dp"
                android:padding="3dp"
                android:layout_gravity="center"
                >
                <LinearLayout
                    android:id="@+id/math"
                    android:layout_width="235dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Mathématiques"
                        android:textStyle="bold"
                        android:layout_marginTop="10dp"
                        android:textColor="@color/colorPrimary"
                        android:layout_marginLeft="15dp"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Un monde de logique et de défis."
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginLeft="15dp"
                        android:textColor="@color/colorPrimary"/>
                </LinearLayout>
                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/maths"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/francais"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:background="@drawable/fr_bg"
                android:orientation="horizontal"
                android:layout_marginTop="30dp"
                android:padding="3dp"
                android:layout_gravity="center">
                <LinearLayout
                    android:layout_width="235dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Français"
                        android:textStyle="bold"
                        android:layout_marginTop="10dp"
                        android:textColor="@color/colorPrimary"
                        android:layout_marginLeft="15dp"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Des mots, des histoires, et des possibilités infinies."
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginLeft="15dp"
                        android:textColor="@color/colorPrimary"/>
                </LinearLayout>
                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/francais"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/svt"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:background="@drawable/svt_bg"
                android:orientation="horizontal"
                android:layout_marginTop="30dp"
                android:padding="3dp"
                android:layout_gravity="center">
                <LinearLayout
                    android:layout_width="235dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Sciences de la vie et de la terre"
                        android:textStyle="bold"
                        android:layout_marginTop="10dp"
                        android:textColor="@color/colorPrimary"
                        android:layout_marginLeft="15dp"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Explorez les merveilles de la nature et de la vie."
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginLeft="15dp"
                        android:textColor="@color/colorPrimary"/>
                </LinearLayout>
                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/svt"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/geog"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:background="@drawable/histoire_bg"
                android:orientation="horizontal"
                android:layout_marginTop="30dp"
                android:padding="3dp"
                android:layout_gravity="center">
                <LinearLayout
                    android:layout_width="235dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Histoire/Géographie"
                        android:textStyle="bold"
                        android:layout_marginTop="10dp"
                        android:textColor="@color/colorPrimary"
                        android:layout_marginLeft="15dp"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Plongez dans les méandres du temps et de l'espace."
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginLeft="15dp"
                        android:textColor="@color/colorPrimary"/>
                </LinearLayout>
                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/histoire"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/techno"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:background="@drawable/tech_bg"
                android:orientation="horizontal"
                android:layout_marginTop="30dp"
                android:padding="3dp"
                android:layout_gravity="center">
                <LinearLayout
                    android:layout_width="235dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Technologie"
                        android:textStyle="bold"
                        android:layout_marginTop="10dp"
                        android:textColor="@color/colorPrimary"
                        android:layout_marginLeft="15dp"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Découvrons ensemble les rouages de la technologie"
                        android:textStyle="bold"
                        android:textSize="18sp"
                        android:layout_marginLeft="15dp"
                        android:textColor="@color/colorPrimary"/>
                </LinearLayout>
                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/techno"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="10dp">
            </LinearLayout>
        </TableLayout>
    </ScrollView>
</RelativeLayout>

And it display that: (https://i.stack.imgur.com/nh9HY.png)(https://i.stack.imgur.com/ydSHA.png)

1

There are 1 answers

1
Amirhussein On

The problem is that you are not using right alignment for the scroll view and trying to cover this problem with layout_margin.You should put align for views in RelativeLayout This is the Code you can use instead of your own:

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TableDesCours">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:background="@color/top_bg"
        android:clickable="true"
        android:focusable="true"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20sp"
            android:fontFamily="@font/madimi"
            android:text="@string/string1"
            android:textSize="25sp"
            android:typeface="monospace" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:fontFamily="@font/roboto"
            android:text="Libérez votre potentiel d'étudiant avec nos cours en ligne."
            android:textSize="15sp" />
    </LinearLayout>

    <ScrollView
        android:id="@+id/header_scrollview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="0dp"
        android:fillViewport="true">

        <TableLayout
            android:id="@+id/header_linear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:layout_marginTop="30dp"
                android:background="@drawable/math_bg"
                android:orientation="horizontal"
                android:padding="3dp">

                <LinearLayout
                    android:id="@+id/math"
                    android:layout_width="235dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="10dp"
                        android:text="Mathématiques"
                        android:textColor="@color/colorPrimary"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:text="Un monde de logique et de défis."
                        android:textColor="@color/colorPrimary"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/maths" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/francais"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:layout_marginTop="30dp"
                android:background="@drawable/fr_bg"
                android:orientation="horizontal"
                android:padding="3dp">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="10dp"
                        android:text="Français"
                        android:textColor="@color/colorPrimary"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:text="Des mots, des histoires, et des possibilités infinies."
                        android:textColor="@color/colorPrimary"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/francais" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/svt"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:layout_marginTop="30dp"
                android:background="@drawable/svt_bg"
                android:orientation="horizontal"
                android:padding="3dp">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="10dp"
                        android:text="Sciences de la vie et de la terre"
                        android:textColor="@color/colorPrimary"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:text="Explorez les merveilles de la nature et de la vie."
                        android:textColor="@color/colorPrimary"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/svt" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/geog"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:layout_marginTop="30dp"
                android:background="@drawable/histoire_bg"
                android:orientation="horizontal"
                android:padding="3dp">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="10dp"
                        android:text="Histoire/Géographie"
                        android:textColor="@color/colorPrimary"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:text="Plongez dans les méandres du temps et de l'espace."
                        android:textColor="@color/colorPrimary"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/histoire" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/techno"
                android:layout_width="320dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:layout_marginTop="30dp"
                android:background="@drawable/tech_bg"
                android:orientation="horizontal"
                android:padding="3dp">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="10dp"
                        android:text="Technologie"
                        android:textColor="@color/colorPrimary"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:text="Découvrons ensemble les rouages de la technologie"
                        android:textColor="@color/colorPrimary"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:padding="8dp"
                    android:src="@mipmap/techno" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="10dp"></LinearLayout>
        </TableLayout>
    </ScrollView>
</RelativeLayout>