image inside appbar layout

Question

I am making a tabbed activity. I have placed an image view inside AppBarLayout. I want to change image view src or background when each tab is selected.

Any body give me some hint?

I have attached my code below.

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

        <ImageView
            android:id="@+id/appBarImg"
            android:layout_width="400dp"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:background="@drawable/sc" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#FFF"
            app:tabMode="scrollable"
            app:tabPaddingEnd="15dp"
            app:tabPaddingStart="15dp">

            <android.support.design.widget.TabItem
                android:id="@+id/tabItem"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Schengen" />

            <android.support.design.widget.TabItem
                android:id="@+id/tabItem2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rest Of World" />

            <android.support.design.widget.TabItem
                android:id="@+id/tabItem3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Worldwide" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

AskNilesh · Accepted Answer · 2018-03-19T10:47:59.643

Try this

    ImageView appBarImg=findViewById(R.id.appBarImg);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            if(position==0){
                appBarImg.setBackgroundResource(R.drawable.position1);
            }else if(position==1){
                appBarImg.setBackgroundResource(R.drawable.position2);
            }else if(position==2){
                appBarImg.setBackgroundResource(R.drawable.position3);
            }
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

EDIT

<android.support.design.widget.AppBarLayout
        android:id="@+id/htab_appbar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:visibility="visible">

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


            <ImageView
                android:id="@+id/appBarImg"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="@drawable/ic_launcher_background"
                app:layout_collapseMode="parallax" />

        </LinearLayout>





       <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#FFF"
            app:tabMode="scrollable"
            app:tabPaddingEnd="15dp"
            app:tabPaddingStart="15dp">

            <android.support.design.widget.TabItem
                android:id="@+id/tabItem"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Schengen" />

            <android.support.design.widget.TabItem
                android:id="@+id/tabItem2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rest Of World" />

            <android.support.design.widget.TabItem
                android:id="@+id/tabItem3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Worldwide" />

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

ImageView appBarImg=findViewById(R.id.appBarImg); Problem is with above line. I can't assign appbarimg to image object. — Mohammad Aamir, Mar 19 '18 at 10:37
Android studio is not allowing me to assign my image view to appBarImg object. — Mohammad Aamir, Mar 19 '18 at 10:40
I have tried the above onPageSelected method. But unsuccessful assignment of image view refrained it. — Mohammad Aamir, Mar 19 '18 at 10:44
Your First Answer work. I was doing something wrong in my code. — Mohammad Aamir, Mar 19 '18 at 11:02
I used the same code as you have mentioned above but the image is not getting rendered. Any clue why? Only the space for the toolbar is visible not the image. but if i am replacing the imageview with textview, it is working. I mean the text view is getting rendered. @MohammadAamir — Newton Suhail, Jul 23 '20 at 07:39

image inside appbar layout

1 Answers1