Inflated images go out of screen

Question

What should I do to place 4th and 5th image in the next line, here how it looks:

4th and 5th image go out of screen how to fix that?

MainActivity:

LayoutInflater l = getLayoutInflater();
LinearLayout ll = (LinearLayout) findViewById(R.id.main);


Integer odpowiedzi[] = {R.drawable.kwiaty1, R.drawable.kwiaty2, R.drawable.kwiaty3, R.drawable.kwiaty4, R.drawable.kwiaty5};

for (Integer odp : odpowiedzi) {
    View v = l.inflate(R.layout.activ2, null);
    ImageView b = (ImageView) v.findViewById(R.id.imageView6);
    b.setImageResource(odp);
    ll.addView(v);

activ2.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
     android:layout_height="match_parent">

     <ImageView
         android:layout_width="100dp"
         android:layout_height="100dp"
         android:id="@+id/imageView6"/>
</LinearLayout>

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="horizontal"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/main">
</LinearLayout>

There are many ways you could fix that. But there is no as simple, automatic way to do it and just wrap it. You'd probably need another layout and adapter. But it really depends on kind of scenario that you have. — xklakoux, Jun 06 '16 at 17:39
Possible duplicate of [Android Horizontal LinearLayout - Wrap Elements](http://stackoverflow.com/questions/14528381/android-horizontal-linearlayout-wrap-elements) — xklakoux, Jun 06 '16 at 17:40

score 0 · Answer 1 · answered Jun 06 '16 at 17:49

Make linear layout main layout vertically align

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/main">
    </LinearLayout>

Now handle adding layout dynamically like this

get screen width

public static int getScreenWidth() {
    return Resources.getSystem().getDisplayMetrics().widthPixels;
}

public static float convertDpToPixel(float dp, Context context){
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * ((float)metrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT);
    return px;
}

if screen width is more than 500dp add another horizontal aligned linear layout in main layout and add imageViews in it.

else if screen width is less than 500dp add first horizontal aligned linear layout in main layout and add imageViews in it. And then add another horizontal aligned linear layout in main layout and add remain imageViews in it

 // Create new LinearLayout
    LinearLayout linearLayout = new LinearLayout(this);
    linearLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT));
    linearLayout.setOrientation(LinearLayout.HORIZONTAL);

    // Add textviews
    TextView textView1 = new TextView(this);
    textView1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
            LayoutParams.WRAP_CONTENT));
    textView1.setText("programmatically created TextView1");
    textView1.setBackgroundColor(0xff66ff66); // hex color 0xAARRGGBB
    textView1.setPadding(20, 20, 20, 20); // in pixels (left, top, right, bottom)
    linearLayout.addView(textView1);

    TextView textView2 = new TextView(this);
    LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
            LayoutParams.WRAP_CONTENT);
    layoutParams.gravity = Gravity.RIGHT;
    layoutParams.setMargins(10, 10, 10, 10); // (left, top, right, bottom)
    textView2.setLayoutParams(layoutParams);
    textView2.setText("programmatically created TextView2");
    textView2.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
    textView2.setBackgroundColor(0xffffdbdb); // hex color 0xAARRGGBB
    linearLayout.addView(textView2);

    // Set context view
    mainLinearLayout.addView(linearLayout);

score 0 · Answer 2 · answered Jun 06 '16 at 18:07

Try change the width of the LinearLayout on activ2 to 0px and weight 1. In the ImageView add android:adjustViewBounds="true" to fit parent. In activ1 change the width to match_parent with some padding.

That way the images sizes will be even distributed and should match their parent.

Tristan Richard · Answer 3 · 2016-06-06T19:02:26.830

Try with:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:id="@+id/imageView6"
    android:adjustviewbounds="true"
    android:layout_weight="1"/>
</LinearLayout>

And your activity

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/main"
android:weightsum="NUMBER_OF_OBJECTS" >
</LinearLayout>

Hope it helps!

Inflated images go out of screen

3 Answers3