How to display an Imageview over Imageview

Question

I need to display 4 Imageviews like below in the image. width of each Imageview should be 2/5 of screen width as mentioned in the Image below. I tried using LinearLayout but didn't get output as I expect.

My xml code,

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/card1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageView
            android:id="@+id/card2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageView
            android:id="@+id/card3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageView
            android:id="@+id/card4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

    </LinearLayout>

What should I modify?

Answer 1

public static int getScreenWidth(Context context) {

        DisplayMetrics displaymetrics = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        windowManager.getDefaultDisplay()
                .getMetrics(displaymetrics);

        int height = displaymetrics.heightPixels;
        int width = displaymetrics.widthPixels;

        return width;
    }

use above method to calculate screen width after that multiple your ratio value with screen width:

int imageViewWidth = getScreenWidth(this) * (2/5);

now set this width to your imageView :

imageView.getLayoutParams().width = imageViewWidth;
 imageView.requestLayout();

Answer 2

    If you want to set an image over the image then you have to use `FrameLayout` or `RelativeLayout` instead of `LinearLayout`.

Otherwise, you have to use the weightSum="5"  in your Parent `LinearLayout`
<LinearLayout 
    android:weightSum="5">

    <ImageView
        android:layout_weight="1" />

    <ImageView
        android:layout_weight="1"/>

    <ImageView
        android:layout_weight="1"/>

    <ImageView
        android:layout_weight="2"/>

</LinearLayout>

Answer 3

you set the layout_weight as below:

<LinearLayout 
    android:weightSum="5">

    <ImageView
        android:layout_weight="1" />

    <ImageView
        android:layout_weight="1"/>

    <ImageView
        android:layout_weight="1"/>

    <ImageView
        android:layout_weight="2"/>

</LinearLayout>

[Note: set the weight as above manner, further code must same]

Answer 4

You need to use weightsum means you need give three imageview as weight="1" and assign weight="2" to forth image view.

Then,finally you need add total of your weight as weightsum="5" in Parent layout.So, You can got 2/5 of screen width.

Please Try this and replace your code with below :-

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:weightSum="5"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/card1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageView
            android:id="@+id/card2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageView
            android:id="@+id/card3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageView
            android:id="@+id/card4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="2"
            android:scaleType="fitCenter" />

    </LinearLayout>

It will help you.

Answer 5

I Hope this will work for you

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="5"
android:padding="10dp"
android:orientation="horizontal">

<ImageView
    android:id="@+id/card1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_weight="1"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher" />

<ImageView
    android:id="@+id/card2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_weight="1"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher" />

<ImageView
    android:id="@+id/card3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_weight="1"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher" />

<ImageView
    android:id="@+id/card4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_weight="2"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher" />

</LinearLayout>