ImageView - have height match width

Question

I have an imageview  I want its width to be fill parent  I want its height to be whatever the width ends up being  For example    lt ImageView   android layout width  fill parent    android layout height  whatever the width ends up being    gt    Is something like that possible in a layout file without having to create my own view class   Thanks

User · Answer

For people passing by now  in 2017  the new best way to achieve what you want is by using ConstraintLayout like this    lt ImageView     android layout width  0dp      android layout height  0dp      android scaleType  centerCrop      app layout constraintDimensionRatio  1 1    gt    And don t forget to add constraints to all of the four directions as needed by your layout   Build a Responsive UI with ConstraintLayout  Furthermore  by now  PercentRelativeLayout has been deprecated  see Android documentation

User · Answer

i did like this -   layout setMinimumHeight layout getWidth

User · Answer

This can be done using LayoutParams to dynamically set the Views height once your know the Views width at runtime  You need to use a Runnable thread in order to get the Views width at runtime or else you ll be trying to set the Height before you know the View s width because the layout hasn t been drawn yet   Example of how I solved my problem   final FrameLayout mFrame    FrameLayout  findViewById R id frame id        mFrame post new Runnable               Override         public void run                 RelativeLayout LayoutParams mParams              mParams    RelativeLayout LayoutParams  mFrame getLayoutParams                mParams height   mFrame getWidth                mFrame setLayoutParams mParams               mFrame postInvalidate                        The LayoutParams must be of the type of the  Parent View that your view is in  My FrameLayout is inside of a RelativeLayout in the xml file       mFrame postInvalidate      is called to force the view to redraw while on a separate thread than the UI thread

User · Answer

I couldn t get David Chu s answer to work for a RecyclerView item and figured out I needed to constrain the ImageView to the parent  Set the ImageView width to 0dp and constrain its start and end to the parent  I m not sure if setting the width to wrap content or match parent works in some cases  but I think this is a better way to get the child of a ConstraintLayout to fill its parent    lt android support constraint ConstraintLayout     android layout width  match parent      android layout height  wrap content  gt        lt ImageView         android layout width  0dp          android layout height  0dp          app layout constraintStart toStartOf  parent          app layout constraintEnd toEndOf  parent          app layout constraintDimensionRatio  1 1   gt    lt  android support constraint ConstraintLayout gt

User · Answer

You can t do it with the layout alone  I ve tried  I ended up writing a very simple class to handle it  you can check it out on github  SquareImage java Its part of a larger project but nothing a little copy and paste can t fix  licensed under Apache 2 0   Essentially you just need to set the height width equal to the other dimension  depending on which way you want to scale it   Note  You can make it square without a custom class using the scaleType attribute but the view s bounds extend beyond the visible image  which makes it an issue if you are placing other views near it

User · Answer

I don t think there s any way you can do it in XML layout file  and I don t think android scaleType attribute will work like you want it to be  The only way would be to do it programmatically  You can set the width to fill parent and can either take screen width as the height of the View or can use View getWidth   method

User · Answer

Maybe this will answer your question    lt ImageView     android id    id cover image      android layout width  fill parent      android layout height  wrap content      android scaleType  fitCenter      android adjustViewBounds  true    gt    You can ignore the scaleType attribute for this particular situation

User · Answer

To set your ImageView equal to half the screen  you need to add the following to your XML for the ImageView    lt ImageView     android layout width  match parent      android layout height  match parent      android layout centerInParent  true      android scaleType  fitXY      android adjustViewBounds  true   gt    To then set the height equal to this width  you need to do it in code  In the getView method of your GridView adapter  set the ImageView height equal to its measured width   mImageView getLayoutParams   height   mImageView getMeasuredWidth

User · Answer

Here s how I solved that problem   int pHeight    picture getHeight    int pWidth   picture getWidth    int vWidth   preview getWidth    preview getLayoutParams   height    int  vWidth   double pHeight pWidth      preview - imageView with width setted to  match parent  and scaleType to  cropCenter   picture - Bitmap object to set in imageView src   That s works pretty well for me

User · Answer

Here I what I did to have an ImageButton which always have a width equals to its height  and avoid stupid empty margins in one direction   which I consider a as a bug of the SDK       I defined a SquareImageButton class which extends from ImageButton   package com myproject   import android content Context  import android util AttributeSet  import android util Log  import android widget ImageButton       public class SquareImageButton extends ImageButton            public SquareImageButton Context context            super context                TODO Auto-generated constructor stub            public SquareImageButton Context context  AttributeSet attrs            super context  attrs              TODO Auto-generated constructor stub             public SquareImageButton Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle              TODO Auto-generated constructor stub             int squareDim   1000000000        Override     public void onMeasure int widthMeasureSpec  int heightMeasureSpec           super onMeasure widthMeasureSpec  heightMeasureSpec             int h   this getMeasuredHeight            int w   this getMeasuredWidth            int curSquareDim   Math min w  h              Inside a viewholder or other grid element             with dynamically added content that is not in the XML             height may be 0             In that case  use the other dimension          if  curSquareDim    0              curSquareDim   Math max w  h            if curSquareDim  lt  squareDim                        squareDim   curSquareDim                     Log d  MyApp    h   h  w   w  squareDim   squareDim             setMeasuredDimension squareDim  squareDim               Here is my xml    lt com myproject SquareImageButton             android id    id speakButton              android layout width  wrap content              android layout height  match parent              android scaleType  centerInside              android src   drawable icon rounded no shadow 144px              android background   00ff00              android layout alignTop    id searchEditText              android layout alignBottom    id searchEditText              android layout alignParentLeft  true               gt    Works like a charm

User · Answer

Update  Sep 14 2017  According to a comment below  the percent support library is deprecated as of Android Support Library 26 0 0  This is the new way to do it    lt android support constraint ConstraintLayout     android layout width  match parent      android layout height  wrap content  gt        lt ImageView         android layout width  wrap content          android layout height  0dp          app layout constraintDimensionRatio  1 1    gt    lt  android support constraint ConstraintLayout gt    See here  Deprecated   According to this post by Android Developers  all you need to do now is to wrap whatever you want within a PercentRelativeLayout or a PercentFrameLayout  and then specify its ratios  like so   lt android support percent PercentRelativeLayout      android layout width  match parent      android layout height  wrap content  gt        lt ImageView         app layout widthPercent  100           app layout aspectRatio  100    gt    lt  android support percent PercentRelativeLayout gt

User · Answer

In Android 26 0 0 PercentRelativeLayout has been deprecated   The best way to solve it is now with ConstraintLayout like this    lt android support constraint ConstraintLayout                     android layout width  match parent                      android layout height  wrap content  gt        lt ImageView android layout width  match parent                 android layout height  0dp                 android scaleType  centerCrop                 android src   drawable you image                                        app layout constraintDimensionRatio  1 1   gt     lt  android support constraint ConstraintLayout gt     Here is a tutorial on how to add ConstraintLayout to your project

User · Answer

If your image view is inside a constraint layout  you can use following constraints to create a square image view make sure to use 1 1 to make square  lt ImageView     android layout width  quot 0dp quot      android layout height  quot 0dp quot      android id  quot   id ivImageView quot      app layout constraintDimensionRatio  quot 1 1 quot      app layout constraintStart toStartOf  quot parent quot      app layout constraintEnd toEndOf  quot parent quot   gt

User · Answer

The ImageView  scaleType  function may help you here   This code will keep the aspect ratio and position the image at the top   android layout width  fill parent  android layout height  fill parent  android scaleType  fitStart    Here is a great post showing the possibilities and appearances from using scaleType    ImageView scaleType samples

[android] ImageView - have height match width?

Examples related to android