<androidx.cardview.widget.CardView
app:cardCornerRadius="5dp"
app:cardElevation="8dp"
android:layout_width="370dp"
android:layout_height="450dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:descendantFocusability="beforeDescendants">
<EditText
android:id="#+id/heightText"
android:layout_width="140dp"
android:layout_height="60dp"
android:hint="Name"
android:textAlignment="center"
android:textStyle="bold" />
</androidx.cardview.widget.CardView>
Here is the EditText code I placed inside the CardView.
How can I change the location of the editText placed as in the image as I wish? For example, when I try to hold the editText with the mouse, it automatically returns to its position in the image. It's like it's magnetized to the top left corner.
To position views within a CardView you need to nest them in a layout container view, like a LinearLayout, RelativeLayout, ConstraintLayout, etc. inside the CardView.
Here is an example using a ConstraintLayout:
<androidx.cardview.widget.CardView
app:cardCornerRadius="5dp"
app:cardElevation="8dp"
android:layout_width="370dp"
android:layout_height="450dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:descendantFocusability="beforeDescendants">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/heightText"
android:layout_width="140dp"
android:layout_height="60dp"
android:hint="Name"
android:textAlignment="center"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
then you can use the rules of the layout container to position them properly.
If your CardView had dynamic height (wrap_content) you would want to also set the ConstraintLayout view height to wrap_content too instead of match_parent.
If you only have a single view that you want to put in the card, you could also control its position using android:layout_gravity attributes instead of using a layout container. CardView inherits from FrameLayout, so the same guidance about positioning views applies:
FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
Related
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'm migrating some projects to AndroidX with Kotlin. I'm having some issues with ConstraintLayout, I already know that, according to the documentation:
Negative margins will not be supported in ConstraintLayout.
[...]
But I have the following situation:
I need to move up in 5dp the LinearLayout, however I need the height to continue to match the lower limit of the screen. That is, I move up 5dp and increment the height by 5dp.
As it's in the image, I've already tried translateY, but it just moves the entire view (not what I need). Also I can not create a view inside the id#top with height of 5dp and align with constraintTop_toTopOf, since they are part of different groups.
Is there any solution for this case?
It's tricky to get views to overlap in ConstraintLayout, but you can do it by adding an invisible view and constraining the overlapping view to the invisible view.
In this case the invisible view's bottom could be constrained to the bottom of the green LinearLayout, with a bottom margin of 5dp. The red LinearLayout can then have its top constrained to the bottom of the invisible view. This should give you 5dp of overlap.
Try copy-pasting the following into your constraint layout
<LinearLayout
android:id="#+id/green"
android:layout_width="0dp"
android:layout_height="100dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#android:color/holo_green_light" />
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#id/green"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<LinearLayout
android:id="#+id/red"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="#id/dummyView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#android:color/holo_red_light" />
Note that a dimension of "0dp" means "match constraints" when set on a child view of a ConstraintLayout. This is not obvious, but is in fact documented here https://developer.android.com/reference/android/support/constraint/ConstraintLayout
The whole purpose of ConstraintLayout is to have a flat view hierarchy. Therefore, having LinearLayouts nested in defeats the purpose.
I suggest you get rid of the nested LinearLayouts and do everything using constraints.
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>
I have such XML layout with ScrollView and only child ConstraintLayout inside it. Then I have several child views inside this ConstraintLayout usually with wrap content. But I want to have one of this child view of Constrain Layout to fill 80% of screen so I have tried to use app:layout_constraintHeight_percent but it breaks Scrolling. It seems like view really has 80% of height but then remaining content happens to occupy just remaining 20%, and it fits screen height, and other views below my Custom View are ignored.
<ConstraintLayout>
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:fillViewport="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/calendarBackgroundLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- child views with wrap content -->
<com.mydomain.CustomView
android:id="#+id/myCustomView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintDimensionRatio="h,5:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_above_this" />
<!-- additional child views with wrap content -->
</ConstraintLayout>
</ScrollView>
</ConstraintLayout>