CODEWITHSUNDEEP
androidxml
burglarhobbit
burglarhobbit

Reputation: 2291

Toolbar is overlapping the GridView of LinearLayout

The Toolbar is overlapping the GridView of Linear Layout, so more than 80% of the contents in the first row is being hidden by the Toolbar above it.

This happened after I added the FloatingActionButton in the activity_main. I tried to include the Toolbar in LinearLayout but it gave me a cast exception. If it's possible to include the Toolbar in LinearLayout, I'm fine with it. Also, I'm trying not to handle it statically by using marginTop or paddingTop.

Here is how it looks right now: Screenshot

And here are the xml files:

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="edu.ahduni.seas.gyapak.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:id="@+id/textlayout"
tools:context="edu.ahduni.seas.gyapak.MainActivity">

    <GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="90dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        android:padding="10dp" />
</LinearLayout>

SOLUTIONS

Apparently, there are many solutions for this: (Credit goes to the answers and the comment discussions)

1. include android:layout_marginTop="?attr/actionBarSize" android:paddingTop="AnydpThatYouFurtherWantToAdjust" in the LinearLayout of content_main.xml Credit: @VladimirJovanović

2. include app:layout_behavior="@string/appbar_scrolling_view_behavior" android:paddingTop="AnydpThatYouFurtherWantToAdjust" in the LinearLayout of content_main.xml Credit: @Burhanuddin Rashid

3. This is a long one, check @AbhayBohra's answer and then include android:paddingTop="AnydpThatYouFurtherWantToAdjust" in the LinearLayout of content_main.xml Credit: @Abhay Bohra and @Rahul Sharma

Upvotes: 3

Views: 690

Answers (3)

Rahul Sharma
Rahul Sharma

Reputation: 2893

Try adding tools:showIn="@layout/activity_main" to your content_main.xml LinearLayout. The final code should look like this:

<LinearLayout 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"
    android:orientation="vertical"
    android:id="@+id/textlayout"
    tools:showIn="@layout/activity_main"
    tools:context="edu.ahduni.seas.gyapak.MainActivity">

Upvotes: 0

AbhayBohra
AbhayBohra

Reputation: 2117

Try putting appBarLayout and include statement in LinearLayout with vertical orientation

<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="edu.ahduni.seas.gyapak.MainActivity">

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

Upvotes: 2

Burhanuddin Rashid
Burhanuddin Rashid

Reputation: 5370

Add app:layout_behavior to your content_main LinearLayout like this :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
//This
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/textlayout"
tools:context="edu.ahduni.seas.gyapak.MainActivity">

    <GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:gravity="center"
        android:padding="10dp" />
</LinearLayout>

Upvotes: 1

Related Questions