I am trying to place an ImageView inside my RelativeLayout that is positioned about 3/4 down the screen, but as soon as I add an ImageView to the RelativeLayout, the layout and the image get snapped to the top of the screen and I am not sure how to move it from there.
This is what it looks like whenever I add an ImageView to the RelativeLayout
But I want it positioned just above the "Ready" button
This is the .xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
This is happening because you don't understand RelativeLayout well enough.
All Views placed inside RelativeLayout will automatically be placed ontop of each other in the top left corner of the RelativeLayout.
If you want to move it, you need to 'align' it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
By aligning the ImageView to the bottom of the RelativeLayout, it should be placed above the Ready button IF your RelativeLayout ends right above the Ready button.
If you want to center the ImageView, you can add in android:layout_centerHorizontal="true".
You can read more about RelativeLayout here: https://developer.android.com/guide/topics/ui/layout/relative
However, there's 2 curious things about your xml code.
Why are you placing an ImageView of height 80dp inside a RelativeLayout of height 74dp? It's basically purposely looking for trouble.
Why are you using a RelativeLayout if you're using ConstraintLayout already? One of the main benefits of using a ConstraintLayout is so you don't have to use nested layouts. With the power and control of ConstraintLayout, you can actually rearrange almost all views to any design you want without nesting another layout like RelativeLayout inside of it.
I'm just guessing that you're using ConstraintLayout because you used app:layout_constraintStart_toStartOf in your RelativeLayout and these types of 'constraints' only exist for ConstraintLayout.
So if you're already using a ConstraintLayout and your Ready Button is inside the ConstraintLayout, you simply need to do:
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
You don't need a RelativeLayout to place the ImageView above the Ready Button.
wrap the relative layout and button with linear layout orientation vertical and adjust gravity as you like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="74dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/readyButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/player1FlipAvatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/title_activity_flip_coin_lobby"
tools:ignore="ContentDescription"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="40dp"
tools:src="#drawable/defaultavatarmale" />
</RelativeLayout>
</LinearLayout>
Related
I created the ListView item as Constraint Layout. It has one ImageView which is constrained to the parent(top and start) and one LinearLayout which is constrained to this ImageView(top to top, start to end, bottom to bottom). In the Java part, I do some logic that in some cases ImageView is GONE and other cases it will be Visible. There isn't any problem with this part. The layout is like that:
And code like that:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="#dimen/activity_horizontal_margin"
android:paddingVertical="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/image"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="#string/list_image_cd"
android:src="#drawable/app_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/texts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:orientation="vertical"
app:layout_constraintStart_toEndOf="#id/image"
app:layout_constraintTop_toTopOf="#id/image"
app:layout_constraintBottom_toBottomOf="#id/image">
<TextView
android:id="#+id/miwok_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="miwok" />
<TextView
android:id="#+id/english_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="english" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I can fix the problem by changing the layout to LinearLayout. But in Constraint Layout when ImageView is GONE one of textview is gone, the other remains. I have read similar to this ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly . But in my situation why one of the textviews is still remains if this is the child view of linear layout (why all linear layout isn't gone?).
Layout in the app (I change english text into phrases, but miwok isn't seen):
Because the LinearLayout has its top and bottom constraints set to the ImageView, it will be centered vertically on the ImageView. See the documentation that addresses this. "Vertically centered" means that the vertical center of the LinearLayout and the ImageView will be at the same y position.
Now, when the ImageView is set to GONE, the ImageView is reduced to a virtual point. Since it is constrained to the start and top of the parent, the "gone" view will now be a point at the screen's origin (0,0). The LinearLayout remains constrained to the top and bottom of the ImageView as before, so it is still centered on the ImageView. But, since the ImageView is now a point at the origin, and its centered has shifted, the LinearLayout must shift up to keep centered on the ImageView. As a result, the top TextView leaves the top of the screen and can no longer be seen.
How you would fix this depends on what you are trying to do.
As your LinearLayout top and bottom constraint is given to imageview and when it's gone it's height become less and because of that top textview is not visible.
#Cheticamp give more information in his answer.
You can change your constraint like below and it will work as you want. Change Imageview top and bottom constraint to LinearLayout top and bottom.
<?xml version="1.0" encoding="utf-8"?><?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"
android:padding="10dp">
<ImageView
android:id="#+id/image"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/texts"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/texts" />
<LinearLayout
android:id="#+id/texts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:orientation="vertical"
app:layout_constraintStart_toEndOf="#+id/image"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/miwok_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="miwok" />
<TextView
android:id="#+id/english_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="english" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have created a simple recycler view within a linear layout. When I scroll to the right I want the items
to disappear behind my frameLayout. (It should look like you cant see the items anymore because they are behind the frameLayout).
Unfortunately, the items appear do move behind a invisible wall (the left border of the recycler view) instead of behind my frameLayout. Is there a way to remove the animation for items leaving the recyclerview?
Thanks for any help!
Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_exerciseCards"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:animateLayoutChanges="false"
android:paddingLeft="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="50dp"
android:layout_height="300dp"
android:layout_marginLeft="-10dp"
android:background="#drawable/view_newexercise_deck"
android:elevation="4dp" />
<com.example.projecttraining0.VerticalTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="-5dp"
android:elevation="4dp"
android:rotation="180"
android:text="My Exercises"
android:textAlignment="center"
android:textColor="#color/colorPrimaryDark"
android:textSize="18sp" />
</FrameLayout>
screenshot
By using LinearLayout your FrameLayout and RecyclerView get placed one next to each other with no overlap. If you want your RecyclerView to be the full width you can use a ConstraintLayout instead of your parent LinearLayout.
You can constrain your RecyclerView to the parent so it fills the entire screen. And also put the RecyclerView first in the hierarchy and the FrameLayout second, so that the FrameLayout will be on top and occlude the RecyclerView.
You can learn a lot about ConstraintLayout here. There are also a lot of video tutorials on YouTube.
I have an ImageView and TextView inside a CardView. I can adjust the size of both the ImageView and TextView but when I try and move either of the 2 inside the XML design window, the top left corner of both doesn't move from the top left corner of the CardView, they're just stuck there. Any idea why this happens? I've included an image and my XML code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/newsView_container"
android:orientation="vertical"
android:layout_marginBottom="1dp">
<android.support.v7.widget.CardView
android:id="#+id/news_cardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="1dp"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#406490">
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
card_view:srcCompat="#drawable/cast_abc_scrubber_control_off_mtrl_alpha"/>
<TextView
android:id="#+id/news_title"
android:layout_width="157dp"
android:layout_height="99dp"
android:background="#99141414"
android:fontFamily="sans-serif-condensed-light"
android:text="Internet of Things Reaches One Day Volume of $430.00 (XOT) - Modern Readers"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
When working with RelativeLayout, you have basically two different ways to position views inside it.
The first is to use the attributes available in RelativeLayout.LayoutParams, such as centerInParent in order to center views vertically, horizontally, or both. You can also use attributes like below to position views relative to each other.
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
android:layout_centerInParent="true"/>
The other is to use margins in order to push views slightly away from the edge of the parent they're fixed to. In your case, with the views stuck to the top left (the default without any of the other attributes specified), you could use top or left margins.
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
android:layout_marginTop="32dp"/>
You can make this possible with ConstraintLayout, you can set your Views wherever you want and it is so simple and easy. You just have to connect constraints with parent or with other Views.
<!-- Your Parent View Start-->
<androidx.cardview.widget.CardView
android:id="#+id/news_cardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="1dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#406490">
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
card_view:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/news_title"
android:layout_width="157dp"
android:layout_height="99dp"
android:background="#99141414"
android:fontFamily="sans-serif-condensed-light"
android:text="Internet of Things Reaches One Day Volume of $430.00 (XOT) - Modern Readers"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Your Parent View End-->
if you have use relative layout as a parent layout in xml file then RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).In relative layout by default views are set in relative layout left top corner. you need to add view relative to anothers views
for Example
if you want to set image view center in layout then you so add this attribute in child view android:layout_centerInParent="true"
follow these tutorial to design layout in relative layout
relative layout
relative layout
I have an ImageView in an activity that takes up the whole screen. What I want to do is have a few translucent buttons in the corner of this ImageView overlayed on top (like 30% transparency). Is this possible with an ImageView in android? If it is can someone point me in the right direction to get started?
Use a layout, and make your ImageView and two Buttons children within the layout.
Example using RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0.5"
android:text="Button 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button1"
android:alpha="0.5"
android:text="Button 2"/>
</RelativeLayout>
You can position your buttons better by using android:layout_marginTop and android:layout_marginLeft attributes.
The key parts to understand here are:
1/ The ImageView is set to match_parent, therefore it'll stretch to fill the RelativeLayout.
2/ By default, sub Views are positioned at the top left of RelativeLayouts, this is why button1 appears there.
3/ Button2 is positioned to the right of button1 using the RelativeLayout attribute layout_toRightOf. Its vertical position is still set to the default - top.
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>