androidxmlimageimageviewcoverflow

Custom the Image in CoverFlow


Now I am using this coverflow: https://github.com/davidschreiber/FancyCoverFlow

I've already run the code well, but I need to my project look a little cool like this:

enter image description here

This red line is something like:

enter image description here

And I want to add the image inside this shape. How can I do that?

Here is my code:

MainActivity.java:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import at.technikum.mti.fancycoverflow.FancyCoverFlow;

public class MainActivity extends Activity {
    FancyCoverFlow fancyCoverFlow;
    ImageView imageView;
    RelativeLayout backgroundLayout;

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

        fancyCoverFlow = (FancyCoverFlow) findViewById(R.id.fancyCoverFlow);
        imageView = (ImageView) findViewById(R.id.imageView);
        backgroundLayout = (RelativeLayout)findViewById(R.id.backgroundlayout);

        final MyAdapter myAdapter = new MyAdapter(this);
        fancyCoverFlow.setAdapter(myAdapter);

        fancyCoverFlow.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                backgroundLayout.setBackgroundResource(myAdapter.getItem(position));
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });
    }
}

MyAdapter.java:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import at.technikum.mti.fancycoverflow.FancyCoverFlow;
import at.technikum.mti.fancycoverflow.FancyCoverFlowAdapter;

public class MyAdapter extends FancyCoverFlowAdapter {
    private int[] images = {R.drawable.rain,R.drawable.rain2,R.drawable.rain_forest,
            R.drawable.rain,R.drawable.rain2,R.drawable.rain_forest};
    private String[] nameImage = {"Rain1", "Rain2", "Rain3", "Rain4", "Rain5", "Rain6"};
    private Context mContext;


    public MyAdapter(Context mContext){
        this.mContext=mContext;
    }
    @Override
    public int getCount() {
        return images.length;
    }
    @Override
    public Integer getItem(int i) {
        return images[i];
    }
    @Override
    public long getItemId(int i) {
        return i;
    }


    @Override
    public View getCoverFlowItem(int i, View reuseableView, ViewGroup viewGroup) {

        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        reuseableView = inflater.inflate(R.layout.custom_layout, viewGroup, false);
        RelativeLayout rlMain =(RelativeLayout) reuseableView.findViewById(R.id.rlMain);
        rlMain.setLayoutParams(new FancyCoverFlow.LayoutParams(400,400));
        TextView txtName = (TextView) reuseableView.findViewById(R.id.txtNameimage);
        ImageView ivImage = (ImageView) reuseableView.findViewById(R.id.imageView);
        txtName.setText(nameImage[i]);
        ivImage.setImageResource(images[i]);
        return reuseableView;
    }
}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fcf="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/rain_forest"
    android:id="@+id/backgroundlayout">

    <at.technikum.mti.fancycoverflow.FancyCoverFlow
        android:id="@+id/fancyCoverFlow"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="center"
        fcf:maxRotation="80"
        fcf:unselectedAlpha="0.3"
        fcf:unselectedSaturation="0.0"
        fcf:unselectedScale="0.4"
        fcf:scaleDownGravity="0.5"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

and custom_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
    <TextView
        android:id="@+id/txtNameimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textColor="#ffffff"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Tên ảnh"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

Solution

  • I've already solved this by using Photoshop. I think using photoshop for this case is simpler than other ways.