Develop Reference

Align a search icon and text inside a card

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>

CardView elevation not working with RecyclerView

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>

How to change background of complete layout

There is a list view in my android app.I give black colour to list. I want to make the background of layout grey colour. But I cannot make the complete background grey ,only part up to to which list extended becomes grey,rest of part remains white. How can I make remaining part also grey.
Here is xml code for layout of listview.
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/main_color_grey_500"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="97dp" >
<ImageView
android:id="#+id/expandable_lv_social_background_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/cd_main_image"
android:scaleType="centerCrop"
android:src="#drawable/expandable_social_background_image" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/expandable_lv_social_image"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="24dp"
android:layout_marginTop="16dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="4dp"
android:gravity="center_vertical"
android:orientation="vertical" >
<sampleapp.kodspider.com.sampleapp.font.RobotoTextView
android:id="#+id/expandable_lv_social_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:text="Sample App"
android:textColor="#android:color/white"
android:textSize="16sp"
app:typeface="robotoLight" />
<sampleapp.kodspider.com.sampleapp.font.RobotoTextView
android:id="#+id/expandable_lv_social_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stage Shows"
android:textColor="#android:color/white"
android:textSize="12sp"
app:typeface="robotoLight" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<View
android:id="#+id/divider_top"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:background="#color/material_light_yellow_600" />
<sampleapp.kodspider.com.sampleapp.view.AnimatedExpandableListView
android:id="#+id/expandable_lv_social_list_view"
android:background="#drawable/com_facebook_tooltip_black_background"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</sampleapp.kodspider.com.sampleapp.view.AnimatedExpandableListView>
</LinearLayout>
here is my screen shot

Change layout_height wrap_content to match_parent
<LinearLayout 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/main_color_grey_500"
android:orientation="vertical" >
.
.
.
</LinearLayout>

In your parent LinearLayout, Replace 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/main_color_grey_500"
android:orientation="vertical" >
With 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:layout_width="match_parent"
android:layout_height="match_parentt"
android:background="#color/main_color_grey_500"
android:orientation="vertical" >
Set, layout_height to match_parent and it will be fixed.

<LinearLayout 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/main_color_grey_500"
android:orientation="vertical" >

How do I include layout attribute before parent layout?

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

CardView Layouts overlapping

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.