Using constraints in a ConstraintLayout, I have created a layout as following:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="2dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
>
<ImageView
android:id="#+id/post_photo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:srcCompat="#drawable/ic_photo"
/>
<ImageButton
android:id="#+id/create_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="#+id/post_photo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/share_button"
app:srcCompat="#drawable/ic_action_share"
android:scaleType="fitCenter"
/>
<ImageButton
android:id="#+id/share_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="#+id/post_photo"
app:layout_constraintLeft_toRightOf="#+id/create_button"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#drawable/ic_action_share"
android:scaleType="fitCenter"
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
My problem is that lower ImageButtons are not shown whenever height of image in ImageView is more than its width. If we hardcode a height (some kind of sufficient) on ConstraintLayout then buttons can get some height depending on the height of ImageView. I believe that the problem is when View Bounds are adjusted for ImageView. How can I overcome this situation?
wrap_content only asks the widget to measure itself, but won't limit its expansion against eventual constraints
add following attribute to your ImageView which is used when parent constraint layout set to wrap_content then there will be height measuring problem so overcome that
app:layout_constraintHeight_default="wrap"
and also set ImageView height to 0dp
<ImageView
android:id="#+id/post_photo"
android:layout_width="0dp"
app:layout_constraintHeight_default="wrap"
android:layout_height="0dp"
android:layout_marginTop="4dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:srcCompat="#drawable/ic_photo"
/>
for information same approach we can use in width problem
just replace width to 0dp and following property
app:layout_constraintWidth_default="wrap"
If you want to prevent this situation, you need to define percent or (dp) value.
1 - You can use maxWidth / maxHeight on ConstraintLayout like
<ImageView
...
android:maxHeight="192dp"
/>
2 - Also you can use Guideline like
<Guideline
id="guideLineMaxHeightOfImage"
guideLinePercent="0.4"
orientation="horizontal"
>
ImageView
<ImageView
...
app:layout_constraintTop_toTopOf="#+id/guideLineMaxHeightOfImage"
/>
Related
New to XML and was trying practising an XML lab (https://github.com/harshitha-akkaraju/layoutlab)
What confuses me is that even though the width of the button is 0dp, it is if the width was wrap_content. I know that 0dp is the equivalent of "MATCH_CONSTRAINT" in a ConstraintLayout. However, doesn't that mean that 0dp should fill as much space as possible?
Is it because the button only has a constraint defined on its left side, which is why 0dp = wrap_content in this case?
0dp, which is the equivalent of "MATCH_CONSTRAINT
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:text="1"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Image of the Button Layout
In order for the button to match the parent layout, you need to set two opposite constraints....as in
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
<!-- Since you are setting width as 0dp, i presume you want the width to match... -->
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:text="1"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
<!-- You must add here another constraint to the right -->
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>```
You are missing this line app:layout_constraintRight_toRightOf="parent"
in your button 0dp works with parent when
app:layout_constraintLeft_toLeftOf="parent" and app:layout_constraintRight_toRightOf="parent"
then width should be 0dpand when
app:layout_constraintBottom_toBottomOf="parent" and app:layout_constraintTop_toTopOf="parent"
then height should be 0dp
I'm trying to make an items with just an image and a title below it in a recycler view. For some reason my text view's that hold the title are getting cut off on the bottom.
See below:
I've tried setting the text view height to wrap_content but that will result in my images being pushed up and not consistently the same size across all items. Also I find it odd that the text view size & positioning doesn't even match the preview layout in android studios.
Any suggestions?
My view holder layout:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/thumbnail_frame"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#color/dark_red"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Why did you created a linear layout inside a constraint layout?
You can remove linear layout an put your ImageView and TextView directly inside constraint layout and constraint TextView top to bottom of ImageView
and instead of using weight you can use layout_constraintHeight_percent just like below:
app:layout_constraintHeight_percent="0.2"
But I recommend you not to use height_percant or weight and also avoid sizing the views width/height statically. it can cause problems on different screens
I think its better to remove LinearLayout and also remove weight and add this line to your ImageView:
app:layout_constraintDimensionRatio="H,5:4"
Write your TextView and ImageView like below:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/thumbnail_frame"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/dark_red"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#id/thumbnail_item"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I believe I have found the problem and it's the weight you're using in your LinearLayout.
Depending on the ImageView height (80) you have determined TextView height (20). Because of that TextView cannot wrap, so text is being cut from the bottom.
Solution 1: remove weight in linear layout and set image height to fixed height, and TextView to wrap_content. Just like below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/thumbnail_item"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/dark_red"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/thumbnail_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:padding="8dp"
android:text="#string/title_place_holder"
android:textColor="#color/white"
android:textSize="12sp" />
</LinearLayout>
Solution 2: You can remove padding in the TextView or set it to smaller one, but the problem might reoccur on smaller screens.
Make the weight of imageview to 60 and the weight of textview to 40. In short keep adjusting the weight attr value in order to solve your problem. Use thia solution only when you really need weight attr in your code. Or else, just remove weight and set the height to wrap_content for both of them.
I am having an issue with ConstraintLayout and a specific view.
What is wanted : 3 imageviews in a 6:5 ratio, the first one is bigger with the two other stacked vertically on its right. The whole view has a maxed width of 414dp.
When trying to set the horizontal chain style at packed, the views don't display at all over 414dp.
There is no issue under that limit or with a chain style other than packed.
Here are
the layout :https://gist.github.com/xcaEi/ba46e5e8c2d1d5682e1a5f3221325ed0
screenshots of the problem : https://imgur.com/a/0uZckj0
Am I missing something ?
To achieve what you want, I believe you must nest a ConstraintLayout inside another ConstraintLayout.
The problem is that you can't have both app:layout_constraintWidth_percent and layout_constraintWidth_max defined on the same view; each of these is one option for how to constrain a view set to "match constraints".
MATCH_CONSTRAINT dimensions (Added in 1.1)
When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available:
layout_constraintWidth_min and layout_constraintHeight_min: will set the minimum size for this dimension
layout_constraintWidth_max and layout_constraintHeight_max: will set the maximum size for this dimension
layout_constraintWidth_percent and layout_constraintHeight_percent: will set the size of this dimension as a percentage of the parent
(From https://developer.android.com/reference/android/support/constraint/ConstraintLayout)
You can work around this by having your inner ConstraintLayout specify its maximum width, and then have the ImageView children of that inner ConstrainLayout specify their percentages.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#eee"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_max="414dp">
<ImageView
android:id="#+id/main_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#caf"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintDimensionRatio="H,6:5"
app:layout_constraintWidth_percent="0.666"/>
<ImageView
android:id="#+id/second_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#fac"
app:layout_constraintTop_toTopOf="#+id/main_imageview"
app:layout_constraintLeft_toRightOf="#+id/main_imageview"
app:layout_constraintBottom_toTopOf="#+id/third_imageview"
app:layout_constraintDimensionRatio="W,6:5"/>
<ImageView
android:id="#+id/third_imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:background="#afc"
app:layout_constraintTop_toBottomOf="#+id/second_imageview"
app:layout_constraintLeft_toRightOf="#+id/main_imageview"
app:layout_constraintBottom_toBottomOf="#+id/main_imageview"
app:layout_constraintDimensionRatio="W,6:5"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
I think this is your need 3 imageview first one bigger. You can change layout_constraintHorizontal_weight properties check below
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView9"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toStartOf="#+id/imageView11"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/imageView9"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_orange_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="6:5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/imageView10"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I've encountered a problem while trying to create a layout with ConstraintLayout 1.1.0-beta4.
My scenario is as follows: A ConstraintLayout wrapped in a ScrollView, with layout_height="wrap_content" and layout_width="match_parent". In it, I have a horizontal chain of three child views. They are supposed to fill out the full width of the screen, and have their height determined according to their width with an aspect ratio of 3:4. When the ConstraintLayout has layout_height="match_parent" applied, everything works fine, but with wrap_content, the size of the child views can't be computed. I expected it to work the same way.
Here is my XML:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingTop="16dp"
>
<View
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#android:color/black"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="#+id/button_1"
app:layout_constraintEnd_toStartOf="#+id/button_3"
app:layout_constraintStart_toEndOf="#+id/button_1"
app:layout_constraintTop_toTopOf="#+id/button_1"
/>
<View
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="#+id/button_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_2"
app:layout_constraintTop_toTopOf="#+id/button_1"
/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Why can ConstraintLayout not compute the sizes of the child views in this case? Am I missing something?
Thank you in advance.
Looks like constraintLayout does have issues chaining views with dimension ratios. If you're fine with a work around, create extra invisible view with increased ratio and constrain top/bottom of views to it:
<View
android:id="#+id/viewButtonConstraint"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF00FF"
app:layout_constraintDimensionRatio="W,3:12"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#android:color/black"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/viewButtonConstraint"
app:layout_constraintBottom_toBottomOf="#+id/viewButtonConstraint"
/>
...etc
I want to show an icon in the top right corner of an image. Also, it should be slightly offset. And finally, the combination of both should be scalable, so that doubling the total width results in the image as well as the icon having thwice the original width. Of course, the aspect ration should be kept so that the height doubles as well.
As the description of that actually simple problem is quite complex, here's an artful drawing illustrating the subject :)
So, let's say I have a RecyclerView with a GridLayout where each image tile has a width of 200dp. Then, the gray area should have a width and height of 200dp, the orange icon has a width and height of 50dp, the offset of the icon to the blue image's border is 25dp and so on.
And if I decide to double the number of columns in my GridLayout, the gray area has a width and height of 100dp etc.
Here's what I tried so far:
I started out with a FrameLayout which works fine for the simplest cases but becomas problematic as soon you want to specify dimensions with percentages.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="50dp"
android:adjustViewBounds="true"
app:srcCompat="#drawable/blueShip200x200" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_marginRight="25dp"
android:layout_marginTop="25dp"
app:srcCompat="#drawable/new50x50" />
</FrameLayout>
Then, I learned about the PercentFrameLayout that has been introduced with the support library, recently - and has already been deprecated: https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html
So now the advice is to use ConstraintLayout instead (see link above) where you can use helper guidelines that allow you to define their position with percentages.
Fortunately, the docs give an example how to replace the PercentFrameLayout which works great if the gray box has a fixed width and height:
<android.support.constraint.ConstraintLayout
android:layout_width="200dp"
android:layout_height="200dp">
<android.support.constraint.Guideline
android:id="#+id/left_image_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".25" />
<android.support.constraint.Guideline
android:id="#+id/right_image_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".75" />
<android.support.constraint.Guideline
android:id="#+id/top_image_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".25" />
<android.support.constraint.Guideline
android:id="#+id/bottom_image_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".75" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/bottom_image_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_image_guideline"
app:layout_constraintRight_toRightOf="#+id/right_image_guideline"
app:layout_constraintTop_toTopOf="#+id/top_image_guideline"
app:srcCompat="#drawable/blueShip200x200" />
<android.support.constraint.Guideline
android:id="#+id/left_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".625" />
<android.support.constraint.Guideline
android:id="#+id/right_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".875" />
<android.support.constraint.Guideline
android:id="#+id/top_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".125" />
<android.support.constraint.Guideline
android:id="#+id/bottom_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".375" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/bottom_icon_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_icon_guideline"
app:layout_constraintRight_toRightOf="#+id/right_icon_guideline"
app:layout_constraintTop_toTopOf="#+id/top_icon_guideline"
app:srcCompat="#drawable/new50x50" />
</android.support.constraint.ConstraintLayout>
But if you do not specifiy fixed dimensions... it doesn't.
Adapting the following lines from the FrameLayout example (layout_width, layout_height, adjustViewBounds) results in the ConstraintLayout getting a height of 0.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="#+id/bottom_image_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_image_guideline"
app:layout_constraintRight_toRightOf="#+id/right_image_guideline"
app:layout_constraintTop_toTopOf="#+id/top_image_guideline"
app:srcCompat="#drawable/blueShip200x200" />
I hope it's possible to solve this problem non-programmatically with some changes to the layout file. Basically, it's just adjustViewBounds that is not working with the ImageView's width and height set to match_constraint (0dp).
Also, if possible, I'd like to stick with ConstraintLayout. Maybe one can work around the problem using LinearLayouts with Spaces and layout_weight - I haven't tried that yet.
Thanks!
you can create a layout using a constraint layout.
first you split the layout into 5x5 using some views as a guide.
the key is to use the horizontal and vertical weights.
<!--GUIDE LINE-->
<TextView
android:id="#+id/guide_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/primary_light"
android:text="25%"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="25"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guide_2"
app:layout_constraintTop_toBottomOf="#+id/guide_2"
app:layout_constraintVertical_weight="25" />
<TextView
android:id="#+id/guide_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/primary_light"
android:text="37.5%"
app:layout_constraintBottom_toTopOf="#id/guide_1"
app:layout_constraintHorizontal_weight="37.5"
app:layout_constraintLeft_toRightOf="#id/guide_1"
app:layout_constraintRight_toLeftOf="#id/guide_3"
app:layout_constraintTop_toBottomOf="#id/guide_3"
app:layout_constraintVertical_weight="37.5" />
<TextView
android:id="#+id/guide_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/primary_light"
android:text="12.5%"
app:layout_constraintBottom_toTopOf="#id/guide_2"
app:layout_constraintHorizontal_weight="12.5"
app:layout_constraintLeft_toRightOf="#id/guide_2"
app:layout_constraintRight_toLeftOf="#id/guide_4"
app:layout_constraintTop_toBottomOf="#id/guide_4"
app:layout_constraintVertical_weight="12.5" />
<TextView
android:id="#+id/guide_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/primary_light"
android:text="12.5%"
app:layout_constraintBottom_toTopOf="#id/guide_3"
app:layout_constraintHorizontal_weight="12.5"
app:layout_constraintLeft_toRightOf="#id/guide_3"
app:layout_constraintRight_toLeftOf="#id/guide_5"
app:layout_constraintTop_toBottomOf="#id/guide_5"
app:layout_constraintVertical_weight="12.5" />
<TextView
android:id="#+id/guide_5"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/primary_light"
android:text="12.5%"
app:layout_constraintBottom_toTopOf="#id/guide_4"
app:layout_constraintHorizontal_weight="12.5"
app:layout_constraintLeft_toRightOf="#id/guide_4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="12.5" />
after you create the guide, you can put the images you want with the guide line...
the two views would be something like the following.
<TextView
android:text="MAIN ICON"
android:textColor="#color/icons"
android:gravity="center"
android:textSize="60sp"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="#id/guide_2"
app:layout_constraintBottom_toBottomOf="#id/guide_2"
app:layout_constraintTop_toTopOf="#id/guide_3"
app:layout_constraintRight_toRightOf="#id/guide_3"
android:background="#color/primary"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#id/guide_4"
app:layout_constraintRight_toRightOf="#id/guide_4"
app:layout_constraintBottom_toBottomOf="#id/guide_3"
app:layout_constraintLeft_toLeftOf="#id/guide_3"
android:background="#color/accent"
android:text="NEW"
android:gravity="center"
android:textSize="40sp"
android:textColor="#color/icons"/>
FIxing dimension of small image will help you attain that kind of UI. Please look into code below
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="25dp"
android:paddingRight="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/image"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="#drawable/blue200" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toTopOf="#+id/image"
app:layout_constraintRight_toRightOf="#+id/image"
app:srcCompat="#drawable/new50x50" />
</android.support.constraint.ConstraintLayout>
What you want to accomplish can be done with some recent additions to ConstraintLayout. I did the following with version 1.1.0-beta3. See the documentation here.
With later releases of ConstrainLayout, we can now specify the width and height of a view as a percentage of the containing view's width/height. The blue box is sized at 50% of the width/height of the gray area and centered.
The orange box is sized at 25% of the container's width and height. It is centered on the top right corner of the blue box by setting its start and end sides to the end of the blue box and its top and bottom to the top.
The layout will accommodate all sizes but, as you mention, the aspect ratios must be respected.
<android.support.constraint.ConstraintLayout
android:layout_width="200dp"
android:layout_height="200dp">
<ImageView
android:id="#+id/boat"
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:src="#drawable/boat"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/new_square"
app:layout_constraintBottom_toTopOf="#id/boat"
app:layout_constraintEnd_toEndOf="#id/boat"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintStart_toEndOf="#id/boat"
app:layout_constraintTop_toTopOf="#id/boat"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0..25" />
</android.support.constraint.ConstraintLayout>
Here are the images I used: