Gravity in LinearLayout - android? - android-layout

I created bellow 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:id="#+id/relativeStart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back"
tools:context=".SongsActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/felesh_m" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageButton
android:id="#+id/imbCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#null"
android:src="#drawable/hosein_hlarge" />
</LinearLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/felesh_m" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4" />
</LinearLayout>
</RelativeLayout>
See bellow Image :


Change your layout like this. You don't need to take multiple Linear Layouts. That is bad for performance. So I have changed it to single Linear Layout with some Weight properties.
<?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:id="#+id/relativeStart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/common_ic_googleplayservices">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/common_ic_googleplayservices"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:background="#null"
android:src="#drawable/common_ic_googleplayservices" />
<ImageButton
android:id="#+id/imbCenter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#null"
android:src="#drawable/common_ic_googleplayservices" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:background="#null"
android:src="#drawable/common_ic_googleplayservices" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4" />
</LinearLayout>
</RelativeLayout>

Related

Android - split view with button on top

I am trying to split screen in android and trying to overlay a button on top of divider
Below is the current and expected
Below is my XML layout file
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:weightSum="2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000" />
<RelativeLayout
android:background="#00ff00"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="90sp"
android:layout_height="90sp"
app:srcCompat="#drawable/exchange"
android:layout_centerHorizontal="true"
android:layout_marginTop="-45dp"/>
</RelativeLayout>
</LinearLayout>

You can achieve this by aligning the layout in an ordered way or also by using the Constraint Layout.
demo.xml
[![<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_red_light">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark">
</RelativeLayout>
</LinearLayout>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#android:drawable/btn_dialog" />
</RelativeLayout>][1]][1]

Probably the simplest way to take what you have and make it work would be to use a FrameLayout to wrap your existing layout:
<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">
<!-- your current LinearLayout goes here, except for the ImageButton -->
<ImageButton
android:id="#+id/imageButton"
android:layout_width="90sp"
android:layout_height="90sp"
android:layout_gravity="center"
app:srcCompat="#drawable/exchange"/>
</FrameLayout>
The android:layout_gravity attribute is the key here; that will float your button in the center of the screen.
While the above will work, I'd recommend using ConstraintLayout instead:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/bottom"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="#+id/top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="90sp"
android:layout_height="90sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/exchange"/>
</androidx.constraintlayout.widget.ConstraintLayout>
By doing it this way, you flatten everything into a single view group.

<RelativeLayout 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">
<LinearLayout
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#android:drawable/btn_dialog" />
<LinearLayout
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
</RelativeLayout>

Layouts not visible despite the views being set to VIEW.VISIBLE

I have a working map fragment with a working navigation drawer in it.The 2 linear layouts are not visible despite being set to visible in the xml.Kind give me some help.what would be hiding those layouts?Where can i place for them to work.
I have tried a few solutions on line but none seemed to do the trick for me.
<FrameLayout
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/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="0">
<Button
android:id="#+id/CanelRide"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cancel Ride"
android:visibility="visible" />
</LinearLayout>
<LinearLayout
android:id="#+id/customerInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:orientation="horizontal"
android:padding="10dp"
android:visibility="visible">
<ImageView
android:id="#+id/customerProfileImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:padding="20sp"
android:src="#drawable/mainicon" />
<TextView
android:id="#+id/customerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_marginTop="2dp"
android:gravity="left"
android:paddingBottom="3dp"
android:paddingLeft="5dp"
android:paddingRight="3dp"
android:text="Both Names"
android:textColor="#color/black"
android:textSize="19dp" />
</LinearLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.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/driver_nav_header"
app:menu="#menu/driver_menu">
</android.support.design.widget.NavigationView>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
</android.support.v4.widget.DrawerLayout>

Try to use the below layout, I have changed frame layout as child & drawer layout as parent
<android.support.v4.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">
<FrameLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="0">
<Button
android:id="#+id/CanelRide"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cancel Ride"
android:visibility="visible" />
</LinearLayout>
<LinearLayout
android:id="#+id/customerInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:orientation="horizontal"
android:padding="10dp"
android:visibility="visible">
<ImageView
android:id="#+id/customerProfileImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:padding="20sp"
android:src="#drawable/mainicon" />
<TextView
android:id="#+id/customerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_marginTop="2dp"
android:gravity="left"
android:paddingBottom="3dp"
android:paddingLeft="5dp"
android:paddingRight="3dp"
android:text="Both Names"
android:textColor="#color/black"
android:textSize="19dp" />
</LinearLayout>
<android.support.design.widget.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/driver_nav_header"
app:menu="#menu/driver_menu"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"/>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>

marginRight not working in RelativeLayout

I have the following code but somehow the button I have on the right is stuck to the edge instead of having a margin of 41dp to the left of imageView. Is there anyway I can have have a working marginRight of 41dp (similar to the left button I have)
Have been stuck at this simple problem for a ridiculous amount of time, help is appreciated!
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginBottom="50dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="5dp"
app:cardCornerRadius="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="500dp">
<ImageView
android:id="#+id/image"
android:layout_width="338dp"
android:layout_height="338dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="12dp"
android:layout_marginTop="4dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
app:srcCompat="#drawable/formal" />
<ImageButton
android:id="#+id/dislike"
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="41dp"
android:layout_marginBottom="26dp"
app:srcCompat="#drawable/ic_thumbs_down_white" />
<ImageButton
android:id="#+id/like"
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="41dp"
android:layout_marginBottom="26dp"
app:srcCompat="#drawable/ic_thumbs_up_white" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:layout_marginBottom="94dp"
android:text="WEAR THIS" />
</RelativeLayout>
</android.support.v7.widget.CardView>

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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="5dp"
app:cardCornerRadius="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="338dp"
android:layout_height="338dp"
android:src="#mipmap/ic_launcher"
android:layout_margin="10dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="WEAR THIS"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginBottom="26dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:src="#mipmap/ic_launcher"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="41dp"
android:layout_marginBottom="26dp"
android:src="#mipmap/ic_launcher"/>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
The result is

About android layout with two imageView

I have movies Application
and I am working in the details of the movie layout
now I have two posters for each movie (orginal poster and backdrop poster)
I am working to make some thing like this:
I am trying to do that but I have problem which is: the backdrop poster came to the front of orginal poster and hide it (backdrop poster hide the orginal poster)
how I can send the original poster to the front of backdrop poster
this is my code:
<?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"
android:background="#ffffff"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<ImageView
android:id="#+id/iv_movie_poster1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="67dp"
android:src="#drawable/ic_launcher_background" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/relativeLayout2"
>
<ImageView
android:id="#+id/iv_movie_poster_back"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher_background" />
<!--android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"-->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_movie_poster1"
android:layout_centerHorizontal="true"
android:background="#ffff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="8dp"
android:id="#+id/relativeLayout2">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp">
<TextView
android:id="#+id/tv_movie_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#57486c"
android:padding="16dp"
android:textSize="36sp"
tools:text="The Hunger Games" />
<TextView
android:id="#+id/tv_movie_lang"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="italic"
tools:text="English" />
<TextView
android:id="#+id/tv_movie_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="7.4/10" />
<TextView
android:id="#+id/tv_movie_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
tools:text="2015"
/>
<TextView
android:id="#+id/tv_movie_overview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:text="Katniss Everdeen and Peeta Mellark become targets of the Capitol after their victory in the 74th Hunger Games sparks a rebellion in the Districts of Panem. " />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
and thankyou

Made the layout i think it will fulfill your requirement. Using Frame Layout overlay the poster image on the back image and accordingly manage.
Follow this XML part for upper layer. Make changes accordingly relate to images you used.
<?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">
<LinearLayout
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="280dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<ImageView
android:id="#+id/iv_movie_poster1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/testimage" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/iv_movie_poster_back"
android:layout_width="150dp"
android:layout_height="150dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/com_facebook_button_icon_blue" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
Here you can view the upper layer output.

Android Studio: How can I put image at the bottom of actionbar?

I'm using recyclerview that loops the images but it starts behind the actionbar as shown below. I wanted the image to appear starting below of the action bar. I tried using the android layout below but still doesn't. Any solution guys? Thanks !!!!
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/card_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.AppBarLayout
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.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" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="160dp"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin"
android:visibility="invisible"
app:backgroundTint="#color/colorFAB2"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
android:src="#drawable/ic_android_black_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="90dp"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin"
android:visibility="invisible"
app:elevation="6dp"
app:backgroundTint="#color/colorFAB1"
app:pressedTranslationZ="12dp"
android:src="#drawable/ic_android_black_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:backgroundTint="#color/colorAccent"
app:pressedTranslationZ="12dp"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_navigation"/>
</android.support.v4.widget.DrawerLayout>
Content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<com.balysv.materialripple.MaterialRippleLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lyt_parent"
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="#dimen/spacing_medium"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/img_android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/black_bg" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/shape_overlay"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
</LinearLayout>
<TextView
android:id="#+id/tv_android"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Sample Title"
android:gravity="center"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#android:color/white"
android:textStyle="normal"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</RelativeLayout>
</com.balysv.materialripple.MaterialRippleLayout>

Have you tried adding margin top to the RecyclerView ?
<android.support.v7.widget.RecyclerView
android:id="#+id/card_recycler_view"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

Resources