I use ConstraintLayout, Guideline and ImageView together for responsive view. I am getting extra spacing on the top and bottom on ImageView. I tried android: adjustViewBounds and android: scaleType but it didn't work How can I clear it out?
Here is what it looks like:
Here is the code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/left_guideline"
app:layout_constraintGuide_percent=".20"
android:orientation="vertical"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_guideline"
app:layout_constraintGuide_percent=".80"
android:orientation="vertical"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
app:layout_constraintStart_toStartOf="#+id/left_guideline"
app:layout_constraintEnd_toEndOf="#+id/right_guideline"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logoo" />
</androidx.constraintlayout.widget.ConstraintLayout>
So, I used your layout:
Then added this to ImageView:
android:scaleType="centerCrop"
And this is the result:
So just add android:scaleType="centerCrop" in your imageView and that should do it.
If you want the view to take all space then, Could you try scaleType in your ImageView.
android:scaleType="fitXY"
ImageView
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
app:layout_constraintStart_toStartOf="#+id/left_guideline"
app:layout_constraintEnd_toEndOf="#+id/right_guideline"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logoo"
android:scaleType="fitXY"
/>
If this is not what you want, then please comment.
Related
I am using a ConstraintLayout and I want to make the following constraint:
I have made it using a lot of margin and also using a guideline. I would like to know which situation is more efficient:
Situation 1 using layout_marginEnd(230dp):
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/view1"
app:layout_constraintBottom_toBottomOf="#id/view1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view1"
android:layout_marginEnd="230dp"/>
<View
android:id="#+id/view1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.05"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Situation 2 using GuideLine:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/view1"
app:layout_constraintBottom_toBottomOf="#id/view1"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toEndOf="#id/view1"
/>
<View
android:id="#+id/view1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.05"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.44" />
</androidx.constraintlayout.widget.ConstraintLayout>
Which situation is better for performance and it will be better to use, situation one with almost 250dp of layout_marginEnd or situation 2 with a vertical guideline?
Thanks for the help.
I suggest that Margin and guideline are just for critical conditions
If you want exact position like in pic then just remove end end constraint from textview and make your textview wrap content thats all
I need to make my splash screen fit all the devices. It works perfect on nexus but on other device the animation is a little bit different. Here is my splash screen activity. I think the problem is that axes Y and X will work different on other device
logo = findViewById(R.id.logo);
splashImg = findViewById(R.id.img);
lottieAnimationView = findViewById(R.id.lottie);
splashImg.animate().translationY(-2000).setDuration(1000).setStartDelay(4000);
logo.animate().translationY(1100).setDuration(1000).setStartDelay(4000);
lottieAnimationView.animate().translationY(1400).setDuration(1000).setStartDelay(4000);
and in the splash XML
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:layout_conversion_absoluteHeight="731dp"
tools:layout_conversion_absoluteWidth="411dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="900dp"
android:src="#drawable/shafaqat"
app:layout_constraintVertical_bias="0"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/logo"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/logo"
app:layout_constraintVertical_bias=".1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/lottie"
app:lottie_autoPlay="true"
android:layout_width="wrap_content"
android:layout_height="200dp"
app:layout_constraintVertical_bias="0"
app:lottie_rawRes="#raw/splash"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
i would use weights and fill content views
if i want to all screen view, use fill-content in size attribute, and if you want your logo in the center, i used views with height attribute to spacing like bootstrap
i would put three views and each one with the same weight, and in the middle view i would put the image view with fill-content size, this is my way to make responsive views with the same resource keeping proportions
this is an example about how to use weights
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
I have an imageview and I want to place a button for closing/deleting the image from the imageView just like it's done on Tinder profile pics. The problem is that it's always placed behind it not matter what I do.
I have a RelativeLayout as container for the imageview and imagebutton
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:id="#+id/close1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_close"
android:background="#color/white"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
<ImageView
android:id="#+id/photo1"
android:layout_width="match_parent"
android:layout_height="115dp"
android:layout_marginHorizontal="5dp"
android:background="#drawable/rounded_rect_primary"
android:elevation="5dp"
android:scaleType="fitXY"
android:src="#drawable/icon_upload" />
</RelativeLayout>
I've tried something like this too:
close1.bringToFront();
close2.bringToFront();
close3.bringToFront();
I'd like to understand how it works, what exactly defines what comes in front and behind?
Your button always shown behind the image because Android render the XML code from top to bottom. So your button get rendered first, then it get overlay by image.
You should try to put ImageButton after ImageView. And i recommend you to use ConstraintLayout
It should be like this.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/photo1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded_rect_primary"
android:scaleType="fitXY"
android:src="#drawable/icon_upload"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/close1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_close"
android:background="#color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How to make View FrameLayout fill all remaining space in ConstraintLayout
I have xml like:
<ImageView
android:background="#FF0000"
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_header"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintWidth_default="spread"/>
<FrameLayout
android:background="#00FF00"
app:layout_constraintHeight_default="spread"
app:layout_constraintWidth_default="wrap"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/footer"
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:background="#FFFF00"
android:orientation="vertical"
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintWidth_default="spread"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton
style="?borderlessButtonStyle"
android:id="#+id/btn_ar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="0dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_ar"/>
</LinearLayout>
There are header, footer and FrameLayout in the middle I want to make FrameLayout to fill all remaining space.
I don't understand, which properties I have to use to expand FrameLayout. Please help me!
EDIT: Or any solution with different layout.
This is really simple. To make any view fill up the available space either horizontally or vertically, just set the layout_width/layout_height to 0dp according to your need.
This work, go with ConstraintLayout because has better performance.
<?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">
<ImageView
android:background="#FF0000"
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_header"
android:minHeight="30dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintWidth_default="spread"/>
<FrameLayout
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FF00"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/btn_ar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintWidth_default="wrap">
</FrameLayout>
<ImageButton
android:id="#+id/btn_ar"
style="?borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/ic_ar"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
<FrameLayout
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FF00"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/btn_ar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintWidth_default="wrap">
</FrameLayout>
This should work.
Explanation:
All you want is to make the top of this FrameLayout constraint to the bottom of the header, and the bottom of this FrameLayout constraint to the top of the footer.
After setting all the constraints, you still need to set the layout param of FrameLayout to match the constraint. In order to do this, you can try to set layout_height to 0dp. This will make the height of FrameLayout have the effect of match_constraint.
For more detail, you can check this doc: https://developer.android.com/reference/android/support/constraint/ConstraintLayout (just search the keyword match constraint and you will find that block), or simply check this similar answer: Set width to match constraints in ConstraintLayout
I have a problem with correct display of ImageView. I want to display ImageView inside ConstraintLayout. On preview it looks exactly as i need, but when i'm starting it on device it looks completly dirrerent. This layout is places inside recycle view. What is wrong with this code?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/promotionImageLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintHeight_default="spread"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/promotionImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#mipmap/ic_start_promotion"
android:background="#mipmap/ic_start_promotion"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHeight_min="150dp" />
<ImageView
android:id="#+id/fadeGradientImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/fade_image_background" />
<TextView
android:text="Sample title"
android:textSize="16sp"
android:textStyle="bold"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="6dp"
android:textColor="#ffffff"
android:id="#+id/promotionNameTextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:paddingBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/promotionDescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:layout_marginTop="12dp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:text="Sampe description" />
</LinearLayout>
EDIT: Deep explanation:
I want to create row for RecycleView. Each row have to contains image, title and description. Title have to be in the left bottom corner of the image. Description have to be below the image. After that i have to put gradient (black in the bottom) into the image. Screen with "Preview" is exactly what i need.
EDIT2: Everything with this layout is ok. It is working as expected, i forget that i made some changes in kotlin code... Sory for problem.
First things first, every view should apply the attribute rules of its parent ViewGroup. ConstraintLayout doesn't support match_parent. It supports the 0dp value which means "match constraint". This way the view will expand to fill the constraint bounded space.
Next, ConstraintLayout was created to achieve a flat view hierarchy for better layout performance. So, never nest it inside a LinearLayout as it has the chains feature to get the same behavior in a more flexible way. Plus, you can achieve the structure with a ConstraintLayout at the top level .
Another thing, If you are going to define the same margin in all directions, you can just use layout_margin.
Finally, you have overdraw problems. ConstraintLayout is flexible enough to allow us to position views as backgrounds and help us avoid overlapped backgrounds.
Here's a solution:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/promotion_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#mipmap/ic_start_promotion"
app:layout_constraintHeight_min="150dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/shadow"
android:layout_width="0dp"
android:layout_height="80dp"
android:adjustViewBounds="true"
android:background="#drawable/fade_image_background"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/promotion_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Sample title"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:padding="12dp"
android:text="Sampe description"
android:textSize="13sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/promotion_image" />
</android.support.constraint.ConstraintLayout>
Try it. Hope this helps!
First of all, trying to write more presicely what do you want? Display image view inside layout it's somthing common words. As for your code, beside you don't have any constraints. You have strange view height, for second ImageView:
android:layout_height="match_parent"
It may overlay all other children view, it's very strange parameter.