Android image scaling Identical to the background image in a constraint layout
In my App I have one map image and image views around it containing map pieces.In any device screen the map pieces should be equal in size to its respective part in the map image.map image is also included in an Image view within the constraint layout.
How do I make the images around the map image identical/equal size to the ones in the main image. I created the images set using the "Batch Drawable Import" plugin.When I put the images to the drawable-xxhdpi drawable-xhdpi drawable-hdpi drawable-ldpi folders and they show bigger or smaller pieces when running on devices.
Those Image pieces will be dragged and dropped to the map view which finally creates a map.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/parentcl"
tools:context=".Act2_1">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/x2"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/imageView35"
app:layout_constraintVertical_bias="0.498" />
<ImageView
android:id="@+id/imageView33"
android:layout_width="163dp"
android:layout_height="0dp"
android:layout_marginBottom="38dp"
android:layout_marginEnd="368dp"
android:layout_marginTop="92dp"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/x1" />
</android.support.constraint.ConstraintLayout>
Above is the test code I am trying.BG image size is 2048px X 1496px and the red box size within it is 400px X 300px.Image piece in outer image view is 400px X 300px. I want the outer image size to be identical to the size of the image within the background image. What is the best solution to achieve the above requirement. I tried placing images inside all the drawable folder within the app but did not succeed. Then I added a large scale images only inside drawable and drawable-nodpi-v4 folder which also did not give a good result.
android android-drawable image-resizing android-constraintlayout edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
asked Nov 13 '18 at 1:35
KapilaKapila
12
add a comment |
In my App I have one map image and image views around it containing map pieces.In any device screen the map pieces should be equal in size to its respective part in the map image.map image is also included in an Image view within the constraint layout.
How do I make the images around the map image identical/equal size to the ones in the main image. I created the images set using the "Batch Drawable Import" plugin.When I put the images to the drawable-xxhdpi drawable-xhdpi drawable-hdpi drawable-ldpi folders and they show bigger or smaller pieces when running on devices.
Those Image pieces will be dragged and dropped to the map view which finally creates a map.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/parentcl"
tools:context=".Act2_1">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/x2"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/imageView35"
app:layout_constraintVertical_bias="0.498" />
<ImageView
android:id="@+id/imageView33"
android:layout_width="163dp"
android:layout_height="0dp"
android:layout_marginBottom="38dp"
android:layout_marginEnd="368dp"
android:layout_marginTop="92dp"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/x1" />
</android.support.constraint.ConstraintLayout>
Above is the test code I am trying.BG image size is 2048px X 1496px and the red box size within it is 400px X 300px.Image piece in outer image view is 400px X 300px. I want the outer image size to be identical to the size of the image within the background image. What is the best solution to achieve the above requirement. I tried placing images inside all the drawable folder within the app but did not succeed. Then I added a large scale images only inside drawable and drawable-nodpi-v4 folder which also did not give a good result.
android android-drawable image-resizing android-constraintlayout edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
asked Nov 13 '18 at 1:35
KapilaKapila
12
Hi and welcome to SO. Your posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example. For more information, please see How to Ask and take the Tour.
– quant
Nov 13 '18 at 1:49
replace android:background with app:srcCompat and android:layout_width and layout_height should "wrap_content" for both images and use the android:scaleType="centerInside" hope this may help you
– Zahoor Saleem
Nov 13 '18 at 17:09
Thank you for your respond Saleem.But that didnt work. What I need is set one image as the background for the entire app and place the small images/ image views on top of it. Their sizes should be equal/identical to the boxes in the bg image. When a user drag a small piece and drop on a box in the bg image for example a pop up will say correct matching.
– Kapila
Nov 14 '18 at 4:22
add a comment |
In my App I have one map image and image views around it containing map pieces.In any device screen the map pieces should be equal in size to its respective part in the map image.map image is also included in an Image view within the constraint layout.
How do I make the images around the map image identical/equal size to the ones in the main image. I created the images set using the "Batch Drawable Import" plugin.When I put the images to the drawable-xxhdpi drawable-xhdpi drawable-hdpi drawable-ldpi folders and they show bigger or smaller pieces when running on devices.
Those Image pieces will be dragged and dropped to the map view which finally creates a map.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/parentcl"
tools:context=".Act2_1">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/x2"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/imageView35"
app:layout_constraintVertical_bias="0.498" />
<ImageView
android:id="@+id/imageView33"
android:layout_width="163dp"
android:layout_height="0dp"
android:layout_marginBottom="38dp"
android:layout_marginEnd="368dp"
android:layout_marginTop="92dp"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/x1" />
</android.support.constraint.ConstraintLayout>
Above is the test code I am trying.BG image size is 2048px X 1496px and the red box size within it is 400px X 300px.Image piece in outer image view is 400px X 300px. I want the outer image size to be identical to the size of the image within the background image. What is the best solution to achieve the above requirement. I tried placing images inside all the drawable folder within the app but did not succeed. Then I added a large scale images only inside drawable and drawable-nodpi-v4 folder which also did not give a good result.
android android-drawable image-resizing android-constraintlayout edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
asked Nov 13 '18 at 1:35
KapilaKapila
12
In my App I have one map image and image views around it containing map pieces.In any device screen the map pieces should be equal in size to its respective part in the map image.map image is also included in an Image view within the constraint layout.
How do I make the images around the map image identical/equal size to the ones in the main image. I created the images set using the "Batch Drawable Import" plugin.When I put the images to the drawable-xxhdpi drawable-xhdpi drawable-hdpi drawable-ldpi folders and they show bigger or smaller pieces when running on devices.
Those Image pieces will be dragged and dropped to the map view which finally creates a map.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/parentcl"
tools:context=".Act2_1">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/x2"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/imageView35"
app:layout_constraintVertical_bias="0.498" />
<ImageView
android:id="@+id/imageView33"
android:layout_width="163dp"
android:layout_height="0dp"
android:layout_marginBottom="38dp"
android:layout_marginEnd="368dp"
android:layout_marginTop="92dp"
app:layout_constraintBottom_toTopOf="@+id/imageView35"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/x1" />
</android.support.constraint.ConstraintLayout>
Above is the test code I am trying.BG image size is 2048px X 1496px and the red box size within it is 400px X 300px.Image piece in outer image view is 400px X 300px. I want the outer image size to be identical to the size of the image within the background image. What is the best solution to achieve the above requirement. I tried placing images inside all the drawable folder within the app but did not succeed. Then I added a large scale images only inside drawable and drawable-nodpi-v4 folder which also did not give a good result.
android android-drawable image-resizing android-constraintlayout android android-drawable image-resizing android-constraintlayout edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
asked Nov 13 '18 at 1:35
KapilaKapila
12
edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
asked Nov 13 '18 at 1:35
KapilaKapila
12
edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
edited Nov 14 '18 at 8:36
Santhosh Joseph
523315
523315
asked Nov 13 '18 at 1:35
KapilaKapila
12
asked Nov 13 '18 at 1:35
KapilaKapila
12
asked Nov 13 '18 at 1:35
KapilaKapila
12
12
Hi and welcome to SO. Your posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example. For more information, please see How to Ask and take the Tour.
– quant
Nov 13 '18 at 1:49
replace android:background with app:srcCompat and android:layout_width and layout_height should "wrap_content" for both images and use the android:scaleType="centerInside" hope this may help you
– Zahoor Saleem
Nov 13 '18 at 17:09
Thank you for your respond Saleem.But that didnt work. What I need is set one image as the background for the entire app and place the small images/ image views on top of it. Their sizes should be equal/identical to the boxes in the bg image. When a user drag a small piece and drop on a box in the bg image for example a pop up will say correct matching.
– Kapila
Nov 14 '18 at 4:22
add a comment |
Hi and welcome to SO. Your posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example. For more information, please see How to Ask and take the Tour.
– quant
Nov 13 '18 at 1:49
replace android:background with app:srcCompat and android:layout_width and layout_height should "wrap_content" for both images and use the android:scaleType="centerInside" hope this may help you
– Zahoor Saleem
Nov 13 '18 at 17:09
Thank you for your respond Saleem.But that didnt work. What I need is set one image as the background for the entire app and place the small images/ image views on top of it. Their sizes should be equal/identical to the boxes in the bg image. When a user drag a small piece and drop on a box in the bg image for example a pop up will say correct matching.
– Kapila
Nov 14 '18 at 4:22
Hi and welcome to SO. Your posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example. For more information, please see How to Ask and take the Tour.
– quant
Nov 13 '18 at 1:49
Hi and welcome to SO. Your posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example. For more information, please see How to Ask and take the Tour.
– quant
Nov 13 '18 at 1:49
replace android:background with app:srcCompat and android:layout_width and layout_height should "wrap_content" for both images and use the android:scaleType="centerInside" hope this may help you
– Zahoor Saleem
Nov 13 '18 at 17:09
replace android:background with app:srcCompat and android:layout_width and layout_height should "wrap_content" for both images and use the android:scaleType="centerInside" hope this may help you
– Zahoor Saleem
Nov 13 '18 at 17:09
Thank you for your respond Saleem.But that didnt work. What I need is set one image as the background for the entire app and place the small images/ image views on top of it. Their sizes should be equal/identical to the boxes in the bg image. When a user drag a small piece and drop on a box in the bg image for example a pop up will say correct matching.
– Kapila
Nov 14 '18 at 4:22
Thank you for your respond Saleem.But that didnt work. What I need is set one image as the background for the entire app and place the small images/ image views on top of it. Their sizes should be equal/identical to the boxes in the bg image. When a user drag a small piece and drop on a box in the bg image for example a pop up will say correct matching.
– Kapila
Nov 14 '18 at 4:22
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272516%2fandroid-image-scaling-identical-to-the-background-image-in-a-constraint-layout%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272516%2fandroid-image-scaling-identical-to-the-background-image-in-a-constraint-layout%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi and welcome to SO. Your posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example. For more information, please see How to Ask and take the Tour.
– quant
Nov 13 '18 at 1:49
replace android:background with app:srcCompat and android:layout_width and layout_height should "wrap_content" for both images and use the android:scaleType="centerInside" hope this may help you
– Zahoor Saleem
Nov 13 '18 at 17:09
Thank you for your respond Saleem.But that didnt work. What I need is set one image as the background for the entire app and place the small images/ image views on top of it. Their sizes should be equal/identical to the boxes in the bg image. When a user drag a small piece and drop on a box in the bg image for example a pop up will say correct matching.
– Kapila
Nov 14 '18 at 4:22