Develop Reference

how to make transparent layout with background image in android?

Same question was asked here but I am not getting proper solution over there?. Anyone here who can get me out from this problem. I want to achieve scrolling content below the toolbar. I've added image in the background of top layout but when I scroll the content white color over the content comes out.
enter image description here
<FrameLayout
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_marginTop="-2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:orientation="horizontal"
android:background="#drawable/def"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginRight="5dp"
android:background="#drawable/searchbar_design"
android:layout_weight="3.9"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:src="#drawable/search1" />
<EditText
android:id="#+id/et_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/searchbar_design"
android:hint="Search"
android:maxLines="1"
android:textColorHint="#color/appColor"
android:padding="10dp"
android:textSize="12dp"/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="40dp"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:id="#+id/ic_crown"
android:layout_weight="0.1"
android:src="#drawable/crown" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="135sp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:scrollbars="none"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="80sp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#color/white"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iv_profile_picture"
android:layout_width="100dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:layout_height="100dp"
android:src="#drawable/anglena"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:layout_height="wrap_content">
<RelativeLayout
android:gravity="center"
android:layout_marginLeft="40dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_nameprofile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="20dp"
android:text="Angilena Steven"/>
<ImageView
android:id="#+id/btn_edit_profile"
android:layout_width="30dp"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:layout_toRightOf="#id/tv_nameprofile"
android:layout_height="25dp"
android:layout_marginLeft="10dp"
android:src="#drawable/profile_edit" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout></FrameLayout>

Align 2 linear layouts and image view inside Relative layout

I am working on an android app where I want to align 2 linear layouts in a row with image view in between these 2 layouts.I am not able to use android studio layout editor to achieve this.
Code for the layout is:
<?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:background="#android:color/white"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_toStartOf="#+id/profile_image">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:src="#drawable/face"
android:layout_height="60dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>
Current Output:
Expected Output:
2 linear layouts in a row with Image view at the center of a relative layout (With Green background)
Am I doing something wrong with the arrangement of layout? How to implement such scenario?

Change the RelativeLayout to LinearLayout (Horizontal)
set width to 0dp and weight to 1 thus they will have the same width. And use gravity to put things in the center
<?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:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="0dp"
android:src="#drawable/rounded_corner"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>

By using weight to the LinearLayout you can achieve this.
Check this code, but before copy pasting learn the logic of weight in LinearLayout:
<?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:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#ffffff"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="DEFG" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView8"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center">
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="#drawable/face" />
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="ABCD" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView3"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp" />
</LinearLayout>

How to align TextView in image center

I am try to display a textview in image center, but not working in LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/kurtis"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing" />
<ImageView
android:id="#+id/salwars"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
Any one have idea please help me.
I edited my question, this is my problem.

You could, for example, use RelativeLayout to center your TextView over the ImageView:
<?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"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/salwars"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
</LinearLayout>

You can use FrameLayout for that. It centers all its childs, like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal">
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginRight="10dp"
android:layout_weight="1">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="1">
<ImageView
android:id="#+id/salwar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
</LinearLayout>

Linear layout's weight not working on phone, working fine in xml preview in android studio

I have used layout_weight in LinearLayout in my xml file. The preview is fine, but when i run the app in a phone, the view is different.
This is the xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_dashboard"
android:textSize="25sp"/>-->
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:id="#+id/ivBrandImage"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:id="#+id/tBrandName"
android:layout_toRightOf="#+id/ivBrandImage"
android:text="Email name"
android:layout_marginLeft="#dimen/margin_left_brand_name"
android:layout_centerVertical="true"/>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tBrandName"
android:layout_toRightOf="#+id/ivBrandImage"
android:layout_marginLeft="#dimen/margin_left_brand_name"
android:layout_marginTop="6dp"
android:id="#+id/switchBrand"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_marginTop="#dimen/margin_top_dashboard_card"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginLeft="#dimen/margin_left_dashboard"
android:text="#string/textview_pending_approvals"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/margin_top_dashboard_card"
android:layout_weight="1"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/margin_left_dashboard"
android:text="#string/textview_pending_approvals"
android:gravity="center_vertical"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/margin_top_dashboard_card"
android:layout_weight="1"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/margin_left_dashboard"
android:text="#string/textview_pending_approvals"
android:gravity="center_vertical"
/>
</android.support.v7.widget.CardView>
</LinearLayout>
Following is the xml preview:
And here is the actual screenshot of same on phone:
I am not able to figure out, why is the actual screen different from the xml preview. Can someone please tell what is the mistake here?

please make it for all resolution like hdpi ,xhdip,xxhdpi,xxxhdpi.
please select your tested device resolution from here then test it again.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_dashboard"
android:textSize="25sp"/>-->
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:id="#+id/ivBrandImage"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:id="#+id/tBrandName"
android:layout_toRightOf="#+id/ivBrandImage"
android:text="Email name"
android:layout_marginLeft="#dimen/button_padding"
android:layout_centerVertical="true"/>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tBrandName"
android:layout_toRightOf="#+id/ivBrandImage"
android:layout_marginLeft="#dimen/button_padding"
android:layout_marginTop="6dp"
android:id="#+id/switchBrand"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_marginTop="#dimen/button_padding"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginLeft="#dimen/button_padding"
android:text="fjdkjk"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/button_padding"
android:layout_weight="1"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/button_padding"
android:text="jdfkjffjkjk"
android:gravity="center_vertical"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/button_padding"
android:layout_weight="1"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/button_padding"
android:text="jkgjk"
android:gravity="center_vertical"
/>
</android.support.v7.widget.CardView>
</LinearLayout>
import it -
compile 'com.android.support:cardview-v7:21.0.+'
working fine in MI4

Try the following:
Use android:layout_height="0dp" and android:layout_weight="1" for the first CardView(which contains the Image of Android logo).

Changing the parent layout of xml file from LinearLayut to RelativeLayout solved the issue. Of course, some minor changes were required to achieve the goal. Here is the xml file, which runs fine on the phone too.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:id="#+id/cvDashboardHeader">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:id="#+id/ivBrandImage"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
android:layout_centerVertical="true"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:id="#+id/tBrandName"
android:layout_toRightOf="#+id/ivBrandImage"
android:text="Email name"
android:layout_marginLeft="#dimen/margin_left_brand_name"
android:layout_centerVertical="true"/>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tBrandName"
android:layout_toRightOf="#+id/ivBrandImage"
android:layout_marginLeft="#dimen/margin_left_brand_name"
android:layout_marginTop="6dp"
android:id="#+id/switchBrand"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_below="#+id/cvDashboardHeader">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_marginTop="#dimen/margin_top_dashboard_card"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginLeft="#dimen/margin_left_dashboard"
android:text="#string/textview_pending_approvals"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/margin_top_dashboard_card"
android:layout_weight="1"
android:layout_gravity="center"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/margin_left_dashboard"
android:text="#string/textview_pending_approvals"
android:gravity="center_vertical"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="#dimen/margin_top_dashboard_card"
android:layout_weight="1"
android:layout_gravity="center"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/margin_left_dashboard"
android:text="#string/textview_pending_approvals"
android:gravity="center_vertical"
/>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>

In case of LinearLayout.It is demo through below code .You can solve your problem.
Use below code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10sp"
android:weightSum="3">
<TextView
android:id="#+id/text_kpis"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/text_color_dark"
android:textSize="#dimen/text_size_13" />
<TextView
android:id="#+id/text_target"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/txtbox_text_color_darek"
android:textSize="#dimen/text_size_13" />
<TextView
android:id="#+id/text_actual"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/txtbox_text_color_darek"
android:textSize="#dimen/text_size_13" />
</LinearLayout>
In case of Relatvie Layout
Use Below code.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:padding="10sp"
android:textColor="#android:color/white"
>
<TextView
android:id="#+id/tv_kpis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/kpi"
android:layout_alignParentLeft="true"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_16" />
<TextView
android:id="#+id/tv_target"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/traget"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_16" />
<TextView
android:id="#+id/tv_actual"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="#string/actual"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_16" />
</RelativeLayout>

Showing Loading Bar lib

Hi there I am trying to use this lib into my app
https://github.com/jlmd/AnimatedCircleLoadingView
I want it to on top of that layout, can someone please show me ho it is done?
I trying adding it but it either covered the whole screen or it would occupy a part of layout completly
layout
<?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:background="#color/postBg"
android:orientation="vertical"
tools:ignore="ContentDescription">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"/>
<LinearLayout
android:id="#+id/newStatusHeader"
style="#style/newStatusHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/postOwnerImage"
android:layout_width="60dp"
android:layout_height="60dp"/>
<LinearLayout
android:id="#+id/headerInfoContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/postsItemMargin">
<TextView
android:id="#+id/postOwnerName"
style="#style/postOwnerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/postPrivacy"
style="#style/postPublishDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/publicPrivacy"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#E9E9E9"/>
<LinearLayout
android:id="#+id/newStatusBody"
style="#style/newStatusBody"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"
android:orientation="vertical">
<ImageView
android:id="#+id/imagePreview"
android:layout_width="match_parent"
android:layout_height="170dp"
android:scaleType="centerCrop"
android:visibility="gone"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.jlmd.animatedcircleloadingview.AnimatedCircleLoadingView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/circle_loading_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:mainColor="#color/primaryColor"
app:secondaryColor="#color/primaryColorDark"
android:layout_gravity="top" />
</LinearLayout>
<EditText
android:id="#+id/statusEdittext"
style="#style/statusEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="top|left"
android:hint="#string/urStatus"
android:inputType="textMultiLine"
android:padding="5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/placePreviewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_place_black"/>
<TextView
android:id="#+id/placeValuePreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Rue Ibn ElArabi, Agadir 80000, Morocco"
android:textColor="#color/primary_high_light"/>
<TextView
android:id="#+id/removePlace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="4dp"
android:textStyle="bold"
android:textColor="#android:color/holo_red_light"
android:text="X"/>
</LinearLayout>
<LinearLayout
android:id="#+id/urlPreviewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_insert_link_black"/>
<TextView
android:id="#+id/urlValuePreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="https://www.atouchlab.com"
android:textColor="#color/primary_high_light"/>
<TextView
android:id="#+id/removeLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="4dp"
android:textStyle="bold"
android:textColor="#android:color/holo_red_light"
android:text="X"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#E9E9E9"/>
<LinearLayout
android:id="#+id/newStatusFooter"
style="#style/newStatusFooter"
android:layout_width="match_parent"
android:layout_height="65dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="65dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/addPhoto"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_camera_button"
android:layout_gravity="center" />
<ImageButton
android:id="#+id/addPlace"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_place_button"
android:layout_gravity="center" />
<ImageButton
android:id="#+id/addLink"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_insert_link_button"
android:layout_gravity="center" />
<ImageButton
android:id="#+id/changePrivacy"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_privacy_button"
android:layout_gravity="center" />
</LinearLayout>
<ImageButton
android:id="#+id/sendStatus"
style="#style/actionAreaBtns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_publish_button"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
lib layout
<com.github.jlmd.animatedcircleloadingview.AnimatedCircleLoadingView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/circle_loading_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#color/background"
android:layout_centerInParent="true"
app:mainColor="#color/main_color"
app:secondaryColor="#color/secondary_color"
/>

Your problem can be solved using an relative layout that wraps the view where you want the LoadingView to be on top of, ex:
<RelativeLayout>
<com.github.jlmd.animatedcircleloadingview.AnimatedCircleLoadingView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/circle_loading_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:mainColor="#color/primaryColor"
app:secondaryColor="#color/primaryColorDark"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/circle_loading_view">
//the view on top of witch the loading bar should be
</LinearLayout>
</RelativeLayout>