LinearLayout pushing TextView out of the screen

I'm fairly new to Android app development and I have run into a bit of a problem.

I have a LinearLayout with 2 ImageButtons in it and another LinearLayout with a TextView on the top as you can see here -

Looks pretty-ish

However, I have tried to add another LinearLayout to add more things into, but it starts to push my Welcome message out of the screen

I add another LinearLayout and this happens

Here's the XML for the screen

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

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/scrollView"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:measureWithLargestChild="false"
            android:longClickable="false">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Welcome"
                android:id="@+id/textView4"
                android:textSize="60dp"
                android:layout_weight="1"
                android:layout_gravity="top"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:background="#5cfca1">

        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

            <ImageButton
                android:id="@+id/whatisit"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_weight="0.5"/>

            <ImageButton
                android:id="@+id/contact"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_weight="0.5"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingRight="5dp"
            android:paddingLeft="5dp"
            android:paddingBottom="300dp">

            <ImageButton
                android:id="@+id/howcanitreatit"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_weight="0.5"/>

            <ImageButton
                android:id="@+id/disclaimer"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_weight="0.5"
                android:adjustViewBounds="false"/>
        </LinearLayout>

    </LinearLayout>
</ScrollView>

Edited: Styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>


</style>

I've looked at other questions but they've seemed to do a lot different in terms of setting out their layout and have a lot more elements and such.

Why is it pushing the welcome message out? What am I doing wrong here?

Also feel free to scrutinise anything. The more mistakes I've done, the better

Answers


In this portion of code (2nd LinearLayout):

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        >

Take out : android:layout_gravity="center"

Also remove : android:paddingBottom="300dp" from the last LinearLayout

That will make it show, however you are using hard coded dp values a lot, this is never really good practice as you have to cater for lots of different screen sizes.


Try this

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:measureWithLargestChild="false"
        android:longClickable="false">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Welcome"
            android:id="@+id/textView4"
            android:textSize="60dp"
            android:layout_weight="1"
            android:layout_gravity="top"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:background="#5cfca1">

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingRight="5dp">

        <ImageButton
            android:id="@+id/whatisit"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:layout_weight="0.5"/>

        <ImageButton
            android:id="@+id/contact"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:layout_weight="0.5"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingRight="5dp"
        android:paddingLeft="5dp"
        android:paddingBottom="300dp">

        <ImageButton
            android:id="@+id/howcanitreatit"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:layout_weight="0.5"/>

        <ImageButton
            android:id="@+id/disclaimer"
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:layout_weight="0.5"
            android:adjustViewBounds="false"/>
    </LinearLayout>

</LinearLayout>


The android_height and android_width properties are there to tell the screen how to render, your welcome msg have a fill_parent propert which basically tells it it should spread all over the screen, change it to wrap content, either way as for now the heights and widths you gave it is probabley larger then the screen size and also a BAD HABIT since it will not match the 7300+ different android phones out there, as a thumb rule you should keep those sizes in xml. to read more about that please read this article


Try setting a fixed height for the Welcome TextView if that is possible with your requirement.

E.g: android:layout_height="65dp"


Try removing the following LOC from the second LinearLayout. ie: The LinearLayout just after the ScrollView.

android:layout_gravity="center"

Need Your Help

Pass array of checkboxes with ajax along with other inputs

javascript php jquery ajax checkbox

Currently I have been using ajax to post to a few methods in my code igniter installation. I now have a form that has a checkbox array with other inputs and am having problems passing the value int...

How can I construct a finite automaton for even decimal numbers?

numbers decimal finite-automata automata

I have to do this exercise and am completely stumped as to how. I've constructed some FA's before, but using binary numbers. How can I do this but for even decimal numbers?