Search code examples
androidscrollviewandroid-appbarlayoutappbar

Background Image on ScrollingActivity header Android


So im building an app for a school project (im learning Android). And i was wondering if you can add an image to the background of a Scrolling Activity Header. the app_bar (th ebig blue header in the image below).

I have no clue how to do it and i've been looking all over and can't find anything enter image description here

My code is the following:

Activity_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="com.example.juanfri.seguridadmainactivity.ActivityPeliculaJson">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

and my Activity_Content_Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.juanfri.seguridadmainactivity.ActivityPeliculaJson"
    tools:showIn="@layout/activity_pelicula_json">

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



        <TextView
            android:id="@+id/NombrePelicula"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="20dp"
            android:paddingTop="20dp"
            android:text="Pirates of the Carabien: Dead Men teel no tales"
            android:textSize="18sp" />

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

            <ImageView
                android:id="@+id/FotoPortada"
                android:layout_width="130dp"
                android:layout_height="200dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/common_ic_googleplayservices" />

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

                <RatingBar
                    android:id="@+id/Puntuacion"
                    style="@style/Widget.AppCompat.RatingBar.Small"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:isIndicator="false"
                    android:numStars="5"
                    android:stepSize="0.25" />

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/Sinopsis"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="TextView" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingTop="10dp">

            <TextView
                android:id="@+id/IdiomaOriginal"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Idioma Original:" />

            <TextView
                android:id="@+id/IdiomaOriginalValor"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/Duracion"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Duración:" />

            <TextView
                android:id="@+id/DuracionVal"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingTop="10dp">

            <TextView
                android:id="@+id/Presupuesto"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Presupuesto:" />

            <TextView
                android:id="@+id/PresupuestoValor"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

            <TextView
                android:id="@+id/Ingreso"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Ingresos" />

            <TextView
                android:id="@+id/IngresoVal"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingTop="10dp">

            <TextView
                android:id="@+id/FechaLanz"
                android:layout_width="225dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Fecha Lanzamiento:" />

            <TextView
                android:id="@+id/FechaLanzVal"
                android:layout_width="75dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />

        </LinearLayout>

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>


Solution

  • Do this.. and add image to the image view

    <?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.juanfri.seguridadmainactivity.ActivityPeliculaJson">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:toolbarId="@+id/toolbar">
    
                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax" />
    
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
        <include layout="@layout/content_activity_pelicula_json" />
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|end"
            app:srcCompat="@android:drawable/ic_dialog_email" />
    
    </android.support.design.widget.CoordinatorLayout>