fill server Image to NetworkImageview without Stretching it android - android

What I have
I have ImageUri from server , & I am setting it to my NetworkImageview Volley library
What I want
I want the image to occupy full width & height of the NetworkImageview (wanted similar to facebook)
My problem
I see width of my NetworkImageview in white colour left
My code
xml layout
<RelativeLayout
android:id="#+id/relative_profile_hotot"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_below="#+id/relative_profile_header"
android:padding="0dp">
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/img_post_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/image_palce" />
<RelativeLayout
android:id="#+id/relative_profile_footer"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#color/profile_footer_bg">
<TextView
android:id="#+id/tv_profile_photo_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:drawableLeft="#drawable/ic_home_place"
android:drawablePadding="5dp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#color/grey_dark"
android:textSize="#dimen/txt_small"
tools:text="Paris France" />
<TextView
android:id="#+id/tv_profile_photo_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tv_profile_photo_location"
android:layout_marginLeft="20dp"
android:ems="40"
android:padding="2dp"
android:singleLine="true"
android:textColor="#color/grey_light"
android:textSize="#dimen/txt_very_small"
tools:text="Effel Tower,...Read more" />
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img_foot"
android:src="#drawable/ic_home_footstep_color"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/tv_profile_comment" />
<TextView
android:id="#+id/tv_profile_foot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:paddingTop="0dp"
android:textColor="#color/grey_light"
android:textSize="#dimen/txt_small"
tools:text="150"
android:layout_alignBottom="#+id/tv_profile_photo_description"
android:layout_alignEnd="#+id/tv_profile_photo_description" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img_cheers"
android:src="#drawable/ic_home_cheers_color"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_toStartOf="#+id/img_comment"
android:layout_marginEnd="14dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img_comment"
android:src="#drawable/ic_home_coments"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/tv_profile_comment" />
<TextView
android:id="#+id/tv_profile_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:paddingTop="0dp"
android:textColor="#color/grey_light"
android:textSize="#dimen/txt_small"
tools:text="264"
android:layout_alignBottom="#+id/tv_profile_photo_description"
android:layout_toStartOf="#+id/tv_profile_foot" />
<TextView
android:id="#+id/tv_profile_cheers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingRight="10dp"
android:paddingTop="0dp"
android:textColor="#color/grey_light"
android:textSize="#dimen/txt_small"
tools:text="3164"
android:layout_alignBottom="#+id/tv_profile_photo_description"
android:layout_toStartOf="#+id/img_comment" />
</RelativeLayout>
</RelativeLayout>
Adapter.java
myBucketListViewHolder.imgPostPic.setImageUrl(model.Uri, imageLoader);
myBucketListViewHolder.imgPostPic.setDefaultImageResId(R.drawable.im_default_cover);
screen shot :(

Replace
android:scaleType="center"
with
android:scaleType="centerCrop"
in your NetworkImageView

The same thing happened to me using NetworkImageView the problem is that it behaves a little different to ImageView and not enough with android: scaleType = "centerCrop" to fill the width when the density of the screen is greater than the width of the image you want insert.
Try this code, at runtime change the width of the image adjusting it to the density of the screen.
In your layout.xml
<com.android.volley.toolbox.NetworkImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:background="#android:color/transparent"
android:id="#+id/imagePagerView"/>
In your activity (i have in adapter)
Display display = ((Activity) context).getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
float scWidth = outMetrics.widthPixels;
float scHeigh = outMetrics.heightPixels;
mImageView.getLayoutParams().width = (int) scWidth;
mImageView.getLayoutParams().height = (int) scHeigh;

Related

Android Studio, wrap ImageView size around the x and y scale of the actual image

I have an ImageView with a mail icon, however, it was too big so i reduced its size.
The actual size of the image is smaller, but the content it wraps is still the same, resulting in my lines not being even. The image below demonstrates my problem
As you can see, the size of the imageview does not wrap around the image itself.
Below is the XML for the imageview
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_mail"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:scaleX="0.5"
android:scaleY="0.5"/>
Is there a way to fix this?
Below this is the full XML for the whole layout if that would help
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/PaleGrey">
<Space
android:id="#+id/dummyTopSpaceSc"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_alignParentTop="true"/>
<TextView
android:id="#+id/nameTextView"
android:paddingLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dummyTopSpaceSc"
android:text="name"
android:textStyle="bold"/>
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:paddingLeft="10dp"
android:layout_height="wrap_content"
android:layout_below="#+id/nameTextView"
android:text="title"/>
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTextView"
android:id="#+id/phoneContainer">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_phone"
android:scaleType="fitCenter"
android:scaleX="0.5"
android:scaleY="0.5"/>
<TextView
android:id="#+id/phoneTextView"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
app:layout_marginLeftPercent="15%"
android:layout_height="wrap_content"
android:autoLink="phone"
android:text="phone"/>
</android.support.percent.PercentRelativeLayout>
<!-- below this comment is the container for the mail icon -->
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/mailContainer"
android:layout_below="#+id/phoneContainer">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_mail"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:scaleX="0.5"
android:scaleY="0.5"/>
<TextView
android:id="#+id/emailTextView"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
app:layout_marginLeftPercent="15%"
android:layout_height="wrap_content"
android:autoLink="email"
android:text="email"/>
</android.support.percent.PercentRelativeLayout>
<Space
android:id="#+id/dummyBottomSpaceSc"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_below="#id/mailContainer"/>
</RelativeLayout>
You should resize your image by giving it exact values for width and height instead of wrap_content if you actually want the bounding box to get smaller as you change the size. Then you can add padding/margins back to it as you wish. Also, you should use the android:src attribute (or maybe even app:srcCompat) instead of android:background.
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_mail" />

How to Scale images to imageview perfectly with fixed width and height without distorting the image in Android

Iam creating an app to access images from gallery or camera. For this i have an imageview with 280/280dp dimension. How to Scale images from camera/gallery(which are bigger images) to below imageview perfectly having fixed width and height without distorting the image in Android:
<ImageView
android:layout_width="280dp"
android:layout_height="280dp"
android:id="#+id/mainImage"
android:background="#drawable/profile_settings_main_image"
android:layout_marginTop="19dp"
android:layout_below="#+id/container_toolbar"
android:layout_centerHorizontal="true"
android:focusable="false"
android:adjustViewBounds="true"
/>
activity_main.xml(Full Layout)
<RelativeLayout 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"
tools:context="in.ABC.activity.ProfileSettings"
android:background="#93BFB6">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<TextView android:layout_width="230dp"
android:layout_height="50dp"
android:textSize="22sp"
android:background="#drawable/profile_settings_name"
android:id="#+id/nameView"
android:textColor="#000000"
android:layout_marginTop="20dp"
android:layout_below="#+id/mainImage"
android:layout_alignLeft="#+id/mainImage"
android:layout_alignStart="#+id/mainImage"
android:layout_marginRight="1dp"
android:gravity="center"/>
<ImageView
android:layout_width="280dp"
android:layout_height="280dp"
android:id="#+id/mainImage"
android:background="#drawable/profile_settings_main_image"
android:layout_marginTop="19dp"
android:layout_below="#+id/container_toolbar"
android:layout_centerHorizontal="true"
android:focusable="false"
android:adjustViewBounds="true"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="100dp"
android:id="#+id/editName"
android:background="#drawable/profile_settings_image"
android:layout_alignTop="#+id/nameView"
android:layout_toRightOf="#+id/nameView"
android:layout_toEndOf="#+id/nameView"
android:layout_alignBottom="#+id/nameView" />
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/editImage"
android:background="#drawable/profile_settings_image_2"
android:layout_alignBottom="#+id/mainImage"
android:layout_alignRight="#+id/mainImage"
android:layout_alignEnd="#+id/mainImage"
android:focusable="true" />
</RelativeLayout>
If the image's scale factor doesn't match the ImageView's scale factor, then you cannot match the height/width without sacrificing the clarity. You'll have to compromise and decide if you want to have some of the image cut off, or have the entire image fit inside but acknowledge that there will be some left over space.
See here for more information regarding android:scaleType http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/
You can try Android ImageView.ScaleType:
<ImageView
android:layout_width="280dp"
android:layout_height="280dp"
android:id="#+id/mainImage"
android:background="#drawable/profile_settings_main_image"
android:layout_marginTop="19dp"
android:layout_below="#+id/container_toolbar"
android:layout_centerHorizontal="true"
android:focusable="false"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
Result of the code:
Result of the code
The original image:
Original Picture

How to make ImageView fullscreen programmatically on click?

Here is what I'm trying to do. I have 4 images and they are in one LinearLayout and that LinearLayout is child of RelativeLayout. I have successfully implemented onClickListener. Maybe my question is a little different, but everything is relevant.
I don't know how to extend image to full screen because images are in one LinearLayout which is inside that one RelativeLayout and maybe everything will be clear when I show you guys xml code.
I would like to make ImageView full screen on click and to be able to go back when I click back button. For that I would probably need to use onBackPressed
Images are at the bottom.
So here is the xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:background="#drawable/url"
android:fillViewport="true"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:scrollbars="none" >
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Thumbnail Image -->
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/thumbnail"
android:layout_width="140dp"
android:layout_height="220dp"
android:layout_alignParentLeft="true"
android:layout_marginRight="8dp"
android:src="#drawable/ic_horor_filmovi_ikonica" />
<!-- Naslov Filma -->
<TextView
android:id="#+id/naslov"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#7F0000"
android:textSize="#dimen/title_movie"
android:layout_toRightOf="#id/thumbnail"
android:layout_toEndOf="#+id/thumbnail" >
</TextView>
<!-- Godina izdanja Filma -->
<TextView
android:id="#+id/releaseYear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/naslov"
android:layout_alignStart="#+id/naslov"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="#+id/naslov"
android:layout_marginTop="3dp"
android:textColor="#color/dark_red" />
<ImageView
android:id="#+id/rating_star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/thumbnail"
android:layout_marginBottom="42dp"
android:layout_toRightOf="#+id/thumbnail"
android:layout_toEndOf="#+id/thumbnail"
android:src="#drawable/ic_actions_rating_icon" />
<Button
android:id="#+id/url_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/thumbnail"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toRightOf="#+id/thumbnail"
android:layout_toEndOf="#+id/thumbnail"
style="#style/UrlDugme" />
<TextView
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/rating_star"
android:layout_alignTop="#+id/rating_star"
android:layout_toRightOf="#+id/rating_star"
android:layout_toEndOf="#+id/rating_star"
android:gravity="center"
android:textColor="#color/dark_red"
android:textSize="#dimen/rating" />
<!-- Opis Filma -->
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#+id/thumbnail"
android:layout_marginTop="14dp"
android:background="#drawable/layout_round_rect_shape" >
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="18dp"
android:layout_marginTop="16dp"
android:scrollbars="vertical"
android:textColor="#color/dark_red"
android:textSize="18sp" />
</RelativeLayout>
<!-- Opis Filma Zavrsetak -->
<!-- Glumci -->
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:layout_marginTop="12dp"
android:background="#drawable/layout_round_rect_shape"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayoutActors"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/Image1"
android:layout_width="40dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_horor_filmovi_ikonica" />
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/Image2"
android:layout_width="40dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_horor_filmovi_ikonica" />
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/Image3"
android:layout_width="40dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_horor_filmovi_ikonica" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayoutActors"
android:orientation="horizontal" >
<TextView
android:id="#+id/ime1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ime"
android:textColor="#7F0000"
android:textSize="16sp" />
<TextView
android:id="#+id/ime2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ime"
android:textColor="#7F0000"
android:textSize="16sp" />
<TextView
android:id="#+id/ime3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ime"
android:textColor="#7F0000"
android:textSize="16sp" />
</LinearLayout>
</RelativeLayout>
<!-- Glumci -->
<!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->
<LinearLayout
android:layout_marginTop="12dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/layout_round_rect_shape"
android:id="#+id/linearLayoutImages"
android:layout_below="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image1"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image2"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image3"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image4"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
</LinearLayout>
<!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->
</RelativeLayout>
</ScrollView>
</RelativeLayout>
And here is onClickListener:
image1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 115, getResources().getDisplayMetrics());
int px1 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 150, getResources().getDisplayMetrics());
LinearLayout.LayoutParams p = new LinearLayout.
LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
p.weight = 1;
if(isImageFitToScreen) {
image1.setMinimumWidth(px);
image1.setMinimumHeight(px1);
image1.setAdjustViewBounds(true);
isImageFitToScreen=false;
}else{
image1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
image1.setScaleType(ImageView.ScaleType.FIT_XY);
isImageFitToScreen=true;
}
}
});
To offer an alternative to Ben's answer and flesh out my earlier comment, one possibility is to create an ImageView in your xml that occupies the entire screen, with its visibility set to gone. On your button press, load the image into this ImageView, and on a back press set the visibility to gone again.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ScrollView>
<!-- Everything else! -->
</ScrollView>
<ImageView
android:id="#+id/full_screen_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</RelativeLayout>
Inside your Activity's onCreate() method:
#Override
public void onCreate(Bundle mySavedInstances) {
ImageView fullScreenContainer = (ImageView) findViewById(R.id.full_screen_container);
image1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//However it is you load your images
fullScreenContainer.setImageDrawawble(R.drawable.example);
fullScreenContainer.setVisibility(View.VISIBLE);
}
});
}
#Override
public void onBackPressed() {
if (fullScreenContainer.getVisibility() == View.VISIBLE) {
fullScreenContainer.setImageDrawable(null);
fullScreenContainer.setVisibility(View.GONE);
} else {
super.onBackPressed();
}
}
Welcome to stack overflow Dusan,
I've something very similar, but all I do is just put the full screen image in a new activity & pass the image as bytes & display it in a full screened imageview. As soon as they press back, they're returned to where they were before. I think trying to change the layout parameters is a bit overkill here.
Create new Activity or Fragment and set image to ImageView in new Activity or Fragment. Using Fragment is better approach here as user can click on multiple images one after another. It is less expensive to create or destory Fragment.
Image can be passed to another activity by converting into byte array. It is better approach to save image on server or database such as firebase etc and use generated URL in app. Which make it easy to pass Url between Activities or Fragments than passing byte array

Android: ImageView display fail with big size

I have a problem with ImageView as below:
I have an image with big size (bigger than its part in screen), when I set src for imageView as:
<ImageView
android:id="#+id/splash_second_iv_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/phone_white"
android:layout_toLeftOf="#id/middle"
android:visibility="visible"
android:padding="0dp"
android:layout_marginBottom="0dp"/>
then I put it into a RelativeLayout, problem is the content of image is displayed as wrap in the ImageView but size of ImageView is very big (seems as it auto create padding in the image view in four sides of ImageView, since my calculation for layout fails (can not align property position of child)).
Anybody can tell me what's the problem in here and how do I resolve this problem?
Please have a look at the image to have a better understanding. Also I added attribute:
android:adjustViewBounds="true"
android:scaleType="fitEnd"
I can align the content as I want but size of ImageView still very big.
The xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:id="#+id/splash_slide_forth">
<TextView
android:id="#+id/splash_forth_tv_title"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="#string/splash_4th_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textColor="#2b333b"
android:layout_marginTop="40dp"
android:textSize="28sp"
/>
<TextView
android:gravity="center_horizontal"
android:layout_below="#id/splash_forth_tv_title"
android:id="#+id/splash_forth_tv_desc"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:layout_centerHorizontal="true"
android:text="#string/splash_4th_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#2b333b"
android:layout_marginTop="10dp"
android:textSize="15sp"
/>
<ImageView
android:layout_below="#id/splash_forth_tv_desc"
android:id="#+id/splash_forth_iv_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/phone_vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:scaleType="fitEnd"
android:adjustViewBounds="true"
android:visibility="gone"
/>
<ImageView
android:layout_below="#id/splash_forth_tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/splash_forth_iv_horizontal"
android:src="#drawable/horizontal_phone"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:visibility="visible"
/>
Please set image as background,
<ImageView
android:id="#+id/splash_forth_iv_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#id/splash_forth_tv_desc"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:background="#drawable/demo_image"
android:visibility="visible" />
I really wish it works for you,otherwise we will do something else.

Achieving a square imageview content for TableLayout with stretchColumns

currently I'm currently trying to achieve a squared ImageViews inside a TableRows which is supposed to be squared even if the columns are stretched but unfortunately it doesn't work the way I expected it to be. The plan is pretty simple. Use a TableLayout to host a number of ImageViews but make those imageviews squared inside even if the it is stretched. Here's what I tried so far.
<RelativeLayout 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"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MyActivity">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="false">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img1"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:layout_alignTop="#+id/img2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img2"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/img1"
android:layout_toEndOf="#+id/img1"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:cropToPadding="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img3"
android:layout_toEndOf="#+id/img2"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/img2" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img4"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:layout_alignTop="#+id/img6"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img5"
android:layout_toEndOf="#+id/img6"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/img6" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/img6"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/img4"
android:layout_toEndOf="#+id/img4"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:cropToPadding="true" />
</TableRow>
</TableLayout>
</RelativeLayout>
I expect the image to fill the width and height on those imageViews to create squared images based on my original image using this code:
private Bitmap sliceImage(int my_img, int col, int row) {
/*send the original full image int id here then slice and return per icon*/
Bitmap icon = BitmapFactory.decodeResource(getResources(), my_img);
int width = icon.getWidth();
int height = icon.getHeight();
int crop_width = width / 3;
int crop_height = height / 3;
Bitmap test = Bitmap.createBitmap(icon, col * crop_width, row * crop_height, crop_width, crop_height);
return test;
}
and this to set:
ImageView img1 = (ImageView) findViewById(R.id.img1);
img1.setImageBitmap(sliceImage(R.drawable.my_img,0,0));
and so on. But the the image is just stretched on its width but the height is not adjusted.
For sample it looks like this:
Where it should be more like this but stretched in both width and height:

Categories

Resources