I created a ViewPager and put it inside of ConstraintLayout:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green">
<ViewPager
android:id="#+id/teaser_view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:background="#color/blue"
android:currentPage="#={viewModel.currentItem}"
bind:adapter="#{viewModel.adapter}"
bind:withAnimation="#{viewModel.changeWithAnimation}"
bind:layout_constraintStart_toStartOf="parent"
bind:layout_constraintTop_toTopOf="parent"
bind:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
and the layout of item inside of ViewPager is:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:background="#color/black"
bind:imageUrl="#{viewModel.imagePath}"
bind:layout_constraintDimensionRatio="3:1"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
as you see, every view or it's parent has different background. And if I run the app, I see:
the background is red, it means, the ConstraintLayout in ViewPager item is stretched to the whole height of screen despite wrap_content.
Anybody knows, how to shrink the item to the size of the image inside?
P.S.: I use ConstraintLayout here, because I need to keep the image size in aspect ratio "3:1"
Set all constraints to parent
then use 0dp in height or width instead of `wrap_content'
Related
I have a horizontal scrolling view pager. I set child items width to match_parent. But im getting them wrap_content instead. This view should be centred by gravity but parent's FrameLayout is cropped to child's width
Items code:
<FrameLayout 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">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/exo_player"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:use_controller="false" />
<ImageView
android:id="#+id/sound"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_gravity="bottom|right"
android:layout_margin="13dp"
android:src="#drawable/icon_sound_off_active" />
</FrameLayout>
I think the issue might be related to the resolution of the video you being played, rather than the view matching its parent's width.
I have a constraint layout and inside a linear layout that looks like a bar that is constrained to the bottom. Besides I have an item (called SwipeFlingAdapterView) that I would like to take the remaining space, meaning to start from the top, and to go all the way down until the top of the linear layout bar:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".fragments.SwipeFragment">
<LinearLayout
android:id="#+id/likeDislikeBar"
android:layout_width="match_parent"
android:layout_height="#dimen/like_dislike_height"
android:gravity="bottom"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton
android:id="#+id/dislikeButton"
android:layout_width="0dp"
android:layout_height="#dimen/like_dislike_button_height"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/dislike"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"/>
<ImageButton
android:id="#+id/likeButton"
android:layout_width="0dp"
android:layout_height="#dimen/like_dislike_button_height"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/like"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"/>
</LinearLayout>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/likeDislikeBar"
app:rotation_degrees="15.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The views are constrained correctly, so theoretically if I remove the height="match_parent" from the SwipeFlingAdapterView, it will take the available space. Setting its height to "match_parent" will cause it to overlay the likeDislikeBar.
Is there a simple way to achieve this? Can I do it with a constraint layout?
It is not recommended to use match_parent for any child of the ConstraintLayout as stated in the official docs and tutorial. This applies to both vertical and horizontal dimensions.
In order to make the SwipeFlingAdapterView use all available height between the constraints you need to set its android:layout_height to 0dp (to match constraints).
You need to remove
app:layout_constraintEnd_toEndOf="parent"
Also ConstraintLayout seems like an overkill for such a simple layout.
RelativeLayout is pretty sufficient here. You can set likeDislikeBar to have layout_alignParentBottom and SwipeFlingAdapterView to have layout_alignParentTop and android:layout_above="#id/likeDislikeBar" in this case.
So I have a layout with a ScrollView. When I test my code, the ViewPager-heigth jumps from a reasonable value (1845) to very small (so fast the eye can't see). If I switch the layout_height of the ViewPager to wrap_content the height jumps to 0.
Aditionally, when the ViewPager has a heigth > 0, the top half of it is outside the Screen and only the bottom half is visible.
Clearly I'm doing something wrong here:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorDeadBackground"
android:fillViewport="true">
<LinearLayout
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:outlineProvider="bounds"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="2dp"
app:cardCornerRadius="6dp">
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager_pics"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.finder.ViewPagerIndicator.LinePageIndicator
android:id="#+id/indicator"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="4dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
app:strokeWidth="2dp"
app:unselectedColor="#88888888"
app:selectedColor="#color/colorWhite"/>
</androidx.cardview.widget.CardView>
...
If I set the height to a fixed value (either programatically or in the xml) the problem persists, that only the top half of the ViewPager is seen. Even the preview Window says its only half on the screen:
you are setting the CardView height and ViewPager height both on match_parent, which will cause an issue in visibitily , try to set a fixed size to height for both of them !
To get rid of the weird offset thing (that the ViewPager starts obove the screen), I had to remove the android:layout_gravity="center" from the Linearlayout. No idea why, if someone explains that to me, that would be dope. Probably has soemthing to do, that I used android:layout_gravity="center" twice in the Linearlayout and in the CardView.
Then I still ahd to set the height of the ViewPager programatically, so that the height isn't 0. No idea why either, doesn't matter if I changed match_parent to wrap_content anywhere.
I am facing a problem with setting background image for my app. I have linear layout with two imageviews. One with logo and weight 1 and one with background image with weight 3. I want the second one to be always centered horizontally and have sides cropped in vertical orientation and bottom cropped in horizontal orientation. CENTER_CROP almost does the job but I want to have the top of my image drawn. I don't care about the bottom.
In this configuration vertical orientation is perfect but horizontal cuts the top of image and I want the top to be always visible. Bottom can be cropped
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="50dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/masters_logo"
android:id="#+id/imageView" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/masters_login_background"/>
</LinearLayout>
That's what I want to achieve.
Vertical orientation:
Horizontal orientation:
If you want to set background into your login screen, you should add android:background="#drawable/masters_login_background" attribute into your root LinearLayout.
Otherwise, you should use, for example, RelativeLayout as root element and add inside this your ImageView as top element, smth like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/masters_login_background"/>
<!-- other code here -->
</RelativeLayout>
I had to edit the ans as I understood your question wrongly. Please use the below code. This will postion your bg img in the background and logo above the bg img.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/masters_login_background"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="50dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/masters_logo"
android:id="#+id/imageView" />
</LinearLayout>
In my layout I have a FrameLayout which contains 2 ImageViews. One ImageView is shown at a time and the change between ImageViews is done through 3D Rotation animation.
<FrameLayout
android:id="#+id/animContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<ImageView
android:id="#+id/picture1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/malware" />
<ImageView
android:id="#+id/picture2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/browsing"
android:visibility="gone" />
</FrameLayout>
The problem with my xml is that it leaves some empty space above and below the ImageView in the FrameLayout even though I have not specified any top or bottom margin/padding to it.
The ImageViews I'm using in the FrameLayout are of equal heights.
I want the height of the FrameLayout to be exactly same as the height of the ImageViews within it.
How do I achieve this?
Thank you.
EDIT:
Another thing I have observed is that in landscape mode the empty space is added to the left and right of the ImageViews and the width of the FrameLayout does not match with the width of the ImageViews.
How can have the FrameLayout width and height same as that of the ImageViews?
I think you need to use android:adjustViewBounds="true" -> in your ImageView's ... This will resize the imageview to the image inside and hopefully fix your problem.
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
I think I found a solution, in mine I had to place an image in the right hand corner for the delete icon but had to jump through hoops to get the edge of the X to line up with the top of the photo. fitCenter would create whitespace on top and bottom. fitStart worked like a charm.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/front_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:onClick="imageEditClicked"
android:src="#drawable/myimage"/>
<ImageView
android:id="#+id/front_right_x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#color/white"
android:layout_gravity="end|top"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/com_facebook_tooltip_black_xout" />
</FrameLayout>