I want to make a ImageView of specyfic height (1/3 of the screen) with white border and the image will be resize according to the height (to keep the proportion) for example. It will be perfect if also I will be able to add TextView below the image. I want to obtain smth like that :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#color/backgroundContent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/white"
android:gravity="center"
>
<ImageView
android:contentDescription="#string/pic"
android:id="#+id/pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:padding="5dp"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressPic"
android:layout_centerInParent="true"
android:visibility="gone"/>
</RelativeLayout>
edit: Im downloading images form url using Glide library if that matter
Related
Im trying to fit images perfectly in the imageView but the image dosent fit properly when i use centerCrop with adjustViewBounds but when i use fitXY with adjustViewBounds the image fits perfectly to the imageView but now the image quality gets worst, My imageView height and width are match_parent and yes i also used fitCenter but didnt worked
Screenshot//currently im using centerCrop with adjustViewBounds
Here is my code
<LinearLayout 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"
android:layout_centerInParent="true"
android:orientation="vertical"
android:weightSum="5">
<com.google.android.material.card.MaterialCardView
android:id="#+id/Card_View"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="4"
app:shapeAppearanceOverlay="#style/RoundedCornerHome">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/imagePostHome"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:contentDescription="#string/todo"
app:shapeAppearanceOverlay="#style/RoundedCornerHome" />
<include
android:id="#+id/imagepost_buttons"
layout="#layout/imagepost_buttons" />
</FrameLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="5dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:background="#color/grey"
app:cardBackgroundColor="#color/grey"
app:shapeAppearanceOverlay="#style/RoundedCornerHome">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/material_cardview_snipet"
layout="#layout/material_cardview_snipet" />
</FrameLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
for those who want to know what is layout material_cardview_snipet ,here is the code of it
<?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_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_marginTop="5dp"
android:layout_marginEnd="25dp"
android:src="#drawable/ic_baseline_attach_money_24"
tools:ignore="RtlHardcoded"
android:contentDescription="#string/todo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Ian Somerhalder"
android:textColor="#color/white"
android:layout_marginTop="5dp"
android:textSize="20sp"
android:textStyle="bold"
tools:ignore="SmallSp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
tools:ignore="RtlHardcoded"
android:textSize="17sp"
android:layout_marginLeft="10dp"
android:textColor="#color/white"
android:text=".............."/>
</FrameLayout>
If you're image size I mean height and width ratio don't match with your image view height and width ratio glide will fit the image to center of your image view and a part of the image cuts if the ratios doesn't match.
If you force images to fit the image view even the ratios doesn't matches it will be compressed to fit either in x-axis or in y-axis. So your image don't look as original.
So use your image view attributes like this
android:layout_width="match_parent"
android:layout_height="wrap_content"
Here width is fixed and hight will be calculated according to the image height.
You can resize your image in firebase, No need to code for it
https://firebase.google.com/products/extensions/storage-resize-images
You can use this cool extension of firebase. it Resizes images uploaded to Cloud Storage to a specified size, and optionally keeps or deletes the original image.
it Requires a blaze plan, for that use the trial version of it or if you are a student you can use your .edu id and get it from google.
If you are fetching images from a server or even from drawable use the glide library to set the image into an image view.
Google also recommends the Glide library to deal with images in android.
It's very easy to understand quickly. See Doc
I'm trying to create an activity that display an image that is obtained from an url. I want the width of the image to adapt the screen but the height of the image can be longer than the screen so that the image becomes scrollable (vertically).
First of all, I displayed the image from a drawable folder and it worked with the following code :
<ScrollView
android:layout_width="fill_parent"
android:id="#+id/scrollView1"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:src="#drawable/programme"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:scaleType="fitStart"></ImageView>
</LinearLayout>
</ScrollView>
I obtained what I wanted :
http://i.stack.imgur.com/imPkZ.png
But now I wanted the image to charge from an URL so I used the ion library :
Ion.with(imageView)
.load("http://...");
The image load but it is no longer scrollable and doesn't display as wanted.
http://i.gyazo.com/704324724364235bbe417d5447265c42.png
Do you have any solution?
Thanks
I found the solution by setting android:layout_width="match_parent" in ScrollView, ImageView and LinearLayout and setting android:adjustViewBounds="true" for ImageView like this :
<ScrollView
android:layout_width="match_parent"
android:id="#+id/scrollView1"
android:layout_height="wrap_content"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"/>
</LinearLayout>
</ScrollView>
I have ImageView which needs to be shown in full height available. However at top i have created LinearLayout which contains Text and Image. I want it to display at top but also want to image to fit screen. I have linear layout at bottom and its working fine.
This is my code for LinearLayout which i want to show at top. I have hidden actionbar
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</FrameLayout>
If i dont set imageView scale type to android:scaleType="fitXY" then it works but image doesnt fit screen.
I want to display image to fit between above bar which contains Text and below it has some icons. But if i make image scaletype ='fitXY' it doesnt display above text. Following is screenshot but i want image to occupy space
If you want the image to be below the actionbar you should not use the FrameLayout as a parent. You either should use vertical LinearLayout with weight or `RelativeLayout". Try following code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/actionbar"
android:layout_alignParentBottom="true"
android:scaleType="fitCenter"
/>
</RelativeLayout>
Also I doubt that you use fitXY as android:scaleType, because it doesn't maintain the aspect ratio of the image - so your image will be deformed (stretched). In your case you should rather use fitCenter, but it depends on how exactly you want to scale your image - you can also play with centerInside or centerCrop.
I am using a list view and I have an image in it, the image just for example say is 1920 by 1080, and i only want to display the same amount of the image as height of the layout that it is in.
So i have a verticl linearLayout and it's height is 100dp for example, so i want the image that im using in that image view to display whatever 100 dp would translate onto the image? if that makes sense. I want to keep the same resolution and i dont want to shrink it or anything, just show part of the image .
this is the xml as of now:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/example"
/>
</LinearLayout>
</LinearLayout>
Try this:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="center"
Documentation to "center"
Documentation to "layout_weight"
I have a horizontal list of images in my android application. But the problem is some of the images seems to not follow the layout I've defined in my xml. Like this:
my layouts look like this:
mainlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back_shop_list"
android:orientation="horizontal">
<com.devsmart.android.ui.HorizontalListView
android:id="#+id/shop_hlist_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollX="1dp"
android:scrollY="1dp"
android:overScrollMode="always" >
</com.devsmart.android.ui.HorizontalListView>
</LinearLayout>
then my listlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:translationY="200dp" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<ImageView
android:id="#+id/img"
android:clickable="true"
android:adjustViewBounds="true"
android:layout_width="360dp"
android:layout_height="360dp" />
<ProgressBar
android:id="#+id/img_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:translationY="150dp"
android:translationX="140dp" />
</FrameLayout>
<TextView
android:id="#+id/labelText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#dc6800"
android:textSize="16sp"
android:textStyle="bold" />
<!-- Description label -->
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#acacac"
android:paddingBottom="2dip">
</TextView>
</LinearLayout>
My guess is that the size of my image is lesser than what my ImageView layout_width and height. Or I dont really know what causes this problem.
But any help will do, please. Thanks.
EDIT: What I really wanted is that if the image is like image 4 and image 5, it should not have those spaces. I've tried getting the size of the image from my ImageLoader then set the layout parameters height and width in there while images are loaded. But it looked worse.
Are there other ways in which i can dynamically adjust my ImageView if ever the images are like image 4 and 5?
If actually you want to make the image occupy the desired space
try adding this image View property to your ImageView
You can try others I usually use fitXY out of the predefined list you will get there in XML Layout
android:scaleType="fitXY"
so as to make this property work we also need
android:adjustViewBounds="true"
that you have already added in your case
If actually you want to avoid on blank spaces and let the image occupy as much space as it want
In my layout I am using two image views to show a demo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_numbers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/tv_numbers"
android:layout_below="#+id/tv_numbers"
android:layout_marginTop="5dip"
android:layout_marginRight="10dip"
android:orientation="vertical">
<ImageView
android:id="#+id/textView1"
android:layout_width="200dip"
android:layout_height="200dip"
android:src="#drawable/desert"/>
<ImageView
android:id="#+id/textView2"
android:layout_width="200dip"
android:layout_height="200dip"
android:background="#drawable/desert"/>
</LinearLayout>
ImageView 1 is assigning image as Source using android:src="#drawable/desert"
and below is the result as you can notice that it is showing WhiteSpace arround it.
ImageView2 is assigning image as Background using android:background="#drawable/desert"
and below is the result as you can notice that it is showing no WhiteSpace arround it.
Or try using these attributes to make it possible
android:maxHeight=""
android:maxWidth=""
android:minHeight=""
android:minWidth=""