Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tommybuonomo/creative-viewpager

Creative View Pager easy to use in Android
https://github.com/tommybuonomo/creative-viewpager

android-library creative creative-coding viewpager viewpager-transformer viewpagers

Last synced: 10 days ago
JSON representation

Creative View Pager easy to use in Android

Awesome Lists containing this project

README

        

# Creative View Pager

Creative View Pager easy to use !
This view pager library combines a header list which is scrolling automatically in coordination with the page contents.

![CreativeViewPager](/art/creative-viewpager1.gif)

## Download
```Gradle
dependencies {
implementation 'com.tbuonomo:creative-viewpager:1.0.1'
}
```

## Usage

### In your XML layout
Add `CreativeViewPager` in your activity's layout
```Xml

```
You will see a fake preview in Android Studio of the creative view.

### Custom XML Attributes
| Attribute | Description |
| --- | --- |
| `contentHorizontalPadding` | The start and end padding in dp of the content pages relative to the parent layout (by default 32dp) |
| `contentItemMargin` | Margin in dp of each content item (by default 8dp) |
| `headerItemMargin` | Margin in dp of each header item (by default 8dp) |
| `headerItemSize` | The size in dp of the header items (by default 92dp) |

### Adapter
Create your own adapter extending `CreativeViewAdapter`
```Kotlin
class NatureCreativePagerAdapter(val context: Context) : CreativePagerAdapter
```

By default, you have to override the 3 methods `instantiateHeaderItem`, `instantiateContentItem` and `getCount`.

```Kotlin
override fun instantiateHeaderItem(inflater: LayoutInflater, container: ViewGroup, position: Int): View {
// Inflate page layout
val headerRoot = inflater.inflate(R.layout.item_creative_content_nature, container, false)

// Bind the views
val title: TextView = headerRoot.findViewById(R.id.itemCreativeNatureTitle)
val image: ImageView = headerRoot.findViewById(R.id.itemCreativeNatureImage)

title.text = context.getString(R.string.item_nature_title, position)
image.setImageDrawable(context.getDrawable(NatureItem.values()[position].natureDrawable))

return headerRoot
}

override fun instantiateContentItem(inflater: LayoutInflater, container: ViewGroup, position: Int): View {
// Inflate the header view layout
val contentRoot = inflater.inflate(R.layout.item_creative_header_profile, container,
false)

// Bind the views
val imageView = contentRoot.findViewById(R.id.itemCreativeImage)

imageView.setImageDrawable(ContextCompat.getDrawable(context, NatureItem.values()[position].userDrawable))
return contentRoot
}

override fun getCount(): Int {
return NatureItem.values().size
}
```

If you want to have the cool colored background effect when you're sliding the view pager, you have to override the two methods and provide the bitmap used for specific position.

```Kotlin
override fun isUpdatingBackgroundColor(): Boolean {
return true
}

override fun requestBitmapAtPosition(position: Int): Bitmap? {
// Return the bitmap used for the position
return BitmapFactory.decodeResource(context.resources,
NatureItem.values()[position].natureDrawable)
}
```

### In your Activity / Fragment
Finally, set your adapter to the `CreativeViewPager` in your activity or fragment.
```Kotlin
creativeViewPagerView.setCreativeViewPagerAdapter(NatureCreativePagerAdapter(activity))
```

Don't forget to star the project if you like it!
![star](https://user-images.githubusercontent.com/15737675/39397370-85f5b294-4afe-11e8-9c02-0dfdf014136a.png)
== ![heart](https://user-images.githubusercontent.com/15737675/39397367-6e312c2e-4afe-11e8-9fbf-32001b0165a1.png)

## Changelog
### 1.0.1
- Rename class `CreativeViewPagerView` to `CreativeViewPager`
- Rename class `CreativeViewAdapter` to `CreativePagerAdapter`
- Rename attribute `imagesMargin` to `headerItemMargin`
- Rename attribute `imagesSize` to `headerItemSize`
- Rename attribute `contentMargin` to `contentItemMargin`
- Add the `setCurrentItem(position: Int)` to `CreativeViewPager`

[Icons](https://www.flaticon.com/packs/profession-avatars) designed by [Freepics](https://www.flaticon.com/authors/freepik) from [Flaticon](https://www.flaticon.com/)

## License
Copyright 2018 Tommy Buonomo

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.