CODEWITHSUNDEEP
androidlayoutimageview
Ido Naveh
Ido Naveh

Reputation: 2492

Stretch an image to fill 25% of the whole screen

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

Upvotes: 0

Views: 95

Answers (7)

SlashG
SlashG

Reputation: 680

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: Screenshot from Samsung S7262

Upvotes: 2

Kushan
Kushan

Reputation: 5984

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

Upvotes: 0

Kushan
Kushan

Reputation: 5984

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>

Upvotes: 0

Nitesh
Nitesh

Reputation: 328

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.

Upvotes: 0

dev.bmax
dev.bmax

Reputation: 10601

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

Upvotes: 0

loadjang
loadjang

Reputation: 327

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>

Upvotes: 0

Sujay
Sujay

Reputation: 3455

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>

Upvotes: 0

Related Questions