create custom imageview - listview

Question

I would like to create below row for a ListView that each row has two Imageviews and the user can touch each of them (To open Activity).

How can I do ? I must create a custom ImageView ?

Answer 1

Might be this will help you in some case

Bitmap setBitmapInTriangleShape(Bitmap bitmap1, Bitmap bitmap2,
        Bitmap bitmap3) {
    /*
     * int[] values= new int[2]; mImageView.getLocationOnScreen(values);
     */
    double screenHeightAspect = 2.5;
    Bitmap drawnBitmap = null;

    bitmap1 = Bitmap.createScaledBitmap(bitmap1, screenWidth,
            (int) (screenHeight / screenHeightAspect), true);
    bitmap2 = Bitmap.createScaledBitmap(bitmap2, screenWidth,
            (int) (screenHeight / screenHeightAspect), true);
    bitmap3 = Bitmap.createScaledBitmap(bitmap3, screenWidth,
            (int) (screenHeight / screenHeightAspect), true);

    try {
        drawnBitmap = Bitmap
                .createBitmap(screenWidth,
                        (int) (screenHeight / screenHeightAspect),
                        Config.ARGB_8888);
        Canvas canvas = new Canvas(drawnBitmap);
        canvas.drawColor(Color.TRANSPARENT);

        // ---------------------------------------------------------------
        Paint paint = new Paint();
        paint.setStrokeWidth(4);
        paint.setColor(getResources().getColor(
                R.color.gray_divider_reg_edit_grid_1));
        paint.setStyle(Paint.Style.FILL_AND_STROKE);

        Path path = new Path();
        BitmapShader bms = new BitmapShader(bitmap1, TileMode.CLAMP,
                TileMode.CLAMP);
        paint.setStyle(Style.FILL);
        paint.setShader(bms);
        // bms.setLocalMatrix(matrix);

        // -----------------=for photo 1-----------------------------
        path.reset();
        path.setFillType(Path.FillType.EVEN_ODD);

        path.lineTo(0, 0);
        path.lineTo((int) (screenWidth * 0.80), 0);
        // path.lineTo(0, 15);
        path.lineTo(0, (int) (screenHeight * 0.8706 / screenHeightAspect));
        path.close();
        canvas.drawPath(path, paint);

        Matrix mt = new Matrix();

        canvas.drawBitmap(bitmap1, new Matrix(), null);
        // -------------------for photo 3-----------------------------
        BitmapShader bmsUo = new BitmapShader(bitmap3, TileMode.CLAMP,
                TileMode.CLAMP);
        paint.setStyle(Style.FILL);
        paint.setShader(bmsUo);
        // bms.setLocalMatrix(matrix);

        path.reset();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo((int) (screenWidth * 0.80), 0);
        path.lineTo((int) (screenWidth * 0.80), 0);
        path.lineTo(screenWidth, 0);
        path.lineTo(screenWidth, (int) (screenHeight / screenHeightAspect));
        // path.lineTo(800,800);
        path.lineTo((int) (screenWidth * 0.88),
                (int) (screenHeight / screenHeightAspect));

        path.lineTo((int) (screenWidth * 0.50),
                (int) (screenHeight * 0.32 / screenHeightAspect));

        path.close();
        canvas.drawPath(path, paint);

        // ---------------------for photo 2-------------------------
        BitmapShader bmsUop = new BitmapShader(bitmap2, TileMode.CLAMP,
                TileMode.CLAMP);
        paint.setStyle(Style.FILL);
        paint.setShader(bmsUop);
        // bmsUop.setLocalMatrix(matrix);
        path.reset();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo((int) (screenWidth * 0.50),
                (int) (screenHeight * 0.32 / screenHeightAspect));
        path.lineTo((int) (screenWidth * 0.50),
                (int) (screenHeight * 0.32 / screenHeightAspect));
        path.lineTo((int) (screenWidth * 0.88),
                (int) (screenHeight / screenHeightAspect));
        path.lineTo(0, (int) (screenHeight / screenHeightAspect));
        path.lineTo(0, (int) (screenHeight / screenHeightAspect * 0.8706));

        path.close();
        canvas.drawPath(path, paint);

    } catch (Exception e) {
        e.printStackTrace();
    }
    return drawnBitmap;

}

for more information you can visit here

Answer 2

Thanks to @Fashizel at How to create a layout that's split diagonally and the two halves are clickable?

Layout:

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

<FrameLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:id="@+id/frameLayout">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image1"
        android:src="@drawable/image01"
        />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image2"
        android:src="@drawable/image02"
        />

</FrameLayout>

MainActivity.java:

public class MainActivity extends ActionBarActivity {

Context mContext = this;

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

    FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frameLayout);
    if (frameLayout != null) {
        frameLayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                if(event.getAction() == MotionEvent.ACTION_DOWN){
                    if(calcPlace(event.getX()) < calcPlace(event.getY())){
                        /// go to onClick for the right triangle
                        Toast.makeText(mContext,"onClick for the right triangle", Toast.LENGTH_LONG).show();
                    }
                    else {
                        /// go to onClick for the left triangle
                        Toast.makeText(mContext,"onClick for the left triangle", Toast.LENGTH_LONG).show();
                    }
                }
                return false;
            }
        });
    }
}

private float calcPlace(float x){
    return 100 - x;
}   

...
}

02 image files: 02 triangles

Just a demo for the image views, you can use for your views

Hope this help!