jay thakur jay thakur - 4 months ago 49
Android Question

ToolBar overlaps the content(LinearLayout) which contains fragments

Toolbar overlpas the content which contains a LinearLayout and then LinearLayout contains a fragemnt & a frame. why ?

I am using Android Studio 2.2 preview 5.

<?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="com.example.popularmovies2.MainActivity">

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

<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" />

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:divider="?android:attr/dividerHorizontal"
android:orientation="horizontal"
tools:context="com.example.popularmovies2.MainActivity">

<fragment
android:id="@+id/fragment"
android:name="com.example.popularmovies2.MainActivityFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
tools:layout="@android:layout/list_content" />

<FrameLayout
android:id="@+id/movie_detail_fragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4" />

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


I am adding image for reference. Kindly have a look & guide.

image

Answer

CoordinatorLayout acts like FrameLayout. It Overlaps its children. Wrap AppBarLayout and the LinearLayout with Another vertical Linear Layout like this:

<?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="com.example.popularmovies2.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">

      <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" />

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

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:baselineAligned="false"
      android:divider="?android:attr/dividerHorizontal"
      android:orientation="horizontal"
      tools:context="com.example.popularmovies2.MainActivity">

      <fragment
          android:id="@+id/fragment"
          android:name="com.example.popularmovies2.MainActivityFragment"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="2"
          tools:layout="@android:layout/list_content" />

      <FrameLayout
          android:id="@+id/movie_detail_fragment"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="4" />

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