I have a problem with my RecyclerView.
I want to design some CardViews that looks like this:
Therefore I need the ImageView on the top left to overlap the CardView. I already know the usage of negative margins but my problem mainly is
Overlaps in Cardviews get cropped of even when clipToPadding is set to false
Does anyone have a solution for this problem?
Just set ImageView (Twitter icon) elevation more higher than CardView elevation.
Set android:elevation="10dp" to ImageView and set card_view:cardElevation="2dp" to CardView.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="20dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="4dp"
card_view:cardUseCompatPadding="false"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="#drawable/sample_1" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image"
android:padding="8dp"
android:background="#CCFFFFFF"
android:text="This is simple title"
android:textColor="#000000" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<ImageView
android:id="#+id/icon_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:elevation="10dp"
android:src="#mipmap/ic_launcher"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~
Child which have to Overlap CardView add this attribute to the child
Note : The child elevation must be greater than CardView elevation
android:elevation="10dp"
Instead of negative margin (which can be unpredictable) on the image, you can try to create another layout in the CardView to be the main content bubble, and add margin top to that instead.
<CardView>
<FrameLayout
background="bubble"
marginTop="15dp">
<!-- stuff here -->
</FrameLayout>
<ImageView ... />
</CardView>
In Constraint layout..... I have done left side you can change according to your requirement.
<?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"
tools:context=".SecondActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="#+id/card"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardCornerRadius="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="20dp"
android:src="#drawable/ic_box"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="30dp"
android:layout_marginStart="170dp"
android:layout_marginLeft="170dp"
android:layout_marginTop="25dp"
android:src="#drawable/ic_box"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I am trying to add PieChart from MPAndroidChart and seekBar under it.
But still no luck, chart is visible, but other content is noT visible, despite it visible when I open design tab during xml configuration.
I already have tried to set a barrier and with groups with weights but still.
Could please anyone give any advice how to properly align chart to be able to see other widgets on view.
Here is my xml example:
<?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"
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toTopOf="#+id/seekBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
ANSWER
The first and correct version of answer from Ashish Kudale is: Use LinearLayout with weight:
<LinearLayout
android:id="#+id/chartContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"/>
<android.support.v7.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Use LinearLayout Insted of ConstraintLayout.
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/linearLayout3"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text" />
</LinearLayout>
</LinearLayout>
What it does is places all items in the screen and remaining place is occupied by item which has android:layout_weight="1"
I am developing cv Android app used CardView but there is empty space corner of CardView.
below screenshot of the app
current ui
below XML where I have implemented CardView.I think it is because of background color what is your suggestions
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="16dp"
card_view:cardBackgroundColor="#color/colorBlust"
card_view:cardCornerRadius="18dp"
card_view:cardElevation="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginRight="250dp"
android:gravity="center"
android:text="#string/about_me"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/introduction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
remove the corner radius of your cardview
card_view:cardCornerRadius="18dp"
I have a RelativeLayout inside a PercentRelativeLayout as the code below shows
<android.support.percent.PercentRelativeLayout 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="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<RelativeLayout
android:id="#+id/clickBox"
android:layout_height="match_parent"
android:background="#color/PaleBlack"
android:fillViewport="true"
app:layout_widthPercent="35%">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleX="0.8"
android:scaleY="0.8"
android:src="#mipmap/ic_open"/>
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
It gives a look like shown below, which is good
But if I then programatically add a TextView to the PercentRelativeLayout, the RelativeLayout does not expand filling the parent vertically PercentRelativeLayout, which then results as shown below
How can I fix this so the RelativeLayout fills the parent in its height?
Since PercentRelativeLayout is deprecated, you could consider switching to a ConstraintLayout solution with a layout like this one:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.30" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="false"
android:layout_centerInParent="true"
android:adjustViewBounds="false"
app:srcCompat="#mipmap/ic_launcher" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
You could add a second guideline and anchor the TextView that you are generating to the guideline and to the parent just as I did to the RelativeLayout.
I want to create this layout
this is a cardview (gray view) and imageview(blue view) for that i use this code
<FrameLayout 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"
android:background="#color/abc_search_url_text_normal"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginBottom="3dp"
android:paddingTop="5dp"
app:cardBackgroundColor="#color/abc_input_method_navigation_guard">
</android.support.v7.widget.CardView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:layout_marginRight="10dp"
android:scaleType="fitXY"
android:src="#drawable/abc_ratingbar_full_material" />
</FrameLayout>
but in result my image view going to back of cardview i try reletivelayout instead of framelayout but same result.
The CardView has by default elevation in API 21+, you can manipulate the elevation to be less than that of the ImageView
<android.support.v7.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="1dp"/>
<ImageView
android:id="#+id/image_view_user"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="2dp"/>
in Pre 21 you can use
overlayView.bringToFront();
root.requestLayout();
root.invalidate();
This will not work in 21+ if you have different elevation
Just put CardView in other view like in FrameLayout.
Just like below:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginStart="10sp"
android:layout_marginEnd="10sp"
>
<FrameLayout
android:layout_marginTop="15sp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100sp"
app:cardCornerRadius="5sp"
app:cardBackgroundColor="#color/colorPrimary">
<!--other view items -->
</android.support.v7.widget.CardView>
</FrameLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="90sp"
android:layout_height="90sp"
app:civ_border_width="2dp"
android:layout_marginStart="10sp"
app:civ_border_color="#color/colorPrimaryDark"
android:id="#+id/profileImg"
android:background="#drawable/ic_if_profle_1055000"
xmlns:app="http://schemas.android.com/apk/res-auto"/>
Screenshot:
Try:
Use a RelativeLayout
Align the ImageView to the parent right/end and add a right/end margin
Align the FAB to the top of the card view and add a negative margin
<RelativeLayout
...>
<CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="120dp"
/>
<ImageView
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/cardView"
android:layout_marginTop="-32dp"
android:layout_marginRight="20dp"
/>
</RelativeLayout>
Just add elevation to ImageView greater than CardView elevation
<FrameLayout 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"
android:background="#color/abc_search_url_text_normal"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginBottom="3dp"
android:paddingTop="5dp"
app:cardBackgroundColor="#color/white">
</androidx.cardview.widget.CardView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:layout_marginRight="10dp"
android:scaleType="fitXY"
android:elevation="8dp"
android:src="#drawable/ic_launcher_background" />
You can wrap CardView in FrameLayout but then the shadow will be cropped.
Set android:clipChildren="false" to fix it
<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:layout_width="wrap_content"
android:clipChildren="false"
android:layout_height="140dp">
<FrameLayout
android:id="#+id/frameLayout4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:clipChildren="false">
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/card_radius"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Another way around it would be to wrap the image view in a card view. Just ensure the background is transparent with height and width wrapping content and it will go on top of the previous card view.
I can't seem to increase the gap between the CardView elements in my ListView. I tried adding android:layout_marginBottom="16dp" to the CardView but that doesn't do anything. I'me using SDK 23. Any Idea what I can do?
Here is the card layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp" <!-- Not Working -->
card_view:cardCornerRadius="#dimen/cardview_default_radius"
card_view:cardElevation="#dimen/cardview_default_elevation"
card_view:cardUseCompatPadding="true"
card_view:contentPadding="#dimen/abc_action_bar_content_inset_material">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_dato"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/tip_detail_date"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_tip_dato"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="14sp" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Change yout listview some thing like this
<ListView
android:id="#+id/ListView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/redBackground"
android:dividerHeight="1dip">// Increase this height as your need
</ListView>
Do it like this:
<androidx.cardview.widget.CardView
android:id="#+id/matrix"
app:cardBackgroundColor="#f6f6f6"
app:cardCornerRadius="8dp"
app:cardElevation="2dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="0.7dp"
android:layout_marginTop="0.7dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
If you increase the cardElevation or marginBottom gap will be increased.
For Api 23. you need to set
app:cardUseCompatPadding="true"
in your card view