How to make Toolbar not overlap other content in Android?

Alex

I am trying to develop an activity with a toolbar (the example is more or less taken from a tutorial), but the Toolbar always overlaps part of the other content. Here is a screenshot:

enter image description here

The blue toolbar overlaps some of the other content. I have tried to search for a similar question on SO but only found something unrelated. I also tried to change the order of some elements and replaced wrap_content <-> match_parent which at most worsens the layout.

I am sure I am missing something very fundamental, but I do not see what.

Code of activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

Code of content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
  <GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="wrap_content"
        android:layout_height="match_parent"

        android:useDefaultMargins="true"
        android:alignmentMode="alignBounds"
        android:columnOrderPreserved="false"

        android:columnCount="4"
        >

    <TextView
            android:text="@string/MainTitle"
            android:textSize="32dip"
            android:layout_columnSpan="4"
            android:layout_gravity="center_horizontal"
            android:id="@+id/textView1"
            />

    <TextView
            android:text="You can configure email in just a few steps:"
            android:textSize="16dip"

            android:layout_columnSpan="4"
            android:layout_gravity="left"
            />

    <TextView
            android:text="Email address:"

            android:layout_gravity="right"
            />

    <EditText
            android:ems="10"
            />

    <TextView
            android:text="Password:"

            android:layout_column="0"
            android:layout_gravity="right"
            />

    <EditText
            android:ems="8"
            />

    <Space
            android:layout_row="4"
            android:layout_column="0"
            android:layout_columnSpan="3"
            android:layout_gravity="fill"
            />

    <Button
            android:text="Next"
            android:id="@+id/imageButton1"
            android:layout_row="5"
            android:layout_column="3"
            />
</GridLayout>
Aakash

try this in your layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"/>

    </android.support.design.widget.AppBarLayout>

    <GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:useDefaultMargins="true"
        android:alignmentMode="alignBounds"
        android:columnOrderPreserved="false"

        android:columnCount="4"
        >

        <TextView
            android:text="MainTitle"
            android:textSize="32dip"
            android:layout_columnSpan="4"
            android:layout_gravity="center_horizontal"
            android:id="@+id/textView1"
            />

        <TextView
            android:text="You can configure email in just a few steps:"
            android:textSize="16dip"

            android:layout_columnSpan="4"
            android:layout_gravity="left"
            />

        <TextView
            android:text="Email address:"

            android:layout_gravity="right"
            />

        <EditText
            android:ems="10"
            />

        <TextView
            android:text="Password:"

            android:layout_column="0"
            android:layout_gravity="right"
            />

        <EditText
            android:ems="8"
            />

        <Space
            android:layout_row="4"
            android:layout_column="0"
            android:layout_columnSpan="3"
            android:layout_gravity="fill"
            />

        <Button
            android:text="Next"
            android:id="@+id/imageButton1"
            android:layout_row="5"
            android:layout_column="3"
            />
    </GridLayout>

</android.support.design.widget.CoordinatorLayout>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to make so that the toolbar does not overlap?

From Dev

How to make an transparent element overlap other elements?

From Dev

How to make an transparent element overlap other elements?

From Dev

how to make layers not overlap with each other in css

From Dev

How to solve Navbar overlap with body content or other page in CSS

From Dev

How to make Floating Action Button / Content overlap two divs in MaterializeCSS

From Dev

How to make toolbar on Android takes a full width?

From Dev

How to make the three dots appear in the Android toolbar

From Dev

How to make Android toolbar shorter in terms of height

From Dev

How to overlap various content?

From Dev

How to make alerts overlap?

From Dev

Android notifications overlap each other

From Dev

How to push up content without toolbar when open keybord in android

From Dev

Angular 2 make components overlap each other

From Java

How to make Toolbar transparent?

From Dev

How to make content next to a fixed-position menu not overlap in smaller resolutions

From Dev

How to make sidebar overlap the header?

From Dev

Unable to make toolbar transparent in Android

From Dev

Unable to make toolbar transparent in Android

From Dev

Android - how to make content views fit a layout?

From Dev

How to make Android app content load faster

From Dev

Toolbar overlap relative layout

From Dev

How to make the default property something other than Content in XAML?

From Dev

How to make a plone view that inserts other smaller views of content items?

From Dev

How to design toolbar in android

From Dev

How to manage Android toolbar

From Dev

How to make QtQuick transparent Toolbar

From Dev

How to fix two label overlap each other

From Dev

How do I make fixed nav-bar with jQuery slidetoggle method push content down rather than overlap it?

Related Related

  1. 1

    How to make so that the toolbar does not overlap?

  2. 2

    How to make an transparent element overlap other elements?

  3. 3

    How to make an transparent element overlap other elements?

  4. 4

    how to make layers not overlap with each other in css

  5. 5

    How to solve Navbar overlap with body content or other page in CSS

  6. 6

    How to make Floating Action Button / Content overlap two divs in MaterializeCSS

  7. 7

    How to make toolbar on Android takes a full width?

  8. 8

    How to make the three dots appear in the Android toolbar

  9. 9

    How to make Android toolbar shorter in terms of height

  10. 10

    How to overlap various content?

  11. 11

    How to make alerts overlap?

  12. 12

    Android notifications overlap each other

  13. 13

    How to push up content without toolbar when open keybord in android

  14. 14

    Angular 2 make components overlap each other

  15. 15

    How to make Toolbar transparent?

  16. 16

    How to make content next to a fixed-position menu not overlap in smaller resolutions

  17. 17

    How to make sidebar overlap the header?

  18. 18

    Unable to make toolbar transparent in Android

  19. 19

    Unable to make toolbar transparent in Android

  20. 20

    Android - how to make content views fit a layout?

  21. 21

    How to make Android app content load faster

  22. 22

    Toolbar overlap relative layout

  23. 23

    How to make the default property something other than Content in XAML?

  24. 24

    How to make a plone view that inserts other smaller views of content items?

  25. 25

    How to design toolbar in android

  26. 26

    How to manage Android toolbar

  27. 27

    How to make QtQuick transparent Toolbar

  28. 28

    How to fix two label overlap each other

  29. 29

    How do I make fixed nav-bar with jQuery slidetoggle method push content down rather than overlap it?

HotTag

Archive