Develop Reference

ImageView centerCrop Overflow in CardView

I doin' my daily practice. I saw this problem, the Image does not fit on Cardview.
I created a Cardview with wrap_Content Height,
Looks like this,
The code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_gradient_hydroponic"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="15dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Types of Hydroponics"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You can find out the various hydroponic systems, from how they work, the media needed and planting to making them."
android:textColor="#color/white" />
</LinearLayout>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="15dp"
android:layout_gravity="bottom"
android:background="#drawable/shape_myplants"
android:src="#drawable/ic_baseline_navigate_next_24"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
And then, when I put my background image the bg_card.png. the problem started from here. I already set android:scaleType="centerCrop" There's a gap bottom there, you can see it.
Here looks like,
The Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_gradient_hydroponic">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bg_card"
android:scaleType="centerCrop"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="15dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Types of Hydroponics"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You can find out the various hydroponic systems, from how they work, the media needed and planting to making them."
android:textColor="#color/white" />
</LinearLayout>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="15dp"
android:layout_gravity="bottom"
android:background="#drawable/shape_myplants"
android:src="#drawable/ic_baseline_navigate_next_24"/>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
This is my Final Solution, i set my ImageView android:layout_height="150dp"
The Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_gradient_hydroponic">
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:src="#drawable/bg_card"
android:scaleType="centerCrop"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="15dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Types of Hydroponics"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You can find out the various hydroponic systems, from how they work, the media needed and planting to making them."
android:textColor="#color/white" />
</LinearLayout>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="15dp"
android:layout_gravity="bottom"
android:background="#drawable/shape_myplants"
android:src="#drawable/ic_baseline_navigate_next_24"/>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
So, How can I fit my ImageView with the CardView Height of the First one? (Image 1). I'm just curious.

Well, it's done!
I do trial and error, and here's what I got. It's the responsive view.
I'm dragging the id of Imageview to the height wrap_content layout.
It'll follow the height of wrap_content layout.
just use this on your ImageView android:layout_alignBottom="#+id/height_card"
Here's an example:
Here's the code:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/height_card"
android:scaleType="centerCrop"
android:src="#drawable/shape_gradient_hydroponic" />
<LinearLayout
android:id="#+id/height_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="15dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Types of Hydroponics"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You can find out the various hydroponic systems, from how they work, the media needed and planting to making them."
android:textColor="#color/white" />
</LinearLayout>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="15dp"
android:layout_gravity="bottom"
android:background="#drawable/shape_myplants"
app:tint="#217373"
android:src="#drawable/ic_baseline_navigate_next_24"/>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>

Linearlayout above Relativelayout ( gravity bottom )

Layout wrap content not working
Below is my XML code . I want to place the portion linear layout with grey colour just above the main image . Screenshot of my code here.
In devices with aspect ratio 16:9 design is correct , but in 18:9 and 18.5:9 the grey portion is on top side .
The topic text and icon must be top left side portion of main image .
The design i want here
Never mind top side . From bottom the hight must be wrap the size of image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/light_green"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/dark_green">
<LinearLayout
android:id="#+id/topLin"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/grey"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#color/grey"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Here the main layout is RelativeLayout and the children are both layout_alignParentBottom="true"
You can just switch the child layouts around until you get the required layout
Tip: The less layouts you use, the faster rendering will be on slow devices.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
</LinearLayout>
</RelativeLayout>

I have added weightSum to parent LinearLayout so you can easily divide screen according to your requirements.
Assigned View android:layout_weight="3" so it will cover 3/10th part of the screen, you can change it according to what you feels good for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_green_light"
android:orientation="vertical"
android:weightSum="10"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="25"
android:padding="11dp"
android:background="#android:color/darker_gray"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nameTxt"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/mobile_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:background="#android:color/black"
android:padding="11dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:layout_gravity="center_vertical"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Output

Check this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:background="#android:color/darker_gray"
android:maxLength="25"
android:padding="10dp"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/test" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableStart="#drawable/ic_love"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>

Text does not fit the screen in LinearLayout

The TextViews used in the following layout do not get wrapped in the screen and go out on the left (or start) edge of the screen.
<?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:id="#+id/text_pane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:layout_gravity="end"
android:padding="#dimen/text_padding"/>
<TextView
android:padding="#dimen/text_padding"
android:layout_gravity="end"
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/video_thumbnail_image"
app:srcCompat="#drawable/video" />
</RelativeLayout>
I do not know why the text goes out of screen on the left side. I have tried using margin and padding for the RelativeLayout and LinearLayout and the two TextViews, but none of them solved the problem.
Currently, the app displays content as follows:
As you see in the code, I have also applied the gravity attribute to the TextViews, but no success yet. Does anyone know how to solve this?

Try this!!
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/dialog_alert_title"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/fingerprint_icon_content_description"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title" />
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/tv_video_descr"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/your_img" />
</android.support.constraint.ConstraintLayout>

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"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:layout_weight=".2"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:gravity="right"
android:layout_margin="3dp"
android:layout_weight=".1"
android:padding="10dp"/>
<TextView
android:padding="10dp"
android:id="#+id/tv_video_descr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight=".3"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_weight=".1"
android:scaleType="fitXY"
android:layout_alignParentRight="true"/>
</LinearLayout>
Output:

Use this layout instead.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:padding="#dimen/text_padding"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
app:srcCompat="#drawable/video" />
</LinearLayout>

How can I prevent my bottom toolbar with 3 images from being stretched out?

I have a bottom layout with three images. I want them to be equally distributed. To do this, I used the layout_weight xml property. But the visual representation of them is awful – the images are all stretched out
The images' dimension is 32*32.
The layout code for this particular toolbar is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar_bottom"
xmlns:appo="http://schemas.android.com/apk/res-auto"
android:minHeight="50dp"
android:background="#ffff8c0e"
appo:theme="#style/ToolbarTheme"
android:minWidth="50dp"
android:elevation="10dp"
>
<LinearLayout
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:id="#+id/camera_image"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/camera_icon"
/>
<ImageView
android:id="#+id/news_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="fitXY"
android:layout_weight = "1"
android:src="#drawable/new_icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:id="#+id/facebook_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image"
/>
</LinearLayout>
How can I make them appear properly?

wrap ImageView in another layout say RelativeLayout.
i.e do something like this.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:appo="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffff8c0e"
android:elevation="10dp"
android:minHeight="50dp"
android:minWidth="50dp"
appo:theme="#style/ToolbarTheme" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/camera_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/camera_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/new_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/facebook_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this will help.

Remove android:scaleType="fitXY" from your code.Because All it does is scale the bitmap up to the size of the ImageView.
Refer this.
<LinearLayout
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/camera_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/news_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/facebook_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
</LinearLayout>

Just use RelativeLayout like this:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/camera_image"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/camera_icon"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:clickable="true"
android:src="#drawable/new_icon"
android:scaleType="fitXY"/>
<ImageView
android:id="#+id/facebook_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image"/></RelativeLayout>

There is this nice library that solves by problem:). It uses bottom navigation.

set your imageview scale type as you want, there are different options
android:scaleType="fitXY"
or
center, centerCrop,centerInside,fitCenter etc

Overlapping circleView on top of two different Layouts

I am trying to obtain this:
but I was only able to obtaing this:
using this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" >
<!--android:background="#mipmap/background_poly"-->
<RelativeLayout android:id="#+id/headerL"
android:layout_width="match_parent" android:layout_height="100dp"
android:background="#color/account_grey_200">
</RelativeLayout>
<RelativeLayout android:id="#+id/account_det"
android:layout_width="match_parent" android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/usrAvatar"
android:layout_width="90dp" android:layout_height="90dp"
android:src="#mipmap/aka"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="38dp"/>
<TextView android:id="#+id/usrName"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:text="CrisRe"
android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
android:layout_toEndOf="#id/usrAvatar"
android:layout_toRightOf="#id/usrAvatar"
android:layout_alignTop="#id/usrAvatar" />
<!--android:layout_alignBaseline="#id/usrAvatar"-->
<TextView android:id="#+id/usrEmail"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="normal"
android:text="crisRe#mymail.com"
android:layout_alignLeft="#id/usrName"
android:layout_alignStart="#id/usrName"
android:layout_below="#id/usrName" />
</RelativeLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent"
android:layout_below="#+id/headerL"
android:background="#color/account_grey_400"/>
what's the matter? How can I overlap my CircleView on top of the two layouts?
I've also considered using a drawable layer-list but I wasn't able to make it work. This one seemed to be the easiest solution, though I am also considering other alternatives.

A slight modification in your xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- android:background="#mipmap/background_poly" -->
<RelativeLayout
android:id="#+id/headerL"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/account_grey_200" >
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/headerL"
android:background="#color/account_grey_400" />
<RelativeLayout
android:id="#+id/account_det"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/usrAvatar"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="38dp"
android:src="#mipmap/aka" />
<TextView
android:id="#+id/usrName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/usrAvatar"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:layout_toEndOf="#id/usrAvatar"
android:layout_toRightOf="#id/usrAvatar"
android:text="CrisRe"
android:textColor="#000000"
android:textSize="14sp"
android:textStyle="normal" />
<!-- android:layout_alignBaseline="#id/usrAvatar" -->
<TextView
android:id="#+id/usrEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/usrName"
android:layout_alignStart="#id/usrName"
android:layout_below="#id/usrName"
android:layout_marginTop="6dp"
android:text="crisRe#mymail.com"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="normal" />
</RelativeLayout>

Change the below code according to your requirements
<RelativeLayout
android:id="#+id/top_layout"
android:layout_width="match_parent"
android:background="#FFFF0000"
android:layout_height="100dp"></RelativeLayout>
<RelativeLayout
android:id="#+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_below="#+id/top_layout"
android:layout_marginTop="-45dp" //It should be half of the height
android:src="#drawable/ic_launcher" />