How to make a Carousel?

Asked

Viewed 2,200 times

3

  • 2

    You better go into more detail about your problem here because maybe no one will take the time to watch your video. Improve your questions to be more successful in your answers.

  • Sorry, my problem and the following, I need to create a Carousel to display cards as if they were pictures like a slide show

  • So man, if you don’t say what’s going wrong, no one can help you. You can’t just say you’re wrong without showing the error.

  • Better said, I need help to do. The examples I found are very confusing, that’s it.

  • Do you want someone to do it for you or do you want help solving what you tried to do? It would be like you at least post some photo, code, or something like that. I’m in my job, I can’t even open your video.

  • It’s not to do for me, I wanted an example and an explanation of creation, as I said, the examples I saw I’m finding too complicated, I’m not getting to understand the development. I deleted what I was trying to do, so I didn’t. Next time I left the code.

  • @carlosgiovanicasilo You said it’s not going very well. In order to help you better, could you say what is not working? If possible edit your question with your problem, effectively.

Show 2 more comments

1 answer

2


Come on! First you need to create an element ViewPager within your xml in this way res/layout/activity_main.xml:

XML

<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"
    android:id="@+id/relativeLayout">


    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</RelativeLayout>

To customize your Adapter, you need to create res/layout/pager_item.xml:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView" />

</LinearLayout>

Adapter

After that, you can create the adapter customized to define your ViewPager:

public class CustomPagerAdapter extends PagerAdapter {

    private Context mContext;
    private LayoutInflater mLayoutInflater;
    private int[] mResources;

    public CustomPagerAdapter(Context context, int[] resources) {
        mContext = context;
        mResources = resources;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return mResources.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((LinearLayout) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
        imageView.setImageResource(mResources[position]);

        container.addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
    }

}

Activity

Then put the following code in the onCreate in his Activity:

mViewPager = (ViewPager) findViewById(R.id.pager);

// Aqui estao suas imagens dentro do drawable
int[] mResources = {
    R.drawable.first,
    R.drawable.second,
    R.drawable.third,
    R.drawable.fourth,
    R.drawable.fifth,
    R.drawable.sixth
};

CustomPagerAdapter mCustomPagerAdapter = new CustomPagerAdapter(this, mResources);

mViewPager.setAdapter(mCustomPagerAdapter);

Behold this tutorial for more details.

Cardview

For you to make an adaptation using cardview, you need to change your res/layout/pager_item.xml:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView" />

    </android.support.v7.widget.CardView>

</LinearLayout>

The widget Cardview is part of Support Library v7. To use this widget in the project, add this Gradle dependency to the application module:

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
  • 1

    Thank you so much for your help. I’ll test it now. Thanks a lot.

  • It worked perfectly, thank you again. Now, I had a doubt, in this example is being used 6 images, when arriving at the last would have to make him continue to return to the first?

  • @carlosgiovanicasilo you could mark this question as valid and ask another question on Stackoverflow. It better improve your score, my score, and other people might also help you answer. =)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.