Develop Reference

Why is my app bar being overlapped by the items in the screen when scrolling?

Like I described in the question, when I run the app and scroll down the content simply goes over the top bar until the lower margin of the phone's notification panel . I also cant click on the 3-lines icon on the left to open the side navigation drawer. Rather I have to drag it from the left to open it.It's like my top bar is not even noticed. I am working on the app in android studio.
The following is my code for the XML page containing it:
Activity front page:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
layout="#layout/app_bar_front_page"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="?android:attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="?android:attr/actionBarSize">
<androidx.cardview.widget.CardView
android:layout_width="275dp"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
app:cardBackgroundColor="#3B1187"
app:cardCornerRadius="25dp"
app:cardElevation="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="107dp"
android:orientation="horizontal"
android:padding="15dp">
<TextView
android:id="#+id/news_box"
android:layout_width="260dp"
android:layout_height="84dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="cursive"
android:gravity="start"
android:onClick="onClickNews"
android:text="News"
android:textColor="#FFFFFF"
android:textSize="35dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="7dp"
android:layout_marginEnd="23dp"
android:src="#drawable/news_icon" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="277dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="50dp"
app:cardBackgroundColor="#3B1187"
app:cardCornerRadius="25dp"
app:cardElevation="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/fact"
android:layout_width="259dp"
android:layout_height="78dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="14dp"
android:layout_marginBottom="3dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="cursive"
android:gravity="start"
android:onClick="onClickFacts"
android:text="Facts"
android:textColor="#FFFFFF"
android:textSize="35dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="8dp"
android:layout_marginEnd="13dp"
android:src="#drawable/real_facts_icon" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="286dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:paddingTop="50dp"
app:cardBackgroundColor="#3B1187"
app:cardCornerRadius="25dp"
app:cardElevation="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="89dp">
<ImageView
android:id="#+id/imageView3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="8dp"
android:layout_marginEnd="11dp"
android:src="#drawable/steps" />
<TextView
android:id="#+id/step"
android:layout_width="274dp"
android:layout_height="77dp"
android:layout_alignParentStart="true"
android:layout_marginStart="6dp"
android:layout_marginBottom="155dp"
android:clickable="true"
android:focusable="true"
android:fontFamily="cursive"
android:gravity="start"
android:onClick="onClickSteps"
android:text="Steps"
android:textColor="#FFFFFF"
android:textSize="35dp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
//newsletteretc
<GridLayout
android:paddingTop="20dp"
android:columnCount="2"
android:rowCount="1"
android:alignmentMode="alignMargins"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="200dp"
android:layout_height="200dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
android:layout_marginBottom="50dp"
android:background="#drawable/newsletter"
android:layout_margin="12dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
android:layout_centerInParent="true"
android:paddingRight="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Newsletter"
android:id="#+id/newtext"
android:textSize="25dp"
android:gravity="center"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="200dp"
android:layout_height="200dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
android:layout_marginBottom="50dp"
android:layout_margin="12dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ad"
android:layout_centerInParent="true"
android:paddingRight="100dp">
</RelativeLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
//share
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
android:layout_margin="12dp"
app:cardBackgroundColor="#00FFB7">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="3"
android:orientation="vertical"
android:rowCount="1"
android:textAlignment="center">
<ImageButton
android:id="#+id/facebook"
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="#drawable/fb_new" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_toRightOf="#id/facebook"
app:srcCompat="#drawable/insta_new" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="#drawable/wp"
android:layout_toRightOf="#id/imageButton2"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_front_page"
app:menu="#menu/activity_front_page_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
Another XML file especially for the app bar:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".Front_page">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_front_page" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Note : when creating new activity I chose 'Navigation Drawer' activity and found there to be an XML particularly for top app/tool bar.
Before scrolling :
image before scrolling
After scrolling:
Image after scrolling
I would like for the items to scroll under the top bar.
Edit : Given below is the changed part of the code that is also causing the content to be displayed overlapping the app bar at the start of the page itself and continues to overlap during the scrolling:
<include
layout="#layout/app_bar_front_page"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior ="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

The solution as pointed out by #cgb_pandey is to simply move the code of the scrollview as well as it's children to the content_front_page.xml.

Bottom Navigation View goes up with windowSoftInputMode=adjustResize

I need windowSoftInputMode= adjustRezise for my layout so that my buttons go up with the keyboard. BUT I don't want my BottomNagivationView to be affected by this.
How can I solve such?
My BottomNavigationView comes from MainActivity.xml which is:
<RelativeLayout
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=".MainActivity">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"></FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_menu"/>
</RelativeLayout>
My manifest has android:windowSoftInputMode="adjustPan" but I adjust it by code when I open the fragment with:
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
Here are some pictures so you could understand what I mean: https://imgur.com/a/vjePxI6
So what I would like to know is how I could set the BottomNavigationView to do nothing on keyboard opening while I'd like my buttons to be affected by :
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

In my case problem solved by just adding following line in manifest file.
android:windowSoftInputMode="adjustResize|adjustPan"

add android:windowSoftInputMode="adjustPan" inside your activity tag into your manifest file.
then go to your activity and change the parent layout to RelativeLayout, then create your FrameLayout which holds your fragments inside your relative layout which is your parent layout. Then add your second layout which is LinearLayout that holds the bottomNavigationView and make its Height and width match_parent but below the FrameLayout.
Below is the example of the main activity layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="vertical"
tools:context=".MainActivity">
//FrameLayout which holds all your fragments
<FrameLayout
android:id="#+id/fragments_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
//BottomNavigationView Container
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="bottom"
android:layout_below="#id/fragments_container">
//BottomMenus
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/bottom_navigation"
android:background="#drawable/rectangle_4_dash"
android:layout_alignParentBottom="true">
//Container of Menus
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="5">
//BottomMenu One
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/home_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Home" />
</LinearLayout>
//BottomMenu Two
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/contact_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Contact" />
</LinearLayout>
//BottomMenu Three
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/about_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="About"
android:layout_gravity="center"/>
</LinearLayout>
//BottomMenu Four
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:src="#drawable/services_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Services"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.bottomnavigation.BottomNavigationView>
</LinearLayout>
Then go to your fragment which you want to scroll and design it like below one.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Title Of Your Form"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/f_name"
android:inputType="textPersonName"
android:padding="10dp"
android:textSize="14sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/m_name"
android:inputType="textPersonName"
android:padding="10dp"
android:textSize="14sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/l_name"
android:inputType="textPersonName"
android:padding="10dp"
android:textSize="14sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Message"
android:inputType="text"
android:padding="10dp"
android:textSize="14sp" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="Send Messagge"
android:textAllCaps="false"
android:textColor="#color/white"
android:layout_marginBottom="40dp"/>
</LinearLayout>
</ScrollView>
That is how i solved it,
if you have any doubt please let me know but if its helps or looks like a correct answer please mark it as a correct answer thanks.

how can get red of empty space inside CardView?

Dear Android Developers I am a creating cv Android app but there are empty after TextView inside CardView how can I get rid of that space
below my xml code where I have implemented CardView as parent child as LinearLayout.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="0dp"
card_view:cardPreventCornerOverlap="true"
card_view:cardUseCompatPadding="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
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" />
<Space
android:layout_width="50dp"
android:layout_height="20dp" />
<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_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>

Change layout height of card view to match_parent

reduce marginTop of your text View remove the Space tag also and also reduce margin of your imageView

use this attributes in your cardview you can see the difference
your card do not have elevation and radius and that card view merge to the activity that's why it showing like a space after text use this in your card view:
<?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:layout_margin="8dp">
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="6dp"
android:elevation="4dp">
<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_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Change size layout ImageView when WebView scrolls

I have a project with Android Studio and in Activity I have content html using WebView. The Image should be shown as an ImageView to make it look good. I want to change the height of the ImageView when I scroll the WebView to the bottom and then back to normal size when I scroll back to the top. How can enable it?
Here is my xml 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:background="#ffffff"
android:orientation="vertical"
tools:context="com.demowordpress.app.DetailActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp">
<ImageView
android:id="#+id/imageView"
android:scaleType="center"
android:layout_width="match_parent"
android:layout_height="220dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<TextView
android:padding="10dp"
android:id="#+id/textView"
style="#style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#fff"
android:ellipsize="end"
android:maxEms="10"
android:maxLines="3"
android:background="#android:drawable/screen_background_dark_transparent"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/wv"
android:scrollbars="none"
android:scrollbarAlwaysDrawVerticalTrack="false"
android:visibility="gone">
</WebView>
<ProgressBar
android:id="#+id/pBar"
style="?android:attr/progressBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<Button
android:id="#+id/Button"
android:layout_width="80dp"
android:layout_height="80dp"
android:focusable="true"
android:clickable="true"
android:visibility="gone"
android:drawableTop="#drawable/ic_retry"
android:text="try Again"
android:textColor="#color/colorPrimary"
android:background="#android:color/transparent"
android:layout_gravity="center"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white"
android:clickable="true"
ads:srcCompat="#drawable/ic_share"
app:backgroundTint="#color/white"
android:layout_gravity="end|bottom"
android:layout_marginBottom="50dp"
android:layout_marginRight="40dp"
/>
</FrameLayout>
</LinearLayout>

Imageview not taking corner radius of cardview

Hi i'm developing an app where i'm using imageview inside cardview but my problem is that imageview somehow is not taking the corner radius applied to cardview
Please see the image below
I tried doing different things but dont understand where the problem is please if anyone can guide me
my xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:id="#+id/cardview2"
app:cardCornerRadius="25dp"
card_view:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:layout_width="88dp"
android:layout_height="88dp"
android:id="#+id/imageView"
android:scaleX="1.2"
android:scaleType="fitXY"
android:scaleY="1.2"
android:src="#drawable/club1"
android:background="#drawable/corner_radius"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:id="#+id/nameTextView"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="16dp"
android:maxLines="2"
android:text="Item"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:id="#+id/ratingTextView"
android:layout_marginStart="4dp"
android:drawableEnd="#color/White"
android:drawableRight="#color/White"
android:drawablePadding="2dp"
android:text="4,5"
android:gravity="center"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="12sp"/>
</LinearLayout>
</android.support.v7.widget.CardView>

See here is the Image. Remeber Don't make CardView as Main Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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_margin="1dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
app:cardUseCompatPadding="true"
android:elevation="0dp"
app:cardCornerRadius="5dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_suvichar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/placeholder" />
<TextView
android:id="#+id/tv_suvichar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:padding="5dp"
android:textColor="#color/black"
android:textSize="#dimen/normal_text_size" />
</LinearLayout>
</android.support.v7.widget.CardView>

Try Replace your Linear Layout with Relative Layout.
After that set gravity of your last textview (center_horizontal).

You can use the RoundedImageView :
Put this in the build.gradle
compile 'com.makeramen:roundedimageview:2.3.0'
And to use it:
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
app:riv_corner_radius="5dp"/>

Just use this code in xml and see result after RUN the code:
<android.support.v7.widget.CardView
android:layout_marginTop="100dp"
android:layout_gravity="center_horizontal"
app:cardCornerRadius="20dp"
android:id="#+id/cv"
android:clipChildren="true"
android:layout_width="100dp"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/recipe"
android:layout_width="match_parent"
android:layout_height="100dp" />
<TextView
android:layout_margin="8dp"
android:text="ITEM"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
android:text="34"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>

Try this way :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_5sdp"
android:layout_marginRight="#dimen/_5sdp"
android:layout_marginBottom="5dp"
cardview:cardCornerRadius="#dimen/_3sdp"
cardview:cardElevation="#dimen/_3sdp"
cardview:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="#dimen/_180sdp"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="#drawable/placeholder"/>
<RelativeLayout
android:padding="#dimen/_5sdp"
android:id="#+id/rlMiddle"
android:layout_below="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtPrescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_10sdp"
android:maxLines="3"
android:paddingTop="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="#dimen/_16sdp"
android:text="Demo"
android:textStyle="bold"
/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>