Child inside ScrollView Layout is Colliding with Other Views

Viewed 82

I'm just a beginner who has started to create Android Apps. But I have a problem for which I can't find any solutions. I'm creating an app for the planets in our solar system. I have put the information about the planets inside a ScrollView that is melting. Here's my 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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".Jupiter">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:id="@+id/jup"
        android:layout_gravity="center"/>

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Jupiter"
                android:textSize="30sp"
                android:textColor="#FFFFFF"
                android:textAlignment="center"
                android:textStyle="bold"/>

            <Space
                android:layout_width="match_parent"
                android:layout_height="40dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Distance from the Sun: 773.78 million km"
                android:textSize="25sp"
                android:textAlignment="center"
                android:textColor="#FFFFFF"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Days taken to complete one revolution: 4,300 days"
                android:textSize="25dp"
                android:textColor="#FFFFFF"
                android:textAlignment="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Time taken to complete one rotation: 10 hours"
                android:textSize="25sp"
                android:textAlignment="center"
                android:textColor="#FFFFFF"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Axis of rotation: 3° (West to East)"
                android:textAlignment="center"
                android:textSize="25dp"
                android:textColor="#FFFFFF"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Temperature: minus 234 degrees Fahrenheit (minus 145 degrees Celsius)."
                android:textAlignment="center"
                android:textSize="25dp"
                android:textColor="#FFFFFF"/>


        </LinearLayout>

    </ScrollView>

</LinearLayout>

I'm using Picasso library to load images and here is my Jupiter.java class:

package com.sike.planets;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class Jupiter extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jupiter);
        ImageView jup = findViewById(R.id.jup);
        Picasso.get().load("https://lh3.googleusercontent.com/proxy/uaSv4MYLku6XjIN1ZNS0hLNAoJsXA9wraMySayd-SuPnsw8QfKGi9KF6pJIjl-g2OIF16Vq11nbB3mXtFIUJUtMxOpoQ5wPFrhfIhBPjumRzFiIgTHnG").resize(300, 300).into(jup);
    }
}

Here is my styles.xml (I posted it because I did some changes to it that maybe the real problems..):

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#212121</item>
        <item name="colorPrimaryDark">#000000</item>
        <item name="android:windowBackground">#212121</item>
        <item name="colorAccent">#FFFFFF</item>
    </style>

</resources>

I'm very appreciate with all the answer from you guys. Thanks!!

1 Answers

There were some problems in the TextView:

Changed:

android:textSize="25dp"

To:

android:textSize="25sp"

I expect that this was just a typeo, using device independent pixels for layouts instead of using scalable pixels for text.

I also added another TextView because there wasn't enough text to test the ScrollView on my device.

Lastly, I added the following line to avoid having to setup Picasso:

android:src="@drawable/jup"

And copied an image of Jupiter 'res.jpg' into the res/drawable folder.

EDIT: Regarding the image not loading in Picasso, I changed:

From:

Picasso.get().load("https://lh3.googleusercontent.com/proxy/uaSv4MYLku6XjIN1ZNS0hLNAoJsXA9wraMySayd-SuPnsw8QfKGi9KF6pJIjl-g2OIF16Vq11nbB3mXtFIUJUtMxOpoQ5wPFrhfIhBPjumRzFiIgTHnG").resize(300, 300).into(jup);

To:

Picasso.get().load("https://astronomy.com/-/media/Images/News%20and%20Observing/News/2019/08/JupiterCollision.jpg\n").resize(300, 300).into(jup);

Also, ensure the manifest has the necessary permissions:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

The modified layout 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:orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:id="@+id/jup"
        android:src="@drawable/jup"
        android:layout_gravity="center"/>

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Jupiter"
                android:textSize="30sp"
                android:textColor="#FFFFFF"
                android:textAlignment="center"
                android:textStyle="bold"/>

            <Space
                android:layout_width="match_parent"
                android:layout_height="40dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Distance from the Sun: 773.78 million km"
                android:textSize="25sp"
                android:textAlignment="center"
                android:textColor="#FFFFFF"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Days taken to complete one revolution: 4,300 days"
                android:textSize="25sp"
                android:textColor="#FFFFFF"
                android:textAlignment="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Time taken to complete one rotation: 10 hours"
                android:textSize="25sp"
                android:textAlignment="center"
                android:textColor="#FFFFFF"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Axis of rotation: 3° (West to East)"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="#FFFFFF"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Temperature: minus 234 degrees Fahrenheit (minus 145 degrees Celsius)."
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="#FFFFFF"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. Adding more text to test the scroll view. The end."
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="#FFFFFF"/>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

These shots are taken on an Android One device running Android 10.

Screenshot before scrolling:

Screenshot before the scroll

Screenshot after scrolling to the bottom:

Screenshot of scrolling to the bottom

Anyway, it looks good to me :)

Related