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
Related
<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.
discover.xml :
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="#dimen/peek_height">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/discover_displays"
android:layout_width="match_parent"
android:layout_height="#dimen/peek_height"
android:background="#drawable/round_corners"
android:orientation="vertical">
<TextView
android:id="#+id/to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="#dimen/pad_17"
android:paddingBottom="#dimen/pad_16"
android:text="#string/to"
android:textAlignment="center"
android:textColor="#color/light_gray"
android:textSize="#dimen/pad_12"
android:visibility="gone"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/disp"
android:layout_width="match_parent"
android:layout_height="#dimen/disp_height"
tools:listitem="#layout/disp_item" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/small"
android:layout_width="#dimen/progress_bar"
android:layout_height="#dimen/progress_bar"
android:layout_gravity="center"
android:layout_marginTop="#dimen/text_width"
android:indeterminate="true"
android:progressBackgroundTint="#color/progressbar_background"
android:progressTint="#color/progressbar_color" />
<TextView
android:id="#+id/discovery_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/pad_26"
android:gravity="center"
android:paddingStart="#dimen/element_margin"
android:paddingEnd="#dimen/element_margin"
android:text="#string/discovery_message"
android:textColor="#color/text_color"
android:textSize="#dimen/text_size"
android:visibility="visible" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/error_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/pad_12"
android:background="#color/discovery_error_item"
android:padding="#dimen/discovery_error"
android:textColor="#color/white"
tools:text="#string/bluetooth_label" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Current Layout :
Expected layout : The Recyclerview in the above pick should have a height as below, while the 3 views progressbar, discover state message, error action should be aligned in the middle as in order (one below the other). How to accomplish the same ?
The view with id : "to" is optional, since its being used in two fragments, 1 fragment uses it and other dont, hence the visibility is hidden and made visible whenever required. I am using the coordinator layout, since a bottomsheet view is being used.
The recyclerview height needs to be adjusted, keeping the progress bar, discovery state message, error actions being aligned to center when its visible one after the other (either recyclerview is visible at a time, or the 2 views are visible at a time (progress bar, discover error state or the button) or only the error button is visible at a time aligned to the center) . Please help in aligning the view items to the center when the visibility of one view is not present. currently the view aligns to the top if there is no visibility. Thanks.
I believe you can nest ConstraintLayout within the CoordinatorLayout and implement your screen in the Constraint Layout by adding the constraints you wish.
Should be easy enough.
You have to use a combine of linear layout and relative layout with the relative as parent , and recycler and the linear as childs of it , its look like this :
<RelativeLayout>
<RecyclerView android:layout_width="match_parent" android:layout_height="match_parent"\><LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android: orientation="vertical" ... android:gravity="center"></LinearLayout>
</RelativeLayout>
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 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>