I have following xml code from youtube:
<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="match_parent"
android:gravity="center"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:layout_width="300dp"
android:layout_height="300dp"
app:cardElevation="10dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="#color/white"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_height="150dp"
android:layout_width="match_parent"
android:src="#drawable/sandwich"
android:id="#+id/sandwich"
android:scaleType="centerCrop"
tools:ignore="MissingConstraints" />
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Welcome"
android:textAlignment="center" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Why we need the LinearLayout that inside the Card component? Can we just inside the Card use ImageView and Text component alone.
CardView is basically a styled FrameLayout source code, thus it doesn't support placing multiple views inside it, unless you want to stack them on each other. So to get around that, you can place a layout that supports multiple views and use it to manage the placement. It doesn't have to be LinearLayout, you can use any available Layout out there.
you have to use another layout in cardview to define background color or image. because cardview doesn't have background feature
Related
I've been having a lot of trouble with this layout.
Basically I have 2 linears, one that is slightly grey with that shadow on bottom and below another linear just white. My trouble here is adding that shadow to the end of the first linear. I tried "elevation" but that is now what i need since i want the shadow to be inside the linear kinda if the last 10dp are from a different color but I'm not getting it right.
This is my layout so far, i thought of putting a view inside the first linear but its not working that good.
Any ideas how to do this?
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#f8f8f8"
android:layout_height="0dp">
<android.support.v7.widget.CardView
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
android:layout_width="312dp"
android:layout_height="204dp"
app:cardBackgroundColor="#android:color/holo_red_light"/>
</LinearLayout>
<LinearLayout
android:background="#ffffff"
android:layout_weight="1"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>
</LinearLayout>
Try using below line in the linearlayout under which your cardview is sitting.
android:elevation="8dp"
Let the cardElevation part in your cardView be as it is.
card_view:cardElevation="10dp"
card_view:cardPreventCornerOverlap="false"
Also just a suggestion :
If you're using android:layout_weight in both child linearLayout put android:weightSum="2" in your parent linearLayout as mentioned in answer given by #Ming Leung here
For more information on android:weightSum="2" you can refer to answers on this page
This page would help you for elevation in cardview
Hope that helps.
I was able to get it to work using a ConstraintLayout:
<androidx.constraintlayout.widget.ConstraintLayout
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">
<androidx.cardview.widget.CardView
android:layout_width="312dp"
android:layout_height="204dp"
app:cardBackgroundColor="#android:color/holo_red_light"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Consider this video from material design on drag & dropping items:
Material design reordering list
In the video you see a RecyclerView and above it a TextView with the text "Playlist". When the row is dragged up you see it going over the Playlist.
In my code the row goes behind the Textview. I've put RecyclerView's layout_height to match_parent. And I used a FrameLayout and placed the TextView below the RecyclerView. Why isn't it going over it?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
android:layout_gravity="start|top" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
Use Constraint layout as a parent layout and add textview at the top by giving top constraints to the textview. then add
recyclerview's top constraint to the the bottom of textview and recyclerview bottom constraint to the bottom of parent then set height 0 it will work
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/txtTitle"
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.constraintlayout.widget.ConstraintLayout>
Have you tried elevation? the problem might be that in the z axis the TextView is higher than the RecyclerView. try adding android:elevation="10dp" or higher... like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
android:layout_gravity="start|top" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp" (if it doesn't work try maybe higher elevation, 20dp etc.)
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
Hope it works for you (: let me know!
What is the parent layout of this?
Because you set match_parent in recyclerview and list have many content that's why this issue facing.
Please give fix height or use relative layout and apply position above of text view in recyclerview
Problem with your layout code:
You're using a FrameLayout
Inside FrameLayout, you're also using top margin on your RecyclerView
android:layout_marginTop="96dp" <-- This causing the issue.
Solution:
You should LinearLayout instead of FrameLayout. And, also set LinearLayout's orientation as vertical.
android:orientation="vertical"
Also remove this line from your RecyclerView:-
android:layout_marginTop="96dp"
Solution Code:
<?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"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Hello World"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
The issue is not that the dragged view is going behind the TextView but, rather, the dragged view is not being drawn outside the bounds of the RecyclerView. The effect is the same.
To allow the RecyclerView to draw outside of itself, set the following for the parent of the RecyclerView:
android:clipChildren="false"
For the RecyclerView set
android:clipToPadding="false"
That should solve the problem.
The RecyclerView is above the text view in your FrameLayout. Currently, it appears that the underlying TextView is above the RecyclerView as you have given the background for the RecyclerView as:
android:background="#android:color/transparent"
To make this work as normal, either remove this line or change the background of RecyclerView to any value other than transparent.
There is 1 more issue. You need to place the recycler view first. Try this:
<?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"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Hello World"/>
</LinearLayout>
I mean how can i locate a ImageView in two layouts? i have 2 relative layouts one is up, one is down. The up one has a ImageView but i want half of this ImageView located in down layout. How can i do that?
EDIT::
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#d2aff4">
<Space
android:id="#+id/center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/center"
android:background="#87c96d" />
<RelativeLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
In this scenario the "top" layout needs to be created at last to be displayed on top of the rest of the views. If you need it to have a background colour, you need to apply the colour to the main container.
Here is the result:
I agree with #Booger answer's but If your parent layout is RelativeLayout then add this below property in you ImageView.
android:layout_centerInParent="true"
Or you can use below code to create that kind of layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/gray_font">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
Take a look at this library https://github.com/umano/AndroidSlidingUpPanel
if you want something easy you can put those layouts in to a parent relative layout and then you can add a image view in parent relative layout as last child and position it how you need
I think you should wrap both your RelativeLayout in another Parent layout, and in that layout, you will place your ImageView (which will span both the other layouts.
Something like this pseudo-code:
<LinearLayout>
<RelativeLayout1>
<RelativeLayout2>
<ImageView gravity=center> //Order counts, this needs to be after the RelativeLayouts to show on top of them
</LinearLayout>
I have the following xml for a cardview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent" android:padding="2dp">
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Which results in these shadows which have no shading on the bottom at all
But I am trying to get something like this shadow, that more nicely surrounds the whole card.
I've tried changing the elevation to no avail, and searching on this issue seems to bring up nothing but people with no shadows at all issues which is not my case.
How can I get the shadows right?
Thanks.
You need to add this xml property in your card view
app:cardUseCompatPadding="true"
Adding clipChildren="false" to the parent LinearLayout should also work.
set elevation using card_view:cardElevation property
I was having the same problem until I remembered that if the parent is wrapping its content, then it will not wrap the shadow, so I gave the parent a bigger size than the child that way it will include the child and the shadow of the child
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="110dp"
android:layout_height="110dp">
<androidx.cardview.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="98dp"
android:layout_height="98dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:srcCompat="#drawable/manhattan" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
add these lines in your cardView
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
Can we place a small view over another large view? For example, I have a VideoView which is playing a file in the background. Over this, somewhere in the middle/corner, I want to place another ImageView.
But in Linear/Relative Layout, views can be placed only one after another or relative to each other, and AbsoluteLayout is advised against. So what do I do?
The FrameLayout is the simplest ViewGroup and stacks the Views in the order they're defined in layout XML (or added programmatically); the first will be lower, and the last will be on top.
Here is an example where two Views are stacked and offset to better illustrate the point:
Here is the actual layout XML with the two overlapping TextView boxes. The offset of the two boxes is done using android:layout_gravity while android:gravity is used for centering the text itself within each box.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="100dp">
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="top|left"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="First is below"/>
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|right"
android:background="#android:color/holo_green_light"
android:gravity="center"
android:text=" Last is on top"/>
</FrameLayout>
Just in case if you want to place a view on top of a ButtonView then use this;
android:elevation="7dp" for the view which needs to be placed on top of the button.
FrameLayouts let you pile each view on top of the one below. This can also be achieved with a RelativeLayout.
You can also do it by using ConstraintLayout a new layout introduced by google.
ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups).
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="4"
tools:context="com.edalat.example.MainActivity">
<VideoView
android:id="#+id/videoView"
android:layout_width="283dp"
android:layout_height="349dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="24dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="24dp"
android:layout_marginRight="24dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.509"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="24dp"
android:layout_marginLeft="24dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="24dp"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
<?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"
android:padding="#dimen/dp_20"
android:background="#color/yellow"
>
<VideoView
android:id="#+id/videoview"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="300dp"
android:contentDescription="#string/app_name"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/camera"
android:layout_margin="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:id="#+id/imageView" />
</RelativeLayout>
Create Relative Layout and place views inside it and add
android:elevation="2dp"
for the view whcich is to be over another one
It can be done easily by putting the back layouts before forwarded layouts in XML file.
for example if I want to cardView1 comes over cardView2 I write this code:
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/cardView1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Since cardView2 comes before cardView1 , cardView1 is the one that comes over the other one.