\n
ImageView Different ScaleTypes :<\/strong><\/h4>\nIn android, ImageView comes with different configuration options to support the different ScaleType that is used for scaling the bounds of an image to the bounds of the ImageView. Below are\u00a0the different 7 scale types that are used in android:<\/p>\n
\n- CENTER –<\/strong> Center the image but doesn’t scale the image<\/li>\n
- CENTER_CROP –<\/strong>\u00a0Scale the image uniformly<\/li>\n
- CENTER_INSIDE –<\/strong> Center the image inside the container, rather than making the edge match exactly<\/li>\n
- FIT_CENTER –<\/strong> Scale the image from center<\/li>\n
- FIT_END –<\/strong> Scale the image from the end of the container.<\/li>\n
- FIT_START –<\/strong> Scale the image from start of the container<\/li>\n
- FIT_XY –<\/strong> Fill the image from x and y coordinates of the container<\/li>\n
- MATRIX –<\/strong> Scale using the image matrix when drawing<\/li>\n<\/ul>\n
Now let\u2019s we explain all these scaleTypes one by one in detail with example and code:<\/strong><\/p>\n1. CENTER:<\/strong><\/span> center is a scale type used in android to center the image to the ImageView but does not scale the image.<\/p>\nBelow is the example code in which we set the scale type to center for the image view.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"center\"<\/strong>\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n![\"Center](\"\/ui\/wp-content\/uploads\/2016\/02\/Center-ScaleType-in-ImageView-Example.jpg\")
<\/center>Setting ScaleType Center In Java Class:<\/strong><\/p>\nIn below example code we set the scale type to center for the image view in java<\/a> class<\/a>.<\/p>\n\/*Add in Oncreate() funtion after setContentView() method*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.CENTER);<\/pre>\n2. CENTER_CROP:<\/strong><\/span> center crop scale type is used in android to Scale the image uniformly. It means to maintain the image’s aspect ratio as by doing that both dimensions width and height of the image will be equal to or larger than the corresponding dimension of the imageview (minus padding).<\/p>\nBelow is the example code in which we set the scale type to center crop for the image view.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"centerCrop\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n![\"scaleType](\"\/ui\/wp-content\/uploads\/2016\/02\/scaleType-centerCrop-in-ImageView-Example.jpg\")
<\/center>Setting ScaleType Center Crop In Java Class:<\/strong><\/p>\nIn below example code we set the scale type to center crop for the image view by programmatically means in java class.<\/p>\n
\/*Add inside Oncreate() funtion after setContentView() function*\/\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);<\/pre>\n3. CENTER_INSIDE:<\/strong><\/span> center inside is another scale type used in android to center the image inside the container, rather than making the edge match exactly.<\/p>\nBelow is the example code in which we set the scale type to center inside for the image view.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"centerInside\"\r\nandroid:src=\"@drawable\/lion\" \/><\/pre>\n![\"centerInside](\"\/ui\/wp-content\/uploads\/2016\/02\/centerInside-scaletype-in-ImageView.jpg\")
<\/center>Setting Center Inside Scale Type In Java Class:<\/strong><\/p>\nIn below example code we set the scale type to center inside\u00a0for the image view in java class.<\/p>\n
\/*Add inside Oncreate() funtion after setContentView() function*\/\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE<\/em>);<\/pre>\n4. FIT_CENTER:<\/strong><\/span> fit center is a scale type used in android to scale the image from center. Fit center going to make sure that the source file completely fits inside a container (imageview) and either the horizontal or vertical axis is going to be exact.<\/p>\nBelow is the example code in which we set the scale type to fit center for the image view.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitCenter\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n![\"fitCenter](\"\/ui\/wp-content\/uploads\/2016\/02\/fitCenter-Scaletype-in-ImageView.jpg\")
<\/center>Setting Fit Center Scale Type In Java Class:<\/strong><\/p>\nIn below example code we set scale type to center crop for the image view by in java class.<\/p>\n
\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_CENTER<\/em>);\r\n<\/pre>\n5. FIT_END:<\/strong><\/span> fit end scale type is\u00a0used in android to fit the image or source file to the end of the container ( i.e. imageview). Fit end used to scale the image from the end of the container.<\/p>\nBelow is the example code in which we set the scale type to fit end\u00a0for the image view.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitEnd\"\r\nandroid:src=\"@drawable\/lion\" \/><\/pre>\n![\"fit](\"\/ui\/wp-content\/uploads\/2016\/02\/fit-end-scaletype-in-ImageView.jpg\")
<\/center>Setting Fit End Scale Type In Java Class:<\/strong><\/p>\nIn below example code, we set the scale type to fit end\u00a0for the image view in java class.<\/p>\n
\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_END<\/em>);\r\n<\/pre>\n6. FIT_START:<\/strong><\/span> fit start scale type is used in Android to fit the image to the start of the container( i.e. imageview ). Fit start is used to scale the image from start of the container.<\/p>\nBelow is the example code with explanation included in which we set the scale type to fit end\u00a0for the image view.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitStart\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n![\"fitstart](\"\/ui\/wp-content\/uploads\/2016\/02\/fitstart-scaletype-in-ImageView-Example.jpg\")
<\/center>Setting Fit Start Scale Type In Java Class:<\/strong><\/p>\nIn the below example code, we set the scale type to center crop for the image view by in java class.<\/p>\n
\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_START<\/em>);\r\n<\/pre>\n7. FIT_XY:<\/strong><\/span> fit_XY scale type is used in Android to scale the image using fill. Fit xy will\u00a0fill the image from x and y coordinates of the container.<\/p>\nBelow is the example code in which we set the scale type to fitXY.<\/p>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitXY\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n![\"FIT_XY](\"\/ui\/wp-content\/uploads\/2016\/02\/FIT_XY-ScaleType-in-ImageView.jpg\")
<\/center>Setting FIT_XY Scale Type In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_XY<\/em>);\r\n<\/pre>\n8. MATRIX:<\/strong><\/span> matrix is a scale type used in android to scale using the image matrix when drawing. Use it whenever you want to customize the way your image rotates, scales etc. at your desire.<\/p>\n<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"matrix\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n![\"Matrix](\"\/ui\/wp-content\/uploads\/2016\/02\/Matrix-ScaleType-in-ImageView.jpg\")
<\/center>Setting Matrix ScaleType In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.MATRIX<\/em>);\r\n<\/pre>\n
\nExample of scaleType In Android Studio:<\/strong><\/h4>\nProject Description:<\/strong><\/span><\/p>\nBelow is the example of scale Type in Android Studio, in which we display an image and change its scale type on button click event. For\u00a0that we have 8 different button<\/a>, one for each scale type and whenever you click on any button the name of that scale type will also displayed using a Toast.<\/p>\nJust click on the Button and image of Lion will change into that particular ScaleType. Below is the final output, download code and step by step tutorial:<\/p>\n
Download Project Code<\/a> ? <\/a><\/p>\n![\"ScaleType](\"\/ui\/wp-content\/uploads\/2016\/02\/ScaleType-ImageView-Example-In-Android-Studio-166x300.jpg\")
<\/center>Step 1:<\/strong><\/span> Create a new project in Android Studio<\/a> and name it ImageViewScaleTypes.<\/p>\nStep 2:<\/strong><\/span> Open res -> layout -> activity_main.xml (or) main.xml\u00a0and add following code:<\/p>\nIn this step we open an xml file and add the code for displaying an image view and different button<\/a> on the screen in a\u00a0relative layout<\/a>.<\/p>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n tools:context=\".MainActivity\">\r\n\r\n\r\n <ImageView\r\n android:id=\"@+id\/simpleImageView\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"200dp\"\r\n android:src=\"@drawable\/lion\" \/>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_below=\"@+id\/simpleImageView\"\r\n android:layout_marginTop=\"10dp\"\r\n android:orientation=\"vertical\">\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeCenter\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"CENTER\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeCenterCrop\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"CENTER CROP\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeCenterInside\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"CENTER INSIDE\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitCenter\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT CENTER\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitEnd\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT END\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitStart\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT START\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitXY\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT XY\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeMatrix\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"MATRIX\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n <\/LinearLayout>\r\n\r\n\r\n<\/RelativeLayout><\/pre>\nStep 3:<\/strong><\/span>\u00a0Now open \u00a0 app\u00a0-> java -> package ->\u00a0MainActivity.java<\/p>\n\n- In this step we add the code to\u00a0initiate the imageview<\/a> and other button<\/a>.<\/li>\n
- Using Switch<\/a> we will display the Lion image in that particular Scaletype on which Button user clicked.<\/li>\n
- We will perform click event on Button, set\u00a0the ScaleType for image using setScaleType() method according to Button and display the text for selected button\u00a0using a toast.<\/li>\n<\/ul>\n
package example.abhiandriod.imageviewscaletypes;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity implements View.OnClickListener {\r\n\r\n ImageView simpleImageView;\r\n Button scaleTypeCenter, scaleTypeCenterCrop, scaleTypeCenterInside, scaleTypeFitCenter, scaleTypeFitEnd, scaleTypeFitStart, scaleTypeFitXY, scaleTypeMatrix;\r\n\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n \/\/initiate views\r\n simpleImageView = (ImageView) findViewById(R.id.simpleImageView);\r\n scaleTypeCenter = (Button) findViewById(R.id.scaleTypeCenter);\r\n scaleTypeCenter.setOnClickListener(this);\r\n scaleTypeCenterCrop = (Button) findViewById(R.id.scaleTypeCenterCrop);\r\n scaleTypeCenterCrop.setOnClickListener(this);\r\n scaleTypeCenterInside = (Button) findViewById(R.id.scaleTypeCenterInside);\r\n scaleTypeCenterInside.setOnClickListener(this);\r\n scaleTypeFitCenter = (Button) findViewById(R.id.scaleTypeFitCenter);\r\n scaleTypeFitCenter.setOnClickListener(this);\r\n scaleTypeFitEnd = (Button) findViewById(R.id.scaleTypeFitEnd);\r\n scaleTypeFitEnd.setOnClickListener(this);\r\n scaleTypeFitStart = (Button) findViewById(R.id.scaleTypeFitStart);\r\n scaleTypeFitStart.setOnClickListener(this);\r\n scaleTypeFitXY = (Button) findViewById(R.id.scaleTypeFitXY);\r\n scaleTypeFitXY.setOnClickListener(this);\r\n scaleTypeMatrix = (Button) findViewById(R.id.scaleTypeMatrix);\r\n scaleTypeMatrix.setOnClickListener(this);\r\n }\r\n\r\n @Override\r\n public void onClick(View view) {\r\n switch (view.getId()) {\r\n case R.id.scaleTypeCenter:\r\n simpleImageView.setScaleType(ImageView.ScaleType.CENTER);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeCenter\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeCenterCrop:\r\n simpleImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeCenterCrop\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeCenterInside:\r\n simpleImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeCenterInside\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitCenter:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitCenter\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitEnd:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_END);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitEnd\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitStart:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_START);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitStart\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitXY:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_XY);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitXY\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeMatrix:\r\n simpleImageView.setScaleType(ImageView.ScaleType.MATRIX);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeMatrix\", Toast.LENGTH_SHORT).show();\r\n break;\r\n }\r\n \r\n }\r\n}<\/pre>\nOutput:<\/strong><\/span><\/p>\nNow run the App in AVD<\/a> and you will see Lion image and several buttons of ScaleType option listed. Click on any Button and you will see the image of Lion will change into that particular ScaleType.<\/p>\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"ImageView comes with different configuration options to support different scale types. ScaleType options are used for scaling the bounds of an image to the bounds of the image view. ScaleType configuration properties for ImageView in Android are CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY and MATRIX. Before understanding the different scale types of an imageview … Continue reading All scaleType In ImageView With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":828,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,66],"tags":[],"class_list":["post-825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archieve","category-image"],"acf":[],"psp_head":"All scaleTypes In ImageView With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on ScaleTypes in ImageView with example in Android Studio. Also find how image look in CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY and MATRIX.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/scaletype-imageview-example.html\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts\/825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=825"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts\/825\/revisions"}],"predecessor-version":[{"id":2832,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts\/825\/revisions\/2832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media\/828"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/categories?post=825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/tags?post=825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Now let\u2019s we explain all these scaleTypes one by one in detail with example and code:<\/strong><\/p>\n 1. CENTER:<\/strong><\/span> center is a scale type used in android to center the image to the ImageView but does not scale the image.<\/p>\n Below is the example code in which we set the scale type to center for the image view.<\/p>\n In below example code we set the scale type to center for the image view in java<\/a> class<\/a>.<\/p>\n 2. CENTER_CROP:<\/strong><\/span> center crop scale type is used in android to Scale the image uniformly. It means to maintain the image’s aspect ratio as by doing that both dimensions width and height of the image will be equal to or larger than the corresponding dimension of the imageview (minus padding).<\/p>\n Below is the example code in which we set the scale type to center crop for the image view.<\/p>\n In below example code we set the scale type to center crop for the image view by programmatically means in java class.<\/p>\n 3. CENTER_INSIDE:<\/strong><\/span> center inside is another scale type used in android to center the image inside the container, rather than making the edge match exactly.<\/p>\n Below is the example code in which we set the scale type to center inside for the image view.<\/p>\n In below example code we set the scale type to center inside\u00a0for the image view in java class.<\/p>\n 4. FIT_CENTER:<\/strong><\/span> fit center is a scale type used in android to scale the image from center. Fit center going to make sure that the source file completely fits inside a container (imageview) and either the horizontal or vertical axis is going to be exact.<\/p>\n Below is the example code in which we set the scale type to fit center for the image view.<\/p>\n In below example code we set scale type to center crop for the image view by in java class.<\/p>\n 5. FIT_END:<\/strong><\/span> fit end scale type is\u00a0used in android to fit the image or source file to the end of the container ( i.e. imageview). Fit end used to scale the image from the end of the container.<\/p>\n Below is the example code in which we set the scale type to fit end\u00a0for the image view.<\/p>\n In below example code, we set the scale type to fit end\u00a0for the image view in java class.<\/p>\n 6. FIT_START:<\/strong><\/span> fit start scale type is used in Android to fit the image to the start of the container( i.e. imageview ). Fit start is used to scale the image from start of the container.<\/p>\n Below is the example code with explanation included in which we set the scale type to fit end\u00a0for the image view.<\/p>\n In the below example code, we set the scale type to center crop for the image view by in java class.<\/p>\n 7. FIT_XY:<\/strong><\/span> fit_XY scale type is used in Android to scale the image using fill. Fit xy will\u00a0fill the image from x and y coordinates of the container.<\/p>\n Below is the example code in which we set the scale type to fitXY.<\/p>\n 8. MATRIX:<\/strong><\/span> matrix is a scale type used in android to scale using the image matrix when drawing. Use it whenever you want to customize the way your image rotates, scales etc. at your desire.<\/p>\n Project Description:<\/strong><\/span><\/p>\n Below is the example of scale Type in Android Studio, in which we display an image and change its scale type on button click event. For\u00a0that we have 8 different button<\/a>, one for each scale type and whenever you click on any button the name of that scale type will also displayed using a Toast.<\/p>\n Just click on the Button and image of Lion will change into that particular ScaleType. Below is the final output, download code and step by step tutorial:<\/p>\n Download Project Code<\/a> ? <\/a><\/p>\n Step 2:<\/strong><\/span> Open res -> layout -> activity_main.xml (or) main.xml\u00a0and add following code:<\/p>\n In this step we open an xml file and add the code for displaying an image view and different button<\/a> on the screen in a\u00a0relative layout<\/a>.<\/p>\n Step 3:<\/strong><\/span>\u00a0Now open \u00a0 app\u00a0-> java -> package ->\u00a0MainActivity.java<\/p>\n Output:<\/strong><\/span><\/p>\n Now run the App in AVD<\/a> and you will see Lion image and several buttons of ScaleType option listed. Click on any Button and you will see the image of Lion will change into that particular ScaleType.<\/p>\n ImageView comes with different configuration options to support different scale types. ScaleType options are used for scaling the bounds of an image to the bounds of the image view. ScaleType configuration properties for ImageView in Android are CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY and MATRIX. Before understanding the different scale types of an imageview … Continue reading All scaleType In ImageView With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":828,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,66],"tags":[],"class_list":["post-825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archieve","category-image"],"acf":[],"psp_head":"<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"center\"<\/strong>\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n
<\/center>Setting ScaleType Center In Java Class:<\/strong><\/p>\n\/*Add in Oncreate() funtion after setContentView() method*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.CENTER);<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"centerCrop\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n
<\/center>Setting ScaleType Center Crop In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"centerInside\"\r\nandroid:src=\"@drawable\/lion\" \/><\/pre>\n
<\/center>Setting Center Inside Scale Type In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE<\/em>);<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitCenter\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n
<\/center>Setting Fit Center Scale Type In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_CENTER<\/em>);\r\n<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitEnd\"\r\nandroid:src=\"@drawable\/lion\" \/><\/pre>\n
<\/center>Setting Fit End Scale Type In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_END<\/em>);\r\n<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitStart\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n
<\/center>Setting Fit Start Scale Type In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_START<\/em>);\r\n<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"fitXY\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n
<\/center>Setting FIT_XY Scale Type In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView)findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.FIT_XY<\/em>);\r\n<\/pre>\n
<ImageView\r\nandroid:id=\"@+id\/simpleImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"200dp\"\r\nandroid:scaleType=\"matrix\"\r\nandroid:src=\"@drawable\/lion\" \/>\r\n<\/pre>\n
<\/center>Setting Matrix ScaleType In Java Class:<\/strong><\/p>\n\/*Add inside Oncreate() funtion after setContentView() function*\/\r\n\r\nImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView<\/em>);\r\nsimpleImageView.setScaleType(ImageView.ScaleType.MATRIX<\/em>);\r\n<\/pre>\n
\nExample of scaleType In Android Studio:<\/strong><\/h4>\n
<\/center>Step 1:<\/strong><\/span> Create a new project in Android Studio<\/a> and name it ImageViewScaleTypes.<\/p>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n tools:context=\".MainActivity\">\r\n\r\n\r\n <ImageView\r\n android:id=\"@+id\/simpleImageView\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"200dp\"\r\n android:src=\"@drawable\/lion\" \/>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_below=\"@+id\/simpleImageView\"\r\n android:layout_marginTop=\"10dp\"\r\n android:orientation=\"vertical\">\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeCenter\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"CENTER\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeCenterCrop\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"CENTER CROP\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeCenterInside\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"CENTER INSIDE\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitCenter\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT CENTER\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitEnd\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT END\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitStart\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT START\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n\r\n <LinearLayout\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:orientation=\"horizontal\"\r\n android:weightSum=\"2\">\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeFitXY\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginRight=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"FIT XY\"\r\n android:textColor=\"#fff\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/scaleTypeMatrix\"\r\n android:layout_width=\"0dp\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginLeft=\"5dp\"\r\n android:layout_marginTop=\"5dp\"\r\n android:layout_weight=\"1\"\r\n android:background=\"#007\"\r\n android:text=\"MATRIX\"\r\n android:textColor=\"#fff\" \/>\r\n <\/LinearLayout>\r\n <\/LinearLayout>\r\n\r\n\r\n<\/RelativeLayout><\/pre>\n
\n
package example.abhiandriod.imageviewscaletypes;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity implements View.OnClickListener {\r\n\r\n ImageView simpleImageView;\r\n Button scaleTypeCenter, scaleTypeCenterCrop, scaleTypeCenterInside, scaleTypeFitCenter, scaleTypeFitEnd, scaleTypeFitStart, scaleTypeFitXY, scaleTypeMatrix;\r\n\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n \/\/initiate views\r\n simpleImageView = (ImageView) findViewById(R.id.simpleImageView);\r\n scaleTypeCenter = (Button) findViewById(R.id.scaleTypeCenter);\r\n scaleTypeCenter.setOnClickListener(this);\r\n scaleTypeCenterCrop = (Button) findViewById(R.id.scaleTypeCenterCrop);\r\n scaleTypeCenterCrop.setOnClickListener(this);\r\n scaleTypeCenterInside = (Button) findViewById(R.id.scaleTypeCenterInside);\r\n scaleTypeCenterInside.setOnClickListener(this);\r\n scaleTypeFitCenter = (Button) findViewById(R.id.scaleTypeFitCenter);\r\n scaleTypeFitCenter.setOnClickListener(this);\r\n scaleTypeFitEnd = (Button) findViewById(R.id.scaleTypeFitEnd);\r\n scaleTypeFitEnd.setOnClickListener(this);\r\n scaleTypeFitStart = (Button) findViewById(R.id.scaleTypeFitStart);\r\n scaleTypeFitStart.setOnClickListener(this);\r\n scaleTypeFitXY = (Button) findViewById(R.id.scaleTypeFitXY);\r\n scaleTypeFitXY.setOnClickListener(this);\r\n scaleTypeMatrix = (Button) findViewById(R.id.scaleTypeMatrix);\r\n scaleTypeMatrix.setOnClickListener(this);\r\n }\r\n\r\n @Override\r\n public void onClick(View view) {\r\n switch (view.getId()) {\r\n case R.id.scaleTypeCenter:\r\n simpleImageView.setScaleType(ImageView.ScaleType.CENTER);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeCenter\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeCenterCrop:\r\n simpleImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeCenterCrop\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeCenterInside:\r\n simpleImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeCenterInside\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitCenter:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitCenter\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitEnd:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_END);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitEnd\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitStart:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_START);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitStart\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeFitXY:\r\n simpleImageView.setScaleType(ImageView.ScaleType.FIT_XY);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeFitXY\", Toast.LENGTH_SHORT).show();\r\n break;\r\n case R.id.scaleTypeMatrix:\r\n simpleImageView.setScaleType(ImageView.ScaleType.MATRIX);\r\n Toast.makeText(getApplicationContext(), \"ScaleTypeMatrix\", Toast.LENGTH_SHORT).show();\r\n break;\r\n }\r\n \r\n }\r\n}<\/pre>\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"