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 �

Solution 1:

wrap ImageView in another layout say RelativeLayout.

i.e do something like this.

<android.support.v7.widget.Toolbarxmlns: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" ><LinearLayoutxmlns: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" ><RelativeLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1" ><ImageViewandroid: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><RelativeLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1" ><ImageViewandroid: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><RelativeLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1" ><ImageViewandroid: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.

Solution 2:

Remove android:scaleType="fitXY" from your code.Because All it does is scale the bitmap up to the size of the ImageView.

Refer this.

<LinearLayoutandroid:id="@+id/toolbarmenucontainer"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:weightSum="3"><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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>

Solution 3:

Just use RelativeLayout like this:

<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid: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"
        /><ImageViewandroid: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"/><ImageViewandroid: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>

Solution 4:

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

Solution 5:

set your imageview scale type as you want, there are different options

android:scaleType="fitXY"

or center, centerCrop,centerInside,fitCenter etc