I have an imageview in Linearlayout I want its width to be fill_parent. I want its height to be whatever the width ends up being. For example:
<LinearLayout 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="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:scaleType="centerCrop"
android:layout_margin="2dp"
tools:ignore="Suspicious0dp" />
</LinearLayout>
But it doesn't show the images in the android layout..
If I force change height of the imageview to 100dp in the code, it works, but I wonder why the height of image doesn't match to width even I wrote constraintDimensionRatio 1:1..
Thank you
You need to use ConstraintLayout as parent and set the dimension you want to make primary and another one to 0dp. app:layout_constraintDimensionRatio="H,1:1" means change height and make it 1:1 with width.
<androidx.constraintlayout.widget.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">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try adding weight to your imageview then you will get the height, otherwise you have to user wrap_content as height.
<LinearLayout 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="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_margin="2dp"
tools:ignore="Suspicious0dp" />
</LinearLayout>
<!--or if you don't want to use weight then user height = "wrap_content"-->
Related
I have this hierarchy of views
ScrollView
ConstraintLayout
ImageView
LinearLayout
TextView
TextView
TextView
...
What I want to achieve is that the ImageView takes like 65% percent of the visible screen vertically... but since the root view is a ScrollView, the ImageView takes 65% of the scrollable area... I want the ImageView takes 65% of visible area.
What would be the best way to proced in order to get something like this?
Source code:
<ScrollView
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:fillViewport="true"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/rain"
app:layout_constraintHeight_percent=".65"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/header">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AAAAAA"
android:textSize="50dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BBBB"
android:textSize="50dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CCCCC"
android:textSize="50dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="DDDDD"
android:textSize="50dp"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Thanks in advance
You can't set height as percentage when inside scrollview.
I have suggest you use Aspect ratio to match your requirements.
In your imageview set height 0dp & set dimension ratio for height.
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1" //change ratio as per your image ratio
I am trying to use layout_constraintDimensionRatio and layout_constraintWidth_percent attribute together in an ImageView, but I find that they cannot be able to work together.
My xml code is:
1.using layout_constraintWidth_percent only:
<?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="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>
its corresponding UI is:
layout_constraintWidth_percent_only.png
2.using layout_constraintWidth_percent and layout_constraintDimensionRatio:
<?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="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="w,2:1"
android:scaleType="fitXY"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>
its corresponding UI is:
layout_constraintWidth_percent_and_layout_constraintDimensionRatio.png
It's clear that when I use layout_constraintDimensionRatio, layout_constraintWidth_percent does not work.
What I really want is the width of the ImageView is 50% of its parent, and then the height of the ImageView is 50% of its width by using layout_constraintWidth_percent and layout_constraintDimensionRatio together.
Setting android:layout_height="0dp" to match constraint should help you achieve the desired result.
According to the documentation:
You can also use ratio if both dimensions are set to MATCH_CONSTRAINT (0dp). In this case the system sets the largest dimensions the satisfies all constraints and maintains the aspect ratio specified.
<?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="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>
Edit It seems app:layout_constraintWidth_percent does not provide actual horizontal constraints by itself to the View so the following will behave differently (first on has the right horizontal constraint set and the second does not):
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="H,2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"
app:srcCompat="#mipmap/ic_launcher" />
and
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="H,2:1"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"
app:srcCompat="#mipmap/ic_launcher" />
We are constraining the width based as percentage of the parent and then constraining the height based on width by using H in app:layout_constraintDimensionRatio="H,2:1". In the first case the view does not show and in the second it does in fact display correctly. It looks like if you want to use app:layout_constraintWidth_percent you need to add both horizontal constraints and then you can correctly constrain height based on width.
As the alternative to this approach you can use Guideline set at 50% of parent width to constrain your ImageView and then constrain height according to the ratio:
<?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="match_parent">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="H,2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"
app:srcCompat="#mipmap/ic_launcher" />
</android.support.constraint.ConstraintLayout>
I have an image, where the width is bigger than height. I want to fit the image in height with cropping the width. It should save ascpectRatio. The image should fit the image view.
I tried using android:scaleType="centerCrop"properties in XML but i did not get the same.
I tried
android:scaleType="fitXY"
android:adjustViewBounds="true"
Could you help me, please?
Below is the XML file.
<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"
tools:context="riskmatix.be.bouwcampusvirtualtour.home.HomeActivity">
<ImageView
android:id="#+id/background_image"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/day"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
try this,
you need to set the width and height to match_parent
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ati"
android:scaleType="centerCrop"
android:adjustViewBounds="true"/>
I have a LinearLayout, the direct child of a ScrollView, with two children. The first child can be almost any height (it's an Image), but the second child will have content that is much larger than the height of the viewport. I tried using layout_weight to achieve this, but that only resulted in the image being set to something like 1dp and the second child taking the rest, because the weights are only assigned to the remaining space.
How do I force the image to take up at least 40% of the screen space?
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:src="#drawable/my_image" />
<LinearLayout
android:id="#+id/prediction_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[really long text]" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You're missing android:adjustViewBounds="true" on your ImageView
Change your ImageView code to something like this
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:src="#drawable/my_image"
android:adjustViewBounds="true"
/>
my code is like below,when the FrameLayout layout_height from
android:layout_height="wrap_content"
to
android:layout_height="120dp"
the layout becomes
i hope the image's height will become 120dp, and keep the scale.
And the width of the layout will be followed by changes , as described wrap_content ,
but it only seems to adapt to the size of the original image .
what can i do?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_thumbnail_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/network_3" />
</FrameLayout>
How about specifying both the layout_width and layout_height to 120dp each? Like below
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_thumbnail_container"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="#color/black" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
</FrameLayout>