I am using One Activity and others are fragments. My parent layout is cardview and I want to add another layout at the top the using include layout tag. Below I posted output images and code:.
This is my card Layout
<?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:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#android:color/transparent"
android:elevation="0dp">
<include layout="#layout/edit_text"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:paddingLeft="10dp"
android:textColor="#4928ef"
android:textStyle="italic"/>
</android.support.v7.widget.CardView>
And this is my common layout, which I have to include in above card layout
edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO"
android:id="#+id/go"
android:layout_alignParentRight="true"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Quick Search"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
Output
Click here to display output of above code
I tried to change cardview parent to LinearLayout and cardview as child but I don't know why list item (textview) the first one only displays and others are ignored. I am trying to make layout like below:
Click here to see what I expected
Use only 1 child in cardView
Try this
main.xml
<?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:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/edit_text" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="Textview"
android:textColor="#4928ef"
android:textSize="25sp"
android:textStyle="italic" />
</LinearLayout>
</android.support.v7.widget.CardView>
and edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO"
android:id="#+id/go"
android:layout_alignParentRight="true"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Quick Search"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
Adjust background using android:background="#drawable/background"
remove
<include layout="#layout/edit_text"/>
from your cardView layout, because cardView should have only one ChildView.
so as i understand, you want to use search bar on top.
so here is my implementation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.tiikr.OverlayActivity">
<include layout="#layout/edit_text"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scrollbars="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
so here i use LinearLayout as a parent of the view, and on top is your search bar layout, and down is the listView wich you need to populate in the code with your cardview layout
<?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:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#android:color/transparent"
android:elevation="0dp">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:paddingLeft="10dp"
android:textColor="#4928ef"
android:textStyle="italic"/>
</android.support.v7.widget.CardView>
See above code with RecyclerView
Related
I'm using a RecyclerView to store these cards it works but I want to reduce the space between cards. After adding cardPreventCornerOverlap="false" this line it reduced a bit but still it's too much. Is there a way to do this?
Card Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.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="wrap_content"
app:cardCornerRadius="10sp"
app:cardBackgroundColor="#color/lightest_black"
app:cardElevation="16dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
android:foreground="#drawable/ripple">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sick_linear_layout"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/sick_topic"
android:text=""
android:textSize="22sp"
android:padding="16dp"
android:fontFamily="#font/productsansbold"
android:textColor="#color/white"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sick_expandable_layout">
<TextView
android:id="#+id/sick_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/productsansregular"
android:padding="16dp"
android:text=""
android:textColor="#color/gray"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
RecyclerView layout:
<?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"
android:background="#color/light_black"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingLeft="8dp"
tools:context=".IfYoureFeelingSick">
<androidx.recyclerview.widget.RecyclerView
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sick_recyclerView"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>
</LinearLayout>
This is how it looks now
try add android:layout_margin="-10dp" to your CardView to control unwanted spaces created by CompatPadding and no need to say you can replace -10 with any negative number you want :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.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="wrap_content"
app:cardCornerRadius="10sp"
android:layout_margin="-10dp"
.....
>
I'm trying to get a view like this for an android application where the "Search button" looks like a card at the top of the layout just below the toolbar (The "what are you looking for?" view in the Fiverr app picture below).
I want it to have the Search icon and some text next to it. I have tried this but it's jumbled up and doesn't just cut it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".ui.home.HomeFragment"
tools:ignore="ExtraText">
<androidx.cardview.widget.CardView
android:id="#+id/searchCard"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:elevation="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="#drawable/ic_round_search_24"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_search"/>
</androidx.cardview.widget.CardView>
</RelativeLayout>
How can I achieve this?
You could wrap the icon and text inside a linear layout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".ui.home.HomeFragment"
tools:ignore="ExtraText">
<androidx.cardview.widget.CardView
android:id="#+id/searchCard"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:elevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="#drawable/ic_round_search_24"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_search"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
You can use the search view for this purpose.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:ignore="ExtraText">
<androidx.cardview.widget.CardView
android:id="#+id/searchCard"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:elevation="5dp">
<androidx.appcompat.widget.SearchView
app:queryHint="Search"
app:iconifiedByDefault="false"
app:queryBackground="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</androidx.cardview.widget.CardView>
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
CardView elevation works fine when tested in a separate application, but when the same code for the cardView is used to craft items of a RecyclerView, the elevation no longer appears.
Here is the code for the RecyclerView list item:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="10dp">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
card_view:cardUseCompatPadding="true"
app:cardMaxElevation="6dp"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="24dp">
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="250dp" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/thumbnail"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
And here is my main activity xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bitmap"
android:layerType="software"
android:padding="10dp"
tools:context="com.example.android.vikramadityastimeline.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/card_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
/>
</FrameLayout>
To Support it, you need to specify app:cardUseCompatPadding="true" in your support CardView.
<android.support.v7.widget.CardView
app:cardElevation="4dp"
app:cardUseCompatPadding="true"
app:cardMaxElevation="6dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.CardView>
Use this in your card view. It solved my same problem.
app:cardUseCompatPadding="true"
In your code you used frame layout in recycler view item and inside that you have cardview.
You gives margin as 10dp to frame layout but my suggestion to you is that remove that line and add margin to the card view.
In recycler view there are no space between items so shadow of your cardview may be hidden because your outer frame layout completes there so try by cahnging your code like this :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="10dp">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:cardUseCompatPadding="true"
app:cardMaxElevation="6dp"
android:layout_marginBottom="10dp"
app:cardCornerRadius="3dp"
app:cardElevation="24dp">
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="250dp" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/thumbnail"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Add this line to your CardView xml tag;
android:layout_margin="10dp"
I just had the same problem and the solution I found was to add the next tag in the AndroidManifest:
android:hardwareAccelerated="true"
Example:
<application
android:allowBackup="true"
android:hardwareAccelerated="true"
android:icon="#mipmap/ic_launcher"
android:theme="#style/AppTheme">
Documentation:
https://developer.android.com/guide/topics/graphics/hardware-accel
This is the xml sample code for the screenshot below:
<androidx.cardview.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="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:contentPaddingBottom="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/name_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name" />
<TextView
android:id="#+id/sim_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SIM" />
<TextView
android:id="#+id/ID_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ID" />
<TextView
android:id="#+id/model_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="model" />
</LinearLayout>
</androidx.cardview.widget.CardView>
I have two cards views, I want to place one above the other but the end result is that they are placed on top of each other:
This is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/entryTypeCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Spinner
android:id="#+id/entryChoiceSpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp" />
</android.support.v7.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:id="#+id/currencySpinnerLayout"
android:orientation="vertical"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/currencyTypeCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Spinner
android:id="#+id/currencyChoiceSpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp" />
</android.support.v7.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<AutoCompleteTextView
android:id="#+id/personNameTextField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
What am I doing wrong?
Assign some id to first RelativeLayout
<RelativeLayout
android:id="#+id/first_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
and then used
android:layout_below="#+id/first_layout"
to second layout.