Collapsing toolbar with recycle view with pictures

Question

I am sorry if this question is duplicated. I am new to android programming, and I am building application for public transport, and i have done so far this: getting the directions form google, parsing json data, and display on the map. Now I want to display routes in list view with icons bus and train.

A have seen that can be done via Collapsing toolbar and recycle view, but every tutorial that I have seen i am getting error is this because is Android studio 3.0.

This is picture i want to display

In this list view I want to add pictures like if is tram transport than tram icon of bus and if it is combination of multiple tram or bus lines to display that. Can anybody help me or give me advice?

Answer 1

Android provide CollapsingToolbarLayout while scrolling it will collapse toolbar in recycle view. Use this :

android.support.design.widget.CollapsingToolbarLayout

for more read CollapsingToolbarLayout

Happy coding!!

Answer 2

Try this code. It worked for me just simply put imageview in collpasing layout and change it with your options.

  <?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:background="@color/white"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    tools:context="com.example.intel.magitor.My_Creation_Activity"
    >




    <android.support.design.widget.AppBarLayout
        android:background="#fff"
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
            <!--<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/ThemeOverlay.AppCompat.Light" />-->
<!-- use this v7.wdiget.toolbar if you want to display title collpasing layout-->
<!-- put here your image you want to collpase while scrolling-->

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





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


    <android.support.v7.widget.RecyclerView
        android:id="@+id/video_list"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"



        >

    </android.support.v7.widget.RecyclerView>



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