Wednesday, 30 August 2017

Simple Carousel Layout


step 1:
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.github.moondroid.coverflow:library:1.0'
compile 'com.android.support:cardview-v7:23.0.1'

step 2:
activity_main.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"    
 xmlns:coverflow="http://schemas.android.com/apk/res-auto"   
 android:layout_width="match_parent"   
 android:layout_height="match_parent"   
 android:paddingBottom="10dp"   
 android:paddingLeft="10dp"   
 android:paddingRight="10dp"   
 android:paddingTop="10dp"   
 tools:context=".MainActivity">
    <it.moondroid.coverflow.components.ui.containers.FeatureCoverFlow        
       android:id="@+id/coverflow"        
       coverflow:coverHeight="150dp"        
       coverflow:coverWidth="100dp"        
       coverflow:maxScaleFactor="1.5"        
       coverflow:reflectionGap="0px"        
       coverflow:rotationThreshold="0.5"        
       coverflow:scalingThreshold="0.5"        
       coverflow:spacing="0.6"        
       android:layout_width="match_parent"        
       android:layout_height="match_parent" />
</RelativeLayout>
step 3:
activity_game.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
xmlns:android="http://schemas.android.com/apk/res/android       
             android:layout_width="match_parent">
             android:layout_height="wrap_content">

    <LinearLayout       
             android:layout_width="match_parent"       
             android:layout_height="wrap_content"       
             android:orientation="vertical">

        <ImageView           
 android:id="@+id/image"           
 android:layout_width="150dp"           
 android:layout_height="150dp"           
 android:layout_gravity="center"           
 android:contentDescription="@string/app_name"           
 android:scaleType="centerCrop" />

        <TextView           
             android:id="@+id/name"           
             android:layout_width="match_parent"           
             android:layout_height="wrap_content"           
             android:gravity="center"            
             android:textColor="@android:color/holo_green_dark" />
    </LinearLayout>
</android.support.v7.widget.CardView>
step 4:
item_view.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"   
             android:layout_width="140dp"   
             android:layout_height="180dp">

    <ImageView        
            android:id="@+id/image"        
            android:contentDescription="@string/app_name"        
            android:layout_width="match_parent"        
            android:layout_height="match_parent"       
            android:scaleType="centerCrop" />

    <TextView        
            android:id="@+id/name"       
            android:layout_gravity="bottom"        
            android:layout_width="match_parent"        
            android:layout_height="wrap_content"        
            android:gravity="center"        
            android:textAppearance="?android:attr/textAppearanceSmallInverse" />

</FrameLayout>
step 4:
Game.java
public class Game {
    private String name;
    private int imageSource;

    public Game (int imageSource, String name) {
        this.name = name;
        this.imageSource = imageSource;
    }

    public String getName() {
        return name;
    }

    public int getImageSource() {
        return imageSource;
    }
}
step 5:
 class name:Adapter
public class Adapter extends BaseAdapter {

    private ArrayList<Game> data;
    private AppCompatActivity activity;

    public Adapter(AppCompatActivity context, ArrayList<Game> objects) {
        this.activity = context;
        this.data = objects;
    }

    @Override    
    public int getCount() {
        return data.size();
    }

    @Override    
    public Game getItem(int position) {
        return data.get(position);
    }

    @Override   
    public long getItemId(int position) {
        return position;
    }

    @Override    
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder viewHolder;

        if (convertView == null) {
         LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.item_view, null, false);

            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.gameImage.setImageResource(data.get(position).getImageSource());
        viewHolder.gameName.setText(data.get(position).getName());

        convertView.setOnClickListener(onClickListener(position));

        return convertView;
    }

    private View.OnClickListener onClickListener(final int position) {
        return new View.OnClickListener() {

            @Override           
                public void onClick(View v) {
                final Dialog dialog = new Dialog(activity);
                dialog.setContentView(R.layout.game);
                dialog.setCancelable(true);
 // dimiss when touching outside               
                dialog.setTitle("Game Details");
                TextView text = (TextView) dialog.findViewById(R.id.name);
                text.setText(getItem(position).getName());
                ImageView image = (ImageView) dialog.findViewById(R.id.image);
                image.setImageResource(getItem(position).getImageSource());

                dialog.show();
            }
        };
    }


    private static class ViewHolder {
        private TextView gameName;
        private ImageView gameImage;

        public ViewHolder(View v) {
            gameImage = (ImageView) v.findViewById(R.id.image);
            gameName = (TextView) v.findViewById(R.id.name);
        }
    }
step 6:
MainActivity
public class MainActivity extends AppCompatActivity {

    private FeatureCoverFlow coverFlow;
    private Adapter adapter;
    private ArrayList<Game> games;

    @Override   
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        coverFlow = (FeatureCoverFlow) findViewById(R.id.coverflow);

        settingDummyData();
        adapter = new Adapter(this, games);
        coverFlow.setAdapter(adapter);
        coverFlow.setOnScrollPositionListener(onScrollListener());
    }

    private FeatureCoverFlow.OnScrollPositionListener onScrollListener() {
        return new FeatureCoverFlow.OnScrollPositionListener() {
            @Override           
            public void onScrolledToPosition(int position) {
                Log.v("MainActiivty", "position: " + position);
            }

            @Override            
            public void onScrolling() {
                Log.i("MainActivity", "scrolling");
            }
        };
    }

    private void settingDummyData() {
        games = new ArrayList<>();
        games.add(new Game(R.drawable.fruits, "FRUITS"));
        games.add(new Game(R.drawable.grape,"Grape"));
        games.add(new Game(R.drawable.guava, "Guava"));
        games.add(new Game(R.drawable.mango, "Mango"));
        games.add(new Game(R.drawable.watermelon,"WaterMelon"));
        games.add(new Game(R.drawable.panana, "Panana"));
        games.add(new Game(R.drawable.papaya, "Papaya"));
        games.add(new Game(R.drawable.peach,"Peach"));
        games.add(new Game(R.drawable.tangelo, "Tangelo"));
        games.add(new Game(R.drawable.fruits, "Fruits"));
    }
}

No comments:

Post a Comment

HOW TO CREATE CIRCLE IMAGE VIEW

Step 1: implementation 'de.hdodenhof:circleimageview:3.0.0' Step 2: <de.hdodenhof.circleimageview.CircleImageView xmlns:ap...