Hi i am not sure why this is not working also not sure if this is possible but here is what i am trying to do.
I have a SimpleDraweeView which is contained inside a collapsingtoolbarlayout and i am trying to load an image into it.
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/cover_image"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
android:layout_height="300dp"
fresco:placeholderImageScaleType="centerCrop"
android:fitsSystemWindows="true"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#55000000"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll"
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>
and i am trying to set the image in my onCreate method like this.
//gallery is my object which contains coverImage field
Uri coverImageUri = Uri.parse(gallery.getCoverImage());
SimpleDraweeView coverImageView = (SimpleDraweeView)findViewById(R.id.gallery_cover_image);
Toast.makeText(this,gallery.getCoverImage(),Toast.LENGTH_SHORT).show();
coverImageView.setImageURI(coverImageUri);
I am able to see the url in the toast but the image doesn't seem to appear. Any pointers are appreciated.Thanks.
I tried out your code and its all working fine. Your xml is ok and your java code is sound, so i guess that your problem is a simple one. I think you forgot to add the internet permission because thats the only case that didn't display the image for me, just add <uses-permission android:name="android.permission.INTERNET"/> in your manifest.xml and you'll be set.
Also I saw that you have a placeHolderScaleType and not a placeholder, so it would be a good practice to add on if you're loading images online.
And thanks for the shadowed View that you have, it actually gave me a hint to something that i wanted to do and was thinking of ways to do it.
Related
I am trying to use CoordinatorLayout for the first time. From reading the docs and searching for tutorials, I didn't really understand anything about it.
I tried playing around with the code. So what I need is something like the following:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
app:title="#string/the_title"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse"
app:contentScrim="?colorPrimary"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/london_flat"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/flexible.example.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#null"
app:layout_collapseMode="pin"
style="#style/ToolBarWithNavigationBack"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
which I got from a tutorial and when scrolling up as the image moves out and the toolbar starts to get opaque the app:title="#string/the_title" is used to be moved up and be the actual text in the app bar once the image has moved out.
How can I modify this so that there is no text in app:title and as we scroll up either I set the actual text once the action bar becomes opaque or I use another TextView to move its copy there?
I'm using the following layout and it works great on all versions except Android Nougat where the title gets cut off when fully collapsed.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/them_color"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="300dp"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin"
app:contentInsetLeft="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
I have tried app:collapsedTitleGravity="center" but it doesn't fix the issue. How can I make it work on Nougat?
Issue is reported.
There is even better option than removing fitsSystemWindows,
just add to onCreate collapsingToolbarLayout.post { collapsingToolbarLayout.requestLayout() }
removing android:fitsSystemWindows="true"
solved my problem
This Sample project shows how to implement collapsing toolbar in Android.
Posting requestLayout in a runnable didn't work for me but if you're using AppCompatActivity you can use setSupportActionBar with the toolbar which seems to work.
I am using a ScrollingActivity which comes with a CollapsingToolbarLayout. I want to add an ImageView to this layout, and be able to toggle the image programmatically, but it doesn't seem to be doing anything.
XML of my layout:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|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/AppTheme.PopupOverlay" />
<ImageView
android:id="#+id/header_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:layout_gravity="center"
app:layout_collapseMode="parallax"
/>
</android.support.design.widget.CollapsingToolbarLayout>
When I try to do something like the following, on an event:
ImageView im = (ImageView)findViewById(R.id.toolbar_layout);
im.setBitmap(image_here);
But when I trigger this event, nothing happens. I know that my image is being parsed correctly because I'm not getting any exceptions from it, in fact; I'm not getting any exceptions at all throughout this process. Am I doing something wrong here? Is there a way to refresh this Toolbar to update the image?
Maybe because you are calling the layout id of Toolbar to ImageView
Try Changing
ImageView im = (ImageView)findViewById(R.id.toolbar_layout);
im.setBitmap(image_here);
to
ImageView im = (ImageView)findViewById(R.id.header_logo);
im.setBitmap(image_here);
I have a simple collapsingToolbarLayout xml, like the following:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/collapse_navbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="#dimen/expandedTitleMarginBottom"
app:expandedTitleMarginEnd="#dimen/expandedTitleMarginEnd"
app:expandedTitleMarginStart="#dimen/expandedTitleMarginStart"">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<!--SOME CONTENT-->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_mail_white"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
Everything works fine, until I try to scroll from BOTTOM to TOP quickly (from the Nested Scroll View content to the CollapsingToolbarLayout) and the nested content goes over the image, and that's horrible. I have been trying all the options that I've found but nothing seems to work.
All my libraries are updated according to the docs and the base code comes from some basic examples that seems to work fine for everyone.
Can anybody help me with this issue?
I provide some images to explain better the problem:
Normal and correct content before scroll
When scrolling from nested to toolbar
I've finally understood the problem. You're code is correct, the real problem it's your device. I've tested the code you posted on my LG Nexus 5 and everything was fine. Here's a screenshot of my test application:
As you can see, the scroll works fine, and the cards don't overlap the toolbar. Finally yesterday I had the opportunity to test my code on your's phone model, Huawei P8 Lite. And here's the incredible result:
Apparently, this Huawei phone model (or maybe other models too, i don't know) has a strange bug that creates this overlap issue when using the CollapsingToolbarLayout.
The strangest thing is that I searched everywhere on the internet, but I couldn't found anything related to this annoying Huawei bug.
To solve this problem, I suggest that you write personally to Huawei or.. to change phone!
I have a toolbar with an ImageView, the toolbar allows scroll and slide.
I am looking for a way to create an interface like whatsapp's profile.
I need to have the possibility to click on the ImageView which is inside the toolbar and after pop-up another interface(or activity) which allow to save or zoom the image (like whatsapp's profile picture).
Google provide ZoomView but it isn't enough, I don't need only to zoom the Image, maybe I need to create another Activity, I don't know where to start
Example of what I get if I click an image:
You need to use Android Studio with Google Design library,
which supports - CoordinatorLayout, with Collapsing Tool Bar layout
like below,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="312dp"
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:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/imgDetailView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:layout_margin="#dimen/card_margin"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:title="Outlet Details"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Outlet Details" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
And setup the toolbar with menu items in onCreatOptionsMenu method.
check for the click event for imageview and on click of image view
change the content with another fragment that has same like above.
I think you are looking for this:
https://github.com/ksoichiro/Android-ObservableScrollView
and this:
https://github.com/lgvalle/Material-Animations
I hope it helps