I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="top|center"
android:background="#drawable/rounded_corner"
android:layout_marginTop="50dp"
android:layout_width="250dp"
android:layout_height="350dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="270dp"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/card_image"
android:layout_gravity="top"
android:layout_marginTop="0dp"/>
</FrameLayout>
The image should fill the image with its rectangle and scale it keeping its aspect ratio. It works fine when I do not move the view:
But, when I move the view, the image is drawn outside of its bounds:
I am using this library to move the card.
How do I prevent that the ImageView draws its image outside its bounds?
I use this library with Picasso, something like the example below. I've modified the code you provided a bit to keep it familiar.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="top|center"
android:background="#drawable/rounded_corner"
android:layout_marginTop="50dp"
android:layout_width="250dp"
android:layout_height="350dp">
<!-- Note that I've deleted a lot of properties from the ImageView -->
<!-- This is because Picasso will do a lot of that for us -->
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="270dp"
android:src="#drawable/card_image"
/>
</FrameLayout>
When you've inflated the view, you can simply find the view using findViewById, as you'd usually do.
ImageView imageView = (ImageView) inflatedView.findViewById(R.id.image_view);
// Here comes the Picasso bit
Picasso.with(getActivity()) // You have to provide a Context
.load(R.drawable.card_image) // Can be a Uri, File or String path as well
.into(imageView); // Use .into(ImageView view, Callback callback) to register a listener for the image loading.
This will simply put the image into the ImageView without modifying it. You can add .centerCrop(), .fit() (example below) and other nifty methods to edit the image to the container properties automatically. Since you use centerCrop in your example I won't go into those, but refer to the Picasso github page I provided at the top for futher documentation.
To centercrop or fit the image, you add the method between load() and .into():
Picasso.with(getActivity())
.load(R.drawable.card_image)
.centerCrop()
.fit()
.into(imageView);
Another great feature of Picasso is how it deals with slow or non-successful loading: you can add placeholders and error resources:
Picasso.with(getActivity())
.load(R.drawable.card_image)
.placeholder(R.drawable.loading_image)
.error(R.drawable.error_image
.into(imageView);
Good luck!
Related
I am trying to build Splash Screens the Right Way like this https://medium.com/#ssaurel/create-a-splash-screen-on-android-the-right-way-93d6fb444857 for that i have to place my app icon .png file inside a drawable layer list as bitmap like this
<item
android:drawable="#color/gray"/>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/logo"/>
</item>
Now how can i resize this bitmap? Thanks...
It is not possible to reset a new resize through XML, and you can confirm this link.
In the code method, there are different and complex methods. If you want to know more, you can look at this question
Â
But if your goal is only to change the size, this can be done through ImageView
if you want full image set to your scree (best for splash screen) that use match_parent to image view , This method is easier and faster than other methods:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_centerInParent="true"
android:src="#drawable/splash_screen" />
</RelativeLayout>
I have a PlayerView that takes up the top half of the Activity in portrait orientation with the bottom half of the screen showing some text.
I need to have the controller under the video without overlapping the video content (it will always be shown). By default when a user touches the video the controller appears at the bottom of the video covering the bottom part of the video. I my case I need the controller to stick under the video with no intersections with the video content.
I went through SimpleExoPlayer and PlayerView APIs but I haven't found any way to do so.
Question: How can I place the controller under the video with ExoPlayer?
Here is how the layout looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#id/video_view"
android:scrollbars="vertical" />
</RelativeLayout>
This will push the controls down to the bottom of the screen:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:use_controller="false" />
<com.google.android.exoplayer2.ui.PlayerControlView
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/video_view"
app:show_timeout="0" />
</RelativeLayout>
Then in Java:
PlayerView videoView = findViewById(R.id.video_view);
PlayerControlView controls = findViewById(R.id.controls);
controls.setPlayer(videoView.getPlayer());
Edit: Modified my answer to suggestion from #RashimiGautam
Refer to the answer by #Pierre.
Also to remove controller from above PlayerView, in that case, #id/video_view by writing player.showController(false) in java file.
You can also use app:use_controller:false in the xml.
So you will the only the video without controller on top. And link it to a new controller, in that case, #id/controls at the bottom of the video.
This might give you an idea, also have you tried to override the controls?
As an example, suppose we want our playback controls to consist of only a play/pause button positioned in the center of the view. We can achieve this by creating exo_playback_control_view.xml file in the application’s res/layout directory, containing:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton android:id="#id/exo_play"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#CC000000"
style="#style/ExoMediaButton.Play"/>
<ImageButton android:id="#id/exo_pause"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#CC000000"
style="#style/ExoMediaButton.Pause"/>
</FrameLayout>
Note that in the layout #id/exo_play and #id/exo_pause are standard ids defined by the ExoPlayer library. Use of standard ids is required so that child views can be identified, bound to the player and updated in an appropriate way. A full list of the standard ids for each view can be found in the Javadoc for PlaybackControlView and SimpleExoPlayerView. Use of each standard id is optional.
https://medium.com/google-exoplayer/customizing-exoplayers-ui-components-728cf55ee07a
I need to create a Fragment with a list of images.
I did the following:
RecyclerView;
CardView with an ImageView;
RecyclerView Adapter;
I have a list of urls with which I create an adapter. In the onBindViewHolder of the Adapter I use Picasso in order to load the images into the ImageView.
This approach works but I'm not sure it is the best. The images don't always have the right dimensions and I have a random bug, such as image appear and disappear during the scrolling.
What do you suggest?
EDIT:
XML Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
card_view:cardCornerRadius="4dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:id="#+id/thumbnail"/>
</android.support.v7.widget.CardView>
I used the following approach and it works well for me.
The images don't always have the right dimensions
My ImageView
<ImageView
android:id="#+id/image_college_news"
android:layout_width="#dimen/dimen_90"
android:layout_height="#dimen/dimen_90"
android:scaleType="centerCrop"
android:src="#drawable/ic_default_image" />
And display the image using Universal Image Loader with the following setting:
DisplayImageOptions options = new DisplayImageOptions.Builder()
.imageScaleType(ImageScaleType.EXACTLY_STRETCHED)
.cacheInMemory(true)
.cacheOnDisk(true)
.considerExifParams(true)
.build();
Hope it helps.
Why I can't display images in a large size, its results even smaller, is there something wrong with my XML code? or errors are in the java code? And i have "[Accessibility] Missing contentDescription attribute on image" on my XML code in ImageView
This my code :
Detail.xml
<ImageView
android:id="#+id/ivPosterImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:maxHeight="300dp"
android:src="#drawable/large_movie_poster" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ivPosterImage"
android:layout_marginTop="10dp" android:id="#+id/scrollView1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
Activity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_box_office_detail);
// Fetch views
ivPosterImage = (ImageView) findViewById(R.id.ivPosterImage);
....
Picasso.with(this).load(movie.getLargePosterUrl()).
placeholder(R.drawable.large_movie_poster).
into(ivPosterImage);
Please help me ...
Its clearly looking that your downloaded image have very small height and width dimension and you have settled the dimension around wrap_content. That's why you are getting this small icon instead of full image.
And again image download libs always use image attribute setSource in their code, which also set image around wrap_content.
Now you have 2 choice to show image wider:
set width = match parent,
height = fixed(any value as per your choice like 100 dp ,200 etc), i have not fixed the width because thats goona create exception on small or large screns.
set image background instead of image src that is by default set by image download libs.
Hopefully this will resolve your issue.
I use a adapter to load a lot of images witch have a holder, the problem when I scroll the image is loading and NetworkImageView holder is not shown anymore.
in adapter I use setImageUrl to set content of image
holderElementGridView.drawable2.setImageUrl(url,VolleySingleton.getInstance(mContext).getImageLoader());
and xml:
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="100"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:src="#drawable/iphone_feuilledematch_imagebackground" >
</com.android.volley.toolbox.NetworkImageView>
the iphone_feuilledematch_imagebackground is disable when volley download image.
How can I keep the default drawable source until volley finish the download of drawable ?
You can use Picasso instead of Volley, it works the way you want.