Implementation of Instagram with Material Design (originally based on Emmanuel Pacamalan's concept)

Overview

InstaMaterial

Updated

Current source code contains UI elements from Design Support Library. If you still want to see how custom implementations of e.g. Floating Action Button or Navigation drawer work, just checkout this source code on tag Post 8.

Source code for implementation of Instagram with Material Design (based on Emmanuel Pacamalan's concept).

INSTAGRAM with Material Design concept video

Android Arsenal

Summary

The summary of making of InstaMaterial project is available on blog: Instagram with Material Design concept is getting real

Current build

The most recent app version is available here

Full showcase of application

App showcase

Blog posts

Getting started - opening the app

Implemented elements and effects:

  • Application intro transitions
  • Toolbar
  • Floating action button
  • RecyclerView

Opening app animation


Comments transition

Implemented elements and effects:

  • Comments view enter and exit transition

Comments view transition


Feed and comment buttons

Implemented elements and effects:

  • Send button animation in comments view
  • ViewAnimator
  • Ripples
  • RecyclerView smoothness

Feed and comment buttons


Feed context menu

Implemented elements and effects:

  • Floating context menu for feed item

Context menu


Like action effects

Implemented elements and effects:

  • Like counter
  • Like button animation
  • Like photo animation
  • AnimatorSet
  • ObjectAnimator
  • TextSwitcher

Like action effects


User profile

Implemented elements and effects:

  • User profile
  • Circural user photo
  • Circural reveal transition
  • ViewPropertyAnimator

User profile


Navigation Drawer

Implemented elements and effects:

  • Navigation Drawer
  • DrawerLayoutIstaller

Navigation Drawer


Capturing photo

Implemented elements and effects:

  • Camera preview
  • Capturing photo
  • Circular reveal

Capturing photo


Publishing photo

Implemented elements and effects:

  • Custom view drawing
  • Intent flags

Publishing photo

Comments
  • when i run the code in eclipse,it seems an error ocurred.

    when i run the code in eclipse,it seems an error ocurred.

    Caused by: java.lang.NullPointerException at io.github.froger.instamaterial.ui.activity.MainActivity.setupFeed(MainActivity.java:60) at io.github.froger.instamaterial.ui.activity.MainActivity.onCreate(MainActivity.java:44)

    opened by goatatop 6
  • I discovered a bug in feed animation

    I discovered a bug in feed animation

    I discovered a bug in feed animation: if you set visibility to gone on the square image view,you will find animation just happen to first feed

    this is not discovered in current implementation cause first feed take the whole screen

    I did that cause I need to simulate feeds that dont have image or image that its height is less than screen height

    opened by ghost 2
  • Updates tools and libs to latest versions

    Updates tools and libs to latest versions

    CWAC Camera was not updated yet due to the complete API changes in the version that uses Camera2. I will open another PR with this specific update when I have more time.

    opened by rafaeltoledo 1
  • import Project,build error

    import Project,build error

    opened by clawpo 1
  • could not take a picture

    could not take a picture

    this is what i got when i'm trying to take a picture with my Galaxy S4

    04-02 16:03:11.991 27490-27490/io.github.froger.instamaterial E/AndroidRuntime﹕ FATAL EXCEPTION: main Process: io.github.froger.instamaterial, PID: 27490 java.lang.RuntimeException: setParameters failed at android.hardware.Camera.native_setParameters(Native Method) at android.hardware.Camera.setParameters(Camera.java:1747) at com.commonsware.cwac.camera.CameraView.takePicture(CameraView.java:308) at com.commonsware.cwac.camera.CameraView.takePicture(CameraView.java:279) at io.github.froger.instamaterial.ui.activity.TakePhotoActivity.onTakePhotoClick(TakePhotoActivity.java:145) at io.github.froger.instamaterial.ui.activity.TakePhotoActivity$$ViewInjector$1.doClick(TakePhotoActivity$$ViewInjector.java:35) at butterknife.internal.DebouncingOnClickListener.onClick(DebouncingOnClickListener.java:22) at android.view.View.performClick(View.java:4633) at android.view.View$PerformClick.run(View.java:19330) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:157) at android.app.ActivityThread.main(ActivityThread.java:5356) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:515) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1265) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1081) at dalvik.system.NativeStart.main(Native Method)

    opened by oussamajebali 1
  • Can't open project in Android Studio

    Can't open project in Android Studio

    This is the error I get :

    Failed to set up Android modules in project 'InstaMaterial-master': Unsupported method: SourceProvider.getJniDirectories(). The version of Gradle you connect to does not support that method. To resolve the problem you can change/upgrade the target version of Gradle you connect to. Alternatively, you can ignore this exception and read other information from the model.

    opened by C-Aniruddh 1
  • RecyclerView onItemClickListener

    RecyclerView onItemClickListener

    Would you say this approach for click listening is better? This way you can use ButterKnife's @OnClick inside the CellFeedViewHolder, but you have to pass it a listener.

    opened by egor-n 1
  • Bug in InstaMaterial App: my feed, news, setting, and all features not working #44

    Bug in InstaMaterial App: my feed, news, setting, and all features not working #44

    Expected behavior

    I want to open my feeds, news and regulators in the InstaMaterial app but it does not work, I try to go back to the homepage and then go back in the app but all the features do not work, which is when I press the news directly into new notifications, as well as my settings can set the available language in settings.

    Actual behavior

    Opening my feeds, news and settings does not work, and all the other features do not work, when I open an existing feature in the Instamaterial app all the features do not work, I have repeatedly pressed these features but it does not work too, I can only see other people's posts only, and I myself can not post my photos.

    How to reproduce

    • Browser: InstaMaterial [lates version]
    • Operating system: Android v.6.0

    Recording Of The Bug

    https://m.youtube.com/watch?v=IJS8c0GRq4I

    opened by zaid222 0
  • Strange bug on low RAM devices.

    Strange bug on low RAM devices.

    When I test this app on devices with less than 1.5GB of RAM, the app starts the first time. But then crashes. Or it crashes specifically when accessing to the "CommentsActivity". (API 18) The only log shown is this:

    I/Choreographer: Skipped 136 frames!  The application may be doing too much work on its main thread.
    A/libc: @@@ ABORTING: invalid address or address of corrupt block 0x55cf6468 passed to dlfree
    A/libc: Fatal signal 11 (SIGSEGV) at 0xdeadbaad (code=1), thread 21257
    

    Thanks!

    opened by EzequielAdrianM 0
  • Enter Animation didn't work when I moved startContentAnimation()  to onCreate()

    Enter Animation didn't work when I moved startContentAnimation() to onCreate()

    In MainActivity, when I moved startContentAnimation() into onCreate(): `@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setupFeed();

        //if (savedInstanceState == null) {
        //    pendingIntroAnimation = true;
        //} else {
        //    feedAdapter.updateItems(false);
        //}
    
        startContentAnimation();
    }`
    

    It supposed to play the recyclerview's enter animation after the activity created, but I found that the FeedItemAnimator's animateAdd didn't called, why?

    opened by oHeHeHou 0
  • How can i change the UserProfile tabs?

    How can i change the UserProfile tabs?

    all data include header,options and photos are build in just one RecyclerView In the UserProfileActivity. How can i change the photos only when click the tabs?

    opened by JiangDaYa0 0
  • Refactor this method to not always return the same value

    Refactor this method to not always return the same value

    Screenshot_19 SonarQube is saying that methods returns should not be invariant When a method is designed to return an invariant value, it may be poor design, but it shouldn't adversely affect the outcome of your program. However, when it happens on all paths through the logic, it is surely a bug.This rule raises an issue when a method contains several return statements that all return the same value. Thank you

    opened by danielmunteanu123 0
  • Add a private constructor in the Utils class to hide the implicit public one.

    Add a private constructor in the Utils class to hide the implicit public one.

    Screenshot_20 I've used SonarQube and found this bug which is not critical but it should be fixed. Utility classes should not have public constructors

    Utility classes, which are collections of static members, are not meant to be instantiated. Even abstract utility classes, which can be extended, should not have public constructors. Java adds an implicit public constructor to every class which does not define at least one explicitly. Hence, at least one non-public constructor should be defined.

    Thank you

    opened by danielmunteanu123 1
  • F-Droid

    F-Droid

    Hi,

    Since this app is Apache 2 licensed, are you considering the fact to add it to F-Droid? There is a strong community behind, that do not use Google Play nor anything else, except F-Droid.

    You can find some documentation here.

    You can write a small new build flavor to exclude non-free binaries and libraries.

    opened by Poussinou 0
  • Warning : requestLayout() improperly called

    Warning : requestLayout() improperly called

    When the likes counter is updated, this warning appears in the console.

    09-18 14:47:14.751 8414-8414/io.github.froger.instamaterial W/View: requestLayout() improperly called by android.support.v7.widget.AppCompatTextView{b2730f6 V.ED..... ......ID 0,0-143,57} during layout: running second layout pass

    I also have a TextSwitcher in my RecyclerView items and when calling textSwitcher.setTextin my ItemAnimator, i also have this warning. Would you have an idea why this is happening and how we could avoid it ?

    Thanks in advance for the help !

    opened by gmeral 1
Releases(Design_Support_Library)
Owner
Mirosław Stanek
Tech Lead at @AzimoLabs - the tech team behind Azimo.com. I dream big 🌌 🔭 and build technology for people 💻 💚 👫. #Mobile #AI #R&D.
Mirosław Stanek
Easy social network authorization for Android. Supports Facebook, Twitter, Instagram, Google+, Vkontakte. Made by Stfalcon

SocialAuthHelper A library that helps to implement social network authorization (Facebook, Twitter, Instagram, GooglePlus, Vkontakte). Who we are Need

Stfalcon LLC 97 Nov 24, 2022
Open-source alternative Instagram client on Android.

Instagram client; previously known as InstaGrabber.

Austin Huang 1.1k Jul 23, 2021
A basic instagram clone

Instafire A Approach of making instagram clone. Used kotlin for making and firebase firestore for storing and uploading data. One can login and logout

Divyansh Patel 3 Aug 6, 2021
Android Stories library - Instagram-like android stories library that supports images from disk or from internet (url)

Android Stories Library Instagram like stories library for Android. Add it in your root build.gradle at the end of repositories: allprojects { reposi

Panagiotis Makris 3 Dec 20, 2022
Cnblogs Client for Android - Material Design

Cotable - Yet Another Cnblogs Client for Android Description Cotable = Code + Stable (The Paradise of Coder) The Android client of Cnblogs that named

Steve Lemuel 38 Feb 12, 2022
Material Design ready and feature rich Twitter/Mastodon/Fanfou app for Android 4.1+.

Twidere for Android Material Design ready and feature rich Twitter/Mastodon/Fanfou app for Android 4.1+. Enjoy Fediverse now! Twidere-Android is maint

Twidere Project 2.7k Jan 1, 2023
YouJoin Android Client, a cool app of connection, use Material Design.

YouJoin-Android 简介 这个repo是YouJoin社交平台的Android客户端,代码由本人独立编写,功能和特点包括: 采用Material Design设计 登录注册 即时聊天 个人中心(支持资料编辑、头像上传) 心情动态(支持最多九张图片;支持点赞、评论) 好友关注 附近的人(采

ZZQ 298 Nov 29, 2022
GitHub client for Android based on the abandoned official app

ForkHub ForkHub started off as a fork of the official Android app from GitHub, and has since seen lots of improvements. You can see a comprehensive li

Jon Ander Peñalba 2.8k Dec 28, 2022
Implementation of Instagram with Material Design (originally based on Emmanuel Pacamalan's concept)

InstaMaterial Updated Current source code contains UI elements from Design Support Library. If you still want to see how custom implementations of e.g

Mirosław Stanek 5k Dec 27, 2022
Instagram Clone built in Android using concept of Jetpack compose.

Instagram_Clone Instagram clone is an app build using new technologies/trends and other advanced Jetpack compose specific concepts. Following are the

raj narayan mishra 4 Dec 2, 2022
Compose-Instagram-Profile-UI - Instagram profile screen UI using android jetpack compose

Compose-Intsgram-Profile-UI Instagram profile screen UI using android jetpack co

TILLERN 1 Mar 8, 2022
Clay is an Android library project that provides image trimming which is originally an UI component of LINE Creators Studio

Clay Clay is an Android library project that provides image trimming. Fully written in Kotlin, Clay is originally a UI component of LINE Creators Stud

LINE 119 Dec 27, 2022
Clone of a onboarding screen📱animation originally created by @cuberto.

BubblePager Here I tried to clone an onboarding screen animation using Jetpack Compose. Download the apk file from the release page and try it yoursel

Vivek Singh 200 Dec 30, 2022
Proof of concept Android WebView implementation based on Chromium code

Deprecation Notice This project is un-maintained. The recommended alternative is the Crosswalk Project. I did not have the time to keep the project up

Victor Costan 1.7k Dec 25, 2022
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.

TextFieldBoxes A new Material Design text field that comes in a box, based on Google Material Design guidelines. ???? 中文看这里 UPDATE NOTICE 1.4.5 Releas

Mark Wang 769 Jan 7, 2023
CuteToast is an Material Design Custom Toast for Android | Custom Material Design Toast

CuteToast is an Android Custom Toast library that could be used instead of Default Toast. It does everything as Toast but with some extra spice.

K M Rejowan Ahmmed 12 Dec 17, 2022
Maetrial Design Delete Concept Implement

MaterialDeleteLayout 说明 早上逛github的时候,发现ParticleLayout这个开源项目,觉得这个创意还可以... 从说明中又点进去看IOS的效果,也从那里看到了原设计图... 原设计图是这样子的: IOS的效果是这样的: 那一刻感觉android的效果lower了好多

CJJ 355 Nov 19, 2022
Lambë Language 7 Dec 21, 2022
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Keepsafe 5.2k Jan 9, 2023
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022