Placing an ImageView in the center with a width and a height of up to half the width of the parent element?

Question

I want to place an ImageView in a ViewGroup (preferably RelativeLayout) as shown below. The View group is stretched to get the full width and height of activity. I want the whole width of the device to be equal to the width and width of the ImageView, should be half as much.

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

Can anyone help how I can achieve this?

Answer 1

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);
    }
}

It may not be necessary to perform a null check on the parent element, but the image size should be appropriately

Answer 2

ImageView SquareImageView,

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

LinearLayout verticl ( ), layout_height=0 SquareImageView a layout_weigth=0.5, - layout_weigth=0.25

Answer 3

Take a look at this (I 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 the method of onCreateyour class MainActivity.

Finally, here is the final effect:

Hope this helps