Placing an ImageView in centre with width and height to be half of parent width?

Question

I want to place an ImageView in a ViewGroup (preferrably a RelativeLayout) like below. The View group is stretch to take full width and height of the activity. I want to ensure whatever the device width is the ImageView height and width should be half of it..

╔═══════════════════════╗   
║                       ║ 
║       View Group      ║ 
║                       ║ 
║    ╔═════════════╗    ║   
║    ║             ║    ║   
║    ║ ImageView   ║    ║   
║    ║             ║    ║   
║    ║ width = X/2 ║    ║   
║    ║ height= X/2 ║    ║   
║    ╚═════════════╝    ║   
║                       ║ 
║                       ║ 
║                       ║ 
╚═══════════════════════╝   
<----------------------->
Xpx width of Device/Viewgroup

Can someone please Help how can I achieve this ?

Check out this post. You should be able to use that solution http://stackoverflow.com/a/4662629/5557544 — Roman Svitukha, Jan 12 '16 at 21:54

score 0 · Answer 1 · answered Jan 12 '16 at 21:54

0

To make the ImageView square implement a SquareImageView like this

public class SquareImageView  extends ImageView {
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){    
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = getMeasuredHeight();
        setMeasuredDimension(height, height);
}

and then add it to a LinearLayout with verticl along with two dummy invisible views (before and after), all with layout_height=0 and set for the SquareImageView a layout_weigth=0.5 and for the other two each layout_weigth=0.25

answered Jan 12 '16 at 21:54

Radu Ionescu

3,462
5
24
43

He said centered with half width and half height of parent – Lucas Crawford Jan 12 '16 at 21:56
from his description I see it squared _width = X/2 height= X/2_ – Radu Ionescu Jan 12 '16 at 22:04
True, "Xpx width of Device/Viewgroup" Didn't see that part – Lucas Crawford Jan 12 '16 at 22:04

Lucas Crawford · Accepted Answer · 2016-01-12T22:05:13.107

Maybe try something like this:

public class CenteredImageView extends ImageView {


public CenteredImageView(Context context) {
    super(context);
}

public CenteredImageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public CenteredImageView(Context context, AttributeSet attrs, int id) {
    super(context, attrs, id);
}

@Override
public void onMeasure(int measuredWidth, int measuredHeight) {
    super.onMeasure(measuredWidth, measuredHeight);
    ViewGroup parent = (ViewGroup) getParent();
    if(parent != null){
        int width = parent.getMeasuredWidth() / 2;
        setMeasuredDimension(width, width);
    }
}

Might be unnecessary to do the null check on parent, but should size the image accordingly

Thanks your answer was helpful :) – Ahmed Jan 16 '16 at 01:28 — Ahmed, Jan 16 '16 at 01:28

piotrek1543 · Answer 3 · 2016-01-12T22:14:59.657

Take a look at this (I've already added comments)

activity.main.xml

<?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"
    tools:context="com.example.piotr.myapplication.MainActivity"
    android:id="@+id/content"
    android:gravity="center">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/centered"/>

</RelativeLayout>

MainActivity.java

//Set layout Gravity as centered
        RelativeLayout content = (RelativeLayout) findViewById(R.id.content);
        content.setGravity(Gravity.CENTER);

        //This is your image which would be in the middle
        ImageView centeredImage = (ImageView) findViewById(R.id.centered);

        //get Screen Dimensions
        DisplayMetrics metrics = getApplicationContext().getResources().getDisplayMetrics();
        int width = metrics.widthPixels;
        int height = metrics.heightPixels;

        //NOTE: If you want to square, just use one of these value.

        //set as half of dimens
        centeredImage.getLayoutParams().height = height/2;
        centeredImage.getLayoutParams().width = width/2;

        //Add an color
        centeredImage.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));

        //Also possible
        //centeredImage.setBackgroundColor(Color.BLUE);


        //Add image from resources
        //centeredImage.setImageDrawable(getResources().getDrawable(R.mipmap.ic_launcher));

Put this code in onCreate method of your MainActivity class.

Finally, here's a final effect:

Hope it help

Placing an ImageView in centre with width and height to be half of parent width?

3 Answers3