Same size for 2 Imageviews, one is wrap_content - android

I'm looking for a way to get my two imageviews on the same size.
Imageview A is : width: match_parent
height: wrap_content
scaleType: centerInside
adjustViewBounds: true
Imageview B is :
width: match_parent
height: wrap_content
And ImageView B is over Imageview A. But, the height of A is determinated by his content. So I would like that my ImageView B be at the same size than A.
I tried this : (In my RecyclerView adapter).
final ImageView v2 = holder.miniatureVideo;
final ImageView shadow2 = holder.shadow;
v2.post(new Runnable() {
#Override
public void run() {
shadow2.getLayoutParams().height = v2.getHeight();
ViewGroup.LayoutParams params = (ViewGroup.LayoutParams) shadow2.getLayoutParams();
params.height = v2.getHeight();
shadow2.setLayoutParams(params);
}
});
But there is a little delay, before it is correctly resize. And sometimes I have to scroll to make it resized.
Thanks

Did you try RelativeLayout ?
like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_a"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/imageA"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/image_a"
android:layout_alignBottom="#id/image_a"
android:src="#drawable/imageB"/>
</RelativeLayout>

int finalHeight, finalWidth;
final ImageView imageView1= (ImageView)findViewById(R.id.scaled_image);
ViewTreeObserver vto = imageView1.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
imageView1.getViewTreeObserver().removeOnPreDrawListener(this);
finalHeight = imageView1.getMeasuredHeight();
finalWidth = imageView1.getMeasuredWidth();
return true;
}
});
First get height of ImageOne as above.. Then Set it to ImageTwo as below
android.view.ViewGroup.LayoutParams layoutParams = imageView2.getLayoutParams();
layoutParams.width = finalWidth;
layoutParams.height = finalHeight ;
imageView2.setLayoutParams(layoutParams);

Related

Different values of width returned in fragment

I'm trying to determine the screen's width and height to use them in a fragment.
My fragment's layout has the id background.
If inside onViewCreated I use:
background = (RelativeLayout) view.findViewById(R.id.background);
background.post(new Runnable() {
#Override
public void run() {
int width = background.getMeasuredWidth();
int height = background.getMeasuredHeight();
Log.d("askj", width + "+" + height);
}
});
I get 1440+2276
but if I use:
WindowManager windowManager = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics displayMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int height = displayMetrics.heightPixels;
Log.d("askj", width + "+" + height);
or other related methods I get:
1440+2560
I'm using those parameters to set a background and I can clearly see that the whole screen size is not taken if I use the second approach. I don't really want to use that Runnable() so is there any way in which I can solve this ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/background"
tools:context="com.example.home.background.HomeScreen">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textStyle="bold"
android:layout_centerInParent="true"
android:textSize="22sp"
/>
</RelativeLayout>
You can measure the background View before your activity has added it to its view hierarchy by yourself using measure method.
background = (RelativeLayout) view.findViewById(R.id.background);
background.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
int backgroundHeight = background.getMeasuredHeight();
int backgroundWidth = background.getMeasuredWidth();
In my case I measured an inflated View but it had the width and height set to match_paent.
View view = inflater.inflate(R.layout.table_field_text, null, false);
view.measure(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
int viewHeight = view.getMeasuredHeight();
Use ViewTreeObserver like Below:
background = (RelativeLayout) view.findViewById(R.id.background);
final ViewTreeObserver vto = background.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#SuppressWarnings("deprecation")
#Override
public void onGlobalLayout() {
//get View Width and height here
int width = background.getWidth();
int height = background.getHeight();
//Call anyfunction which uses width and height here
function(width,height);
//Then remove layoutChange Listener
ViewTreeObserver vto = background.getViewTreeObserver();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
vto.removeOnGlobalLayoutListener(this);
} else {
vto.removeGlobalOnLayoutListener(this);
}
}
});

How to scale 3 images to fit screen width

These is the result that I am after:
Basically I want to scale the 3 images so that they have the same height and all together fill the screen width. The original images will all have same height.
Can this be done using layout, without width calculations from code?
Just use Layout Weights.
In the main layout, or the layout which contains the ImageViews, put
android:weightSum="10"
and then in the individual ImageViews, put layout_weights as shown below, or upto your requirements.
This basically means the width of the images will be 25%, 55% and 20% respectively.
You can use a linear layout with weight attribute specified as shown below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:src="#drawable/bg_canvas"
android:layout_height="300dp"
android:layout_weight="0.33"/>
<ImageView
android:layout_width="0dp"
android:src="#drawable/bg_canvas"
android:layout_height="300dp"
android:layout_weight="0.33"/>
<ImageView
android:layout_width="0dp"
android:layout_height="300dp"
android:src="#drawable/bg_canvas"
android:layout_weight="0.33"/>
</LinearLayout>
Comment below if you need any further info
try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
</LinearLayout>
the "magic" is in the weight component. you define a total weight of 3 in the layout and your image views should take a third of it, so the value is 1.
For my case the images needed to be updated at runtime, so none of the answers were exact fit.
I ended up extending LinearLayout and writing a small routine that unifies all images heights and make sure that all images together fill the LinearLayout width. In case someone is trying to achieve the same, my code looks like this:
public class MyImgLayout extends LinearLayout
{
public MyImgLayout(Context context)
{
super(context);
}
public void setup(ArrayList<String> images)
{
this.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
this.setLayoutParams(layoutParams); //set 0 height until we calculate it in onMeasure
for (String image : images) {
ImageView ivArticle = new ImageView(getContext());
setImageFromName(image, ivArticle); //this where you set the image
this.addView(ivArticle);
}
}
private void scaleImages()
{
if(getMeasuredHeight() == 0 && getMeasuredWidth() > 0) {
if (isHorizontal) {
double childRatioSum = 0;
int images = 0;
for (int i = 0; i < getChildCount(); i++) {
ImageView iv = (ImageView) getChildAt(i);
double width = iv.getDrawable().getIntrinsicWidth();
double height = iv.getDrawable().getIntrinsicHeight();
if (height > 0) {
childRatioSum += width / height;
images++;
}
}
if (childRatioSum > 0 && images == getChildCount()) {
//all images are downloaded, calculate the container height
//(add a few pixels to makes sure we fill the whole width)
double containerHeight = (int) (getMeasuredWidth() / childRatioSum) + images * 0.5;
for (int i = 0; i < getChildCount(); i++) {
ImageView iv = (ImageView) getChildAt(i);
double width = iv.getDrawable().getIntrinsicWidth();
double height = iv.getDrawable().getIntrinsicHeight();
iv.setLayoutParams(new LinearLayout.LayoutParams((int) (width * (containerHeight / height)), (int) containerHeight));
iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
}
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) this.getLayoutParams();
params.width = LayoutParams.MATCH_PARENT;
params.height = (int) containerHeight;
this.setLayoutParams(params);
requestLayout();
}
}
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
scaleImages();
}
}

Programmatically resize framelayout

I have something like that:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/photo1"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/photo2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</FrameLayout>
<Fragment>
</Fragment>
</FrameLayout>
And I want to resize that photo2 FrameLayout.
public void setScreenSize() {
Display display = getWindowManager().getDefaultDisplay();
FrameLayout layout = (FrameLayout) findViewById(R.id.photo2);
int screen_height = display.getHeight();
screen_height = (int) (0.60*screen_height);
LayoutParams parms = (LayoutParams) layout.getLayoutParams();
parms.height = screen_height;
}
Unfortunately this doesn't work and I don't know why.
Are you setting the height back to the layout?
public void setScreenSize() {
Display display = getWindowManager().getDefaultDisplay();
FrameLayout layout = (FrameLayout) findViewById(R.id.photo2);
int screen_height = display.getHeight();
screen_height = (int) (0.60*screen_height);
LayoutParams parms = (LayoutParams) layout.getLayoutParams();
parms.height = screen_height;
// Set it back.
layout.setLayoutParams(parms);
}
If you want to change the size of FrameLyaout programmatically then copy and paste this code, its working 100%.
FrameLayout frame1 = (FrameLayout) findViewById(R.id.framelayout1);
frame1.getLayoutParams().height =460;
frame1.getLayoutParams().width = 350;
frame1.requestLayout();

How to set a FrameLayout fill_parent in width and always have a fixed ratio in height?

I see some questions about "ImageView"s, but I need a FrameLayout.
I have a FrameLayout, which I need its width:height = 2:1, and the width is fill_parent. There are many image views inside the frame layout, I can just set them width=fill_parent and height=fill_parent.
I don't find a way to do this, please help .
My xml code is:
<FrameLayout
android:id="#+id/cardView"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/frameView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/card_style1"
/>
</FrameLayout>
See if this is what you want:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_layout);
final FrameLayout target = (FrameLayout) findViewById(R.id.frame_id);
target.post(new Runnable() {
#Override
public void run() {
int width = target.getWidth();
int height = width / 2;
LayoutParams lp = target.getLayoutParams();
lp.height = height;
target.setLayoutParams(lp);
}
});
}

resizing the imageView makes it change its place

I am having a Relative layout with few images in it like this below.
<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" >
<ImageView
android:id="#+id/image_2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignLeft="#+id/increase"
android:layout_alignParentTop="true"
android:layout_marginLeft="34dp"
android:layout_marginTop="34dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBottom="#+id/image_2"
android:layout_marginBottom="14dp"
android:layout_toRightOf="#+id/increase"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_8"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
and in my java file i need to perform a small task.
When i click an image it's size should be increased.
I tried this and it was working and this is my code
public class MainActivity extends Activity implements OnClickListener {
View imageView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView i1 = (ImageView ) findViewById(R.id.image_1);
ImageView i2 = (ImageView ) findViewById(R.id.image_2);
ImageView i3 = (ImageView ) findViewById(R.id.image_8);
i1.setOnClickListener(this);
i2.setOnClickListener(this);
i3.setOnClickListener(this);
}
public void onClick(View arg0) {
Log.v("clicked ", "clicked");
imageView = arg0;
Toast.makeText(this, "looking to resize the image ", 1).show();
Toast.makeText(this, "clicked 2", 1).show();
height = imageView.getHeight();
width = imageView.getWidth();
height += 50;
width += 50;
imageView.setLayoutParams(new RelativeLayout.LayoutParams(height, width));
}
}
But i am facing a problem.
when i click the image its position is changing.
Consider these screen shots ..
The below is the screen shot when the application is launched
and below is the screen shot when an image view is clicked.
Can anyone suggest me so that the image doesnt change its position
I can use something like using a grid view (if possible. but even i am trying to put some drag option to it. So can anyone suggest me please)
UPDATED CODE :
the onclick method is updated as below :
public void onClick(View arg0) {
Log.v("clicked ", "clicked");
imageView = arg0;
Toast.makeText(this, "looking to resize the image ", 1).show();
Toast.makeText(this, "clicked 2", 1).show();
height = imageView.getHeight();
width = imageView.getWidth();
height += 50;
width += 50;
RelativeLayout.LayoutParams params = new
RelativeLayout.LayoutParams(height, width);
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
params.setMargins(
imageView.getLeft()-30,imageView.getTop()-30,imageView.getRight()+30,
imageView.getBottom()+30);
imageView.setLayoutParams(params);
}
You create new layoutparams for a relative layout and only set the height and width. Therefore, the image view will default to top left of the parent relative layout. You also need to set the alignment and margin as you need.
Since you are using a relative layout, you need to create new RelativeLayout layoutParams:
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
Something like this:
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
params.setMargins(left, top, right, bottom);
Good luck...

Categories

Resources