Stretch an image to fill 25% of the whole screen

Question

I have 4 images in an activity layout. I want to stertch each one of them to make every picture to fill 25% precent of the screen.

I mean that the screen will be devided horizontally in the middle into 2 parts. Each of the above parts will be devided vertically into another 2 parts, so eventually, I'll have 4 even parts, and each of them will contain a photo.

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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.*****">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="348dp"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:paddingBottom="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/aImg"
                    android:src="@mipmap/ic_a"/>

            </RelativeLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/bImg"
                    android:src="@mipmap/ic_b"/>

            </RelativeLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="bottom"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#fff"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/cImg"
                android:src="@mipmap/ic_c"/>

        </RelativeLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#fff"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/dImg"
                android:src="@mipmap/ic_d"/>

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

So, how can I make it and devide the screen into 4 even parts?

P.S. My question is not a duplicate, since I want to know how to divide the screen horizontally and vertically

Possible duplicate of [Android: How to change divide the screen in 3 equal buttons](http://stackoverflow.com/questions/26242554/android-how-to-change-divide-the-screen-in-3-equal-buttons) — Nigam Patro, Jul 07 '16 at 13:07
It's not a duplicate. I'm asking about how to devide the screen horizontally **and** vertically — Ido Naveh, Jul 07 '16 at 13:09
I would suggest you create a custom gridview instead and set its minimum height in adapter class. — Nitesh, Jul 07 '16 at 13:09
Do you realize, that on screens with different aspect ratio, the images will be stretched unevenly? — dev.bmax, Jul 07 '16 at 13:09
Do you want 4 square sections? Or do you just want rectangular sections of equal size? — SlashG, Jul 07 '16 at 13:13
@NiteshKumar Can you give me an example? I haven't tried using before with GridView. — Ido Naveh, Jul 07 '16 at 13:13
@SlashG I want 4 square sections, so the screen will be devided into 2 parts horizontally and every parts will be devided into 2 parts vertically — Ido Naveh, Jul 07 '16 at 13:14
Okay, you need code for this. Do you want this square layout containing four equal squares to be placed at the centre of the screen vertically? This is assuming that you're using a portrait orientation and the width would be the shorter dimension. — SlashG, Jul 07 '16 at 13:16
easiest option is GridLayout, check my answer :) see doc : https://developer.android.com/reference/android/widget/GridLayout.html see tutorial: http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources — Kushan, Jul 07 '16 at 13:41

SlashG · Accepted Answer · 2016-07-07T20:08:04.950

Since you've not accepted any answer yet, try out this

Activity XML:

<?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"
    tools:context="slashg.com.squaregridapplication.MainActivity">

    <GridLayout
        android:id="@+id/gl_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:columnCount="2"
        android:rowCount="2"/>
</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity
{

    int screenWidth;
    int squareImageWidth;
    GridLayout container;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        screenWidth = getWindowManager().getDefaultDisplay().getWidth();            // A very old method I used once in an old app
        squareImageWidth = screenWidth / 2;


        View.OnClickListener listener = new View.OnClickListener(){                 // You may want to init different listeners for different items
            @Override
            public void onClick(View v)
            {
                // TODO Add your listener code here
            }
        };


        container = (GridLayout) findViewById(R.id.gl_container);

        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));
        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));
        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));
        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));

    }

    protected ImageView getSquareImageView(@DrawableRes int image, int width, View.OnClickListener listener)
    {
        ImageView result = new ImageView(this);
        result.setLayoutParams(new ViewGroup.LayoutParams(width, width));
        result.setScaleType(ImageView.ScaleType.CENTER_CROP);                        // Or some other ScaleType depending on your need
        result.setImageResource(image);
        result.setClickable(true);       // To allow click events on the ImageView
        result.setOnClickListener(listener);
        return result;
    }

}

I've tried this code and it works for me even on a very old phone. Screenshot:

How can I set an OnClickListener for the photos? – Ido Naveh Jul 07 '16 at 15:46 — Ido Naveh, Jul 07 '16 at 15:46

dev.bmax · Answer 2 · 2016-07-07T13:30:10.943

0

Try using the PercentRelativeLayout:

<android.support.percent.PercentRelativeLayout
    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">

   <ImageView
       app:layout_widthPercent="25%"
       app:layout_heightPercent="25%"/>

   <!-- More image views -->

</android.support.percent.PercentRelativeLayout>

See the docs: https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

edited Jul 07 '16 at 13:30

answered Jul 07 '16 at 13:16

dev.bmax

8,998
3
30
41

It has the wrong closing tag name. Are you sure it supposed to be like that? – Ido Naveh Jul 07 '16 at 13:25
You are correct. Let me fix it. BTW, PercentFrameLayout is another handy layout that supports percents. – dev.bmax Jul 07 '16 at 13:29

score 0 · Answer 3 · answered Jul 07 '16 at 13:27

Try

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>


        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

if you want weight to take effect, you must set either width or height to 0dp or you get garbage layout — Kushan, Jul 07 '16 at 13:36
It's still not working... It's not deviding the screen into 2 even parts horizontally, just vertically — Ido Naveh, Jul 07 '16 at 13:40
@Kushan It is recommended to use 0dp not mandatory to give 0dp. It will work even if we give match_parent. FYI — Sujay, Jul 07 '16 at 13:44
Yea my bad, its just a performance improvement :) thanks for pointing it out — Kushan, Jul 07 '16 at 13:53

score 0 · Answer 4 · answered Jul 07 '16 at 13:29

you use weight_sum parent linearlayout weight_sum=4
child view layout_weight=1 layout_weight=1
sample code

        android:layout_height="match_parent"
        android:background="#fff"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="348dp"

            android:layout_height="wrap_content"
            android:background="#fff"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:weight_sum="4">


            <ImageView
                android:id="@+id/aImg"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="2"
                android:background="#ff0000" />

            <ImageView
                android:id="@+id/aImg2"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="2"
                android:background="#000000" />



        </LinearLayout>
        <LinearLayout
            android:layout_width="348dp"

            android:layout_height="wrap_content"
            android:background="#fff"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:weight_sum="4">


            <ImageView
                android:id="@+id/aImg"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:background="#ff0000" />

            <ImageView
                android:id="@+id/aImg2"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:background="#000000" />

            <ImageView
                android:id="@+id/aImg2"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:background="#ff0000" />

            <ImageView
                android:id="@+id/aImg2"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:background="#ff0000" />

        </LinearLayout>
    </LinearLayout>

It's still not working... It's not deviding the screen into 2 even parts horizontally, just vertically — Ido Naveh, Jul 07 '16 at 13:39
check both my answers. Easier option is GridLayout answer :) — Kushan, Jul 07 '16 at 13:42

score 0 · Answer 5 · answered Jul 07 '16 at 13:30

Follow this link for creating custom gridview http://www.rogcg.com/blog/2013/11/01/gridview-with-auto-resized-images-on-android

To achieve this you must set minimum height of the gridView item layout (in your case its gridview_item.xml) to (height of the screen)/2, where 2 is the (no.of rows you have to fill). This minimum height can be set in the adapter you are using.After that inside activity add this code to get screen size.

 DisplayMetrics metrics = new DisplayMetrics();
 getWindowManager().getDefaultDisplay().getMetrics(metrics);

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

Then inside adapter class add this

     v = inflater.inflate(R.layout.gridview_item, viewGroup, false);
     v.setMinimumHeight(MainActivity .height/6);

// Make all variables public so that you could access it.. Try it and let me know if any you face any issue.

score 0 · Answer 6 · answered Jul 07 '16 at 13:32

Use Layout_weights to evenly distribute layouts

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">

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

      <ImageView
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"/>


      <ImageView
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"/>

 </LinearLayout>


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

  <ImageView
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="1"/>


  <ImageView
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="1"/>

 </LinearLayout>

</LinearLayout>

score 0 · Answer 7 · answered Jul 07 '16 at 13:35

0

Best option since you dont want scrolling, use GridLayout as parent Layout and inside it place ImageViews:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
android:orientation="horizontal"
tools:context=".GridXMLActivity" >

<!--image view 1-->
<!--image view 2-->
<!--image view 3--> 
<!--image view 4-->   
</GridLayout>

see: http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources

answered Jul 07 '16 at 13:35

Kushan

5,855
3
31
45

Set imageViews with scaleType to centerCrop so that even images stretch – Kushan Jul 07 '16 at 13:40
It's still not showing right. This is how I get it: https://postimg.org/image/97etkxnqp/ – Ido Naveh Jul 07 '16 at 13:47
http://stackoverflow.com/questions/10016343/gridlayout-not-gridview-how-to-stretch-all-children-evenly – Kushan Jul 07 '16 at 13:50
or add android:layout_columnWeight=1 and use support v7 GridLayout : compile 'com.android.support:gridlayout-v7:22.2.1' in dependency and its respective gridlayout tag – Kushan Jul 07 '16 at 13:57

Stretch an image to fill 25% of the whole screen

7 Answers7