How to create a horizontal list of pictures with title in android?

Question

I want to have a horizontal scrolling list that include some pictures with their titles. I'm using TwoWayView (by lucasr) library and I can't show any image. If there i any way to have images in this library, please tell me how to do it. But if it doesn't support image please suggest me a better library. I'm using android studio v1.2 and I'm new to android.

[Check](http://stackoverflow.com/questions/28460300/how-to-build-a-horizontal-listview-with-recyclerview) and [Check](http://developer.android.com/intl/ru/reference/android/support/v17/leanback/widget/HorizontalGridView.html) — Skynet, Aug 20 '15 at 05:05

David Herod · Accepted Answer · 2015-08-20T05:33:19.130

2

Instead of using a library, why not just use androids horizontal scroll view and add your images to it. Here is a very rough example that you should be able to build on:

in your layout:

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/horizontalScrollView"
    android:layout_above="@+id/linearLayout3"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image_container"
        android:orientation="horizontal">

    </LinearLayout>
</HorizontalScrollView>

In your code:

LinearLayout layout = (LinearLayout) view.findViewById(R.id.image_container)
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

// Add 4 images

for (int i = 0; i < 4; i++) { 
        layoutParams.setMargins(20, 20, 20, 20);
        layoutParams.gravity = Gravity.CENTER;
        ImageView imageView = new ImageView(getActivity());
        imageView.setImageResource(R.drawable.image);
        imageView.setOnClickListener(documentImageListener);
        imageView.setLayoutParams(layoutParams);

        layout.addView(imageView);

    }

Like I said, very rough but hope it helps!

Edit: by the way the layout orientation should be "horizontal" android:orientation="horizontal">

edited Aug 20 '15 at 05:33

answered Aug 20 '15 at 05:27

David Herod

784
1
9
13

I think it's good. but getActivity() in Defining ImageView is not resolved. what should I do? – Mohammad Tahvildary Aug 20 '15 at 05:41
RecyclerView is way better though – Sheychan Aug 20 '15 at 05:46
@MohammadTahvildary you need to pass in the context. if you could post some code it would be easier to help you out – David Herod Aug 20 '15 at 07:03
@DavidHerod yes but I'm working on the UI part and the code part is not created yet. So I want to input 3 sample items and test it. – Mohammad Tahvildary Aug 20 '15 at 07:30
@MohammadTahvildary ok, so when you get to the code part paste the code into the onCreate method of your activity – David Herod Aug 21 '15 at 01:35
@DavidHerod It works great! but I have a problem. I changed getActivity() to "this" and it shows images. But no more titles. so now I have the images and I don't have the titles. What should I do? – Mohammad Tahvildary Aug 22 '15 at 08:37

score 0 · Answer 2 · answered Aug 20 '15 at 05:31

for horizontal scrolling you have not to use TwoWayView Library, you can create custom horizontal layout like this:

<LinearLayout 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:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <LinearLayout
            android:id="@+id/mygallery"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            />
    </HorizontalScrollView>

</LinearLayout>

In onCreate() method,get the id of linearLayout from the xml file and add dynamically created ImageView to linearlayout:

import java.io.File;

import android.os.Bundle;
import android.os.Environment;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

 LinearLayout myGallery;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myGallery = (LinearLayout)findViewById(R.id.mygallery);

        String ExternalStorageDirectoryPath = Environment
          .getExternalStorageDirectory()
          .getAbsolutePath();

        String targetPath = ExternalStorageDirectoryPath + "/test/";

        Toast.makeText(getApplicationContext(), targetPath, Toast.LENGTH_LONG).show();
        File targetDirector = new File(targetPath);

        File[] files = targetDirector.listFiles();
        for (File file : files){
         myGallery.addView(insertPhoto(file.getAbsolutePath()));
        }    
    }

    View insertPhoto(String path){
     Bitmap bm = decodeSampledBitmapFromUri(path, 220, 220);

     LinearLayout layout = new LinearLayout(getApplicationContext());
     layout.setLayoutParams(new LayoutParams(250, 250));
     layout.setGravity(Gravity.CENTER);

     ImageView imageView = new ImageView(getApplicationContext());
     imageView.setLayoutParams(new LayoutParams(220, 220));
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
     imageView.setImageBitmap(bm);

     layout.addView(imageView);
     return layout;
    }

    public Bitmap decodeSampledBitmapFromUri(String path, int reqWidth, int reqHeight) {
     Bitmap bm = null;

     // First decode with inJustDecodeBounds=true to check dimensions
     final BitmapFactory.Options options = new BitmapFactory.Options();
     options.inJustDecodeBounds = true;
     BitmapFactory.decodeFile(path, options);

     // Calculate inSampleSize
     options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

     // Decode bitmap with inSampleSize set
     options.inJustDecodeBounds = false;
     bm = BitmapFactory.decodeFile(path, options); 

     return bm;  
    }

    public int calculateInSampleSize(

     BitmapFactory.Options options, int reqWidth, int reqHeight) {
     // Raw height and width of image
     final int height = options.outHeight;
     final int width = options.outWidth;
     int inSampleSize = 1;

     if (height > reqHeight || width > reqWidth) {
      if (width > height) {
       inSampleSize = Math.round((float)height / (float)reqHeight);   
      } else {
       inSampleSize = Math.round((float)width / (float)reqWidth);   
      }   
     }

     return inSampleSize;   
    }

}

score 0 · Answer 3 · answered Aug 20 '15 at 05:45

0

If your goal is to show list of images in a horizontal manner u should better use Horizontal ListView. Check the link below-

Horizontal ListView

Have a look, its exactly what you want image + text

answered Aug 20 '15 at 05:45

Debu

615
7
21

score -1 · Answer 4 · answered Sep 05 '18 at 15:35

LinearLayout layout = (LinearLayout) findViewById(R.id.image_container); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

// Add 4 images

    for (int i = 0; i < 4; i++) {
        layoutParams.setMargins(20, 20, 20, 20);
        layoutParams.gravity = Gravity.CENTER;
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(R.drawable.bouton_admin);
        //imageView.setOnClickListener(documentImageListener);
        imageView.setLayoutParams(layoutParams);
        layout.addView(imageView);

    }

How to create a horizontal list of pictures with title in android?

4 Answers4