Develop Reference

MPAndroid chart in ConstraintLayout with additional widgets (they are not visible)

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"

How can I remove extra space corner of the CardView?

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"

Custom Card not showing as in design

I have been trying for some time now to fix layout.I have a custom cardview like this :this image
This custom card is inside a fragment this one:
<LinearLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/grey"
xmlns:android="http://schemas.android.com/apk/res/android" >
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:id="#+id/recycle"
android:layout_height="match_parent"/>
</LinearLayout>
Which itself is inside a viewpager.The problem is when I run the app my custom card becomes full width,I have tried even with RelativeLayout still isn't as I have in my design layout.
Custom_Card Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_marginTop="10dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/job_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#fff"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="4dp"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="360dp"
android:layout_height="wrap_content"
android:background="#fff">...
Can sb help me?Thanks in advance

Use CardView as your Parent layout in item layout as follows -
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="6dp"
app:cardElevation="#dimen/dimen4"
app:cardBackgroundColor="#fff"
android:id="#+id/job_post"
app:cardCornerRadius="3dp"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_margin="2dp"
android:layout_height="wrap_content"
android:background="#fff">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="TextView" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Give width of RecyclerView match_parent in your activity or fragment.
Thanks , I hope its work for you

You can use card view in linear layout and then set margin like below:-
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#color/blue"
xmlns:android="http://schemas.android.com/apk/res/android" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_margin="20dp"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Cardview Demo"/>
</android.support.v7.widget.CardView>
</LinearLayout>
I hope it will help you and you can set margin of cardview or your required width to cardview

how to add items to a cardView without recycle view

I have a blank card view and need to add items to this cardView in the layout detailed below.
----------------------------
|image|"text here"
|image|"text here" |image|
----------------------------
the problem i am having is all of the tutorial etc start talking about recycleviews etc when i just want to add items to my cardView.
any help would be appreciated

try this layout for your cardview
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="250dp"
xmlns:card_view="http://schemas.android.com/tools"
android:orientation="horizontal"
app:cardCornerRadius="3dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
note that you should complete the other attributes.
this layout is used for one item. and if you have data to display them, you can use a RecyclerView.
check out this Tutorial for more informations.

CardView: Let child item overlap

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>