Does anyone know how to have a floating Cardview like this?
http://chairnerd.seatgeek.com/images/autocomplete_checkout.gif
The background image should be able to change programmatically and the cardviews should be scrollable. And the position of the first Cardview should be somewhere below the image. Thanks in advance!
I figured it out myself and I will post my solution here in case anyone run into the same situation.
Here how the layout file should look like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:background="#color/bgGrey">
<ImageView
android:layout_width="match_parent"
android:layout_height="125dp"
app:srcCompat="#drawable/soccer"
android:id="#+id/imageView"
android:scaleType="centerCrop"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="120dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp">
EDIT: Within the LinearLayout, something like a place holder should be added. Otherwise a part of the content at the end would not be shown. So I used a textview to do so.
<TextView
android:layout_width="match_parent"
android:layout_height="120dp" />
Note: The height here should match the marginTop in the LinearLayout
Yes it is a cardView directly on a ScrollView, or a ListView simply with the item's layout with background transparency.
The scrollview/listview is placed on a FrameLayout or RelativeLayout. Either there is a padding/margin on top, or a "stub" first element which is transparent".
Bellow (declared first in the parent layout) the scrollview/listview you can place an image or any other static component whatsoever.
And above you can place other floating components (like the Check-out button on your example)
Related
I have no idea how this can happen, but I have a ConstraintLayout with a CardView inside. Inside said CardView is a LinearLayout. That LinearLayout overlaps the parent on the end. Check the screenshot for more info. If I remove the android:layout_margin from the cardView, the inner layout looks good again, but adding margin to start seems to just push the entire layout to and over the end of the parent. It doesnt matter what sort of layout is used inside the CardView. The issue affects them all.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="#color/colorWhite">
..
<androidx.cardview.widget.CardView
android:id="#+id/wakeuptimer_status_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
.....
You need to change the Linearlayout height to match-parent instead of wrap_content. With wrap_content you aren't restricting the size of the Linearlayout view to the size of the CardView.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>
Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.
Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.
This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>
Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>
I have a list of items in a horizontal recycler view, and a fairly simple item that should only have a TextView set to wrap_content and an ImageView that should be aligned to the right of the layout.
Theoretically I should be able to just set a layout_weight of 1 on the TextView, but that causes a random space to randomly show up sometimes in the view depending on where it is in the recycler view.
Is there anyway to align the close icon to the right, while still keeping the layout/textview width as wrap_content? The amount of text can vary quite a bit, so I can't actually set a fixed width. I'm fairly certain that I can't just set a layout_gravity of end on the ImageView since the parent layout's set to wrap_content.
See layout attached.
<?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="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners"
android:minWidth="#dimen/min_width"
android:maxWidth="#dimen/max_width"
android:orientation="horizontal">
<WPTextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|end"/>
</LinearLayout>
With out knowing what the items are supposed to look like and how it needs to behave it is hard to judge what the problem you are having is.
If the image is just supposed to be a small image to the right of the text you could just add a right drawable to the text view:
https://developer.android.com/reference/android/widget/TextView.html#attr_android:drawableRight
If you can replace the LinearLayout by RelativeLayout then you are good to with
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners"
android:minWidth="#dimen/min_width"
android:maxWidth="#dimen/max_width">
<WPTextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/tv" />
</RelativeLayout>
Spacing between TextView and ImageView can be adjusted with margin on them. The properties used in the above code are self-explanatory.
So I'm using a RecyclerView, with some cards. I want to get an overlay on the card when it's clicked, which should cover all contents, but not change the size of the view. Hardcoding the size of the card is not possible, since the contents have different dimensions.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--contents and stuff-->
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000" />
</RelativeLayout>
The example above is pretty much what I'm trying to achieve, but this obviously won't work, since the View's and RelativeLayout's height refer to each other.
How can I make the View cover everything inside the RelativeLayout?
Edit
Clarification: The issue I'm having has nothing to do with clicking, covering or anything like that. I'm having issues with just covering the RelativeLayout.
Credits go to thunder413 for suggesting the FrameLayout in the comments.
Basically, all I had to do was encapsulating the RelativeLayout (as shown in my question) in a FrameLayout, and move the View out of the RelativeLayout into the FrameLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--contents and stuff-->
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000" />
</FrameLayout>
I expect to display one picture each time and horizontally swipe to another picture through onFling(). The problem is I have to use ScrollView to wrap my ImageView so as to get response from onFling. If I use Linearlayout to wrap the ImageView, nothing happens when I swipe. I don't want to use scrollview because the picture can be scrolled vertically though it is the exact screen size. How can I achieve it? Below is my layout.xml
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/iv_tutorial"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>
I fixed it by adding an attribute android:longClickable="true" to the LinearLayout.