Modern android development

50 %
50 %
Information about Modern android development

Published on September 24, 2015

Author: KhiemKimXuan

Source: slideshare.net

1. Modern Android Development Computas 24.09.2015 Khiem-Kim Ho Xuan

2. Agenda • Code behind • Material Design • Pattern recommended to use

3. Code behind • Libraries: • ButterKnife • Square Otto Event Bus • Google Play Services • Support libraries • Material design • Retrofit • Dagger2 • Picasso 24.09.20153

4. ButterKnife v7.0.1 • Annotate fields with @Bind • ButterKnife will find the binded ID to the component, layout or resource ids. • Why? • Slow reflection. ButterKnife makes sure that the code is generated to perform the view lookups. Bind delegates to the generated code. • Resource Binding • Bind resources. You need to specify the Bind. For example @BindString, @BindDrawable, @BindColor, @BindDimen • Non-Activity Binding • Use @Bind to connect the component or Array. But need to specify @Bind({,….}) • Listener • Bind listeners for example annotate @OnClick({….}) or @OnItemSelected({…}) • Reset Bind • Need to clean the bindings when destroying an Activity or a Fragment using @UnBind. 24.09.20154

5. Square Otto Event Bus v1.3.8 • Decouple parts of the application for communication. • Acts as a pub-sub. • Publish • Tell Subscribers that an action has occured • Subscribe • Receive notification that an event has occured • Annotate method with @Subscribe • Register to a bus • Need to call bus.register(this). In order to receive events 24.09.20155 bus.post(new AnswerAvailableEvent(42)); @Subscribe public void answerAvailable(AnswerAvailableEvent event) { // TODO: React to the event somehow! }

6. Retrofit v2.0 • Turns HTTP API into a Java interface • Uses Annotations to describe HTTP request: • URL parameter replacement and query parameter support • Object convertsion to request body (JSON, protocol buffer) • Multipart request body and file upload • Request Method • Request Body • Multipart • Header 24.09.20156 @GET("/group/{id}/users") List<User> groupList(@Path("id") int groupId); @POST("/users/new") Call<User> createUser(@Body User user); @Multipart @PUT("/user/photo") Call<User> updateUser(@Part("photo") RequestBody photo, @Part("description") RequestBody description); @Headers({ "Accept: application/vnd.github.v3.full+json", "User-Agent: Retrofit-Sample-App" }) @GET("/users/{username}") Call<User> getUser(@Path("username") String username);

7. Dagger2 24.09.20157 • Dependency Injection making application loosely coupled. • Annotations: • @Module: classes whose methods provide dependencies • @Provides: methods within module classes • @Inject: request a dependency (a constructor, field or a method) • @Component: bridge interface between modules and injection @Module public class VehicleModule { @Provides @Singleton Motor provideMotor(){ return new Motor(); } @Provides @Singleton Vehicle provideVehicle(){ return new Vehicle(new Motor()); } } @Inject public Vehicle(Motor motor){ this.motor = motor; } @Singleton @Component(modules = {VehicleModule.class}) public interface VehicleComponent { Vehicle provideVehicle(); } // connect @modules with @inject

8. Dagger2 24.09.20158 • When everything is ready • Obtain instance of the interface and invoke its method. • Do it inside onCreate method! • Why Dagger2? • No reflection: graph validation, configuration and precondition done at compile time. • Performance gain public class MainActivity extends ActionBarActivity { Vehicle mVehicle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); VehicleComponent component = Dagger_VehicleComponent.builder().vehicleModule(new VehicleModule()).build(); mVehicle = component.provideVehicle(); Toast.makeText(this, String.valueOf(vehicle.getSpeed()), Toast.LENGTH_SHORT).show(); } }

9. Picasso v2.5.2 24.09.20159 • Load image into a view based on url or from memory • Picasso handles: • ImageView recycling and download cancelation in an adapter • Complex image transformations with minimal memory usage • Automatic memory and disk caching. • Has placeholders in case of loading or failed loading image. Picasso.with(context) .load(url) .placeholder(R.drawable.user_placeholder) .error(R.drawable.user_placeholder_error) .into(imageView);

10. Material Design • Make all apps flat as paper, • responsive animations! • Right color and shadow depths • Get inspired! • http://www.materialup.com/

11. Material Design • Use Androids Design library: • com.android.support.design • Snackbar! • Like Toast, but shows a message at the bottom of the screen Snackbar.make(mDrawerLayout, "Your message", Snackbar.LENGTH_SHORT) .setAction(getString(R.string.text_undo), this) .show();

12. Shared Element Transition 24.09.201512 • Animate different UI states in an application. • Built on • Scene: Defines UI states in an application • Transition: Defines the animated change between two scenes • Need to define transition in style.xml and also <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds> <targets> <target android:targetId="@id/ivPosterImage" /> <target android:targetId="@id/detailed_image" /> </targets> </changeBounds> <changeImageTransform> <targets> <target android:targetId="@id/ivPosterImage" /> <target android:targetId="@id/detailed_image" /> </targets> </changeImageTransform> </transitionSet>

13. Shared Element Transition 24.09.201513 <style name="AppTheme" parent="AppTheme.Base"> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowIsTranslucent">true</item> <!-- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/fade</item> <item name="android:windowExitTransition">@transition/fade</item> <!-- specify shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @transition/change_image_transform </item><transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds> <targets> <target android:targetId="@id/ivPosterImage" /> <target android:targetId="@id/detailed_image" /> </targets> </changeBounds> <changeImageTransform> <targets> <target android:targetId="@id/ivPosterImage" /> <target android:targetId="@id/detailed_image" /> </targets> </changeImageTransform> </transitionSet> <item name="android:windowSharedElementExitTransition"> @transition/change_image_transform </item> </style>

14. Floating Action Button 24.09.201514 • fabSize: set the size of the button • Normal: 56dp • Mini: 40dp • backgroundTint: set the background color of this instance • rippleColor set color of the ripple effect when pressed • src: set the icon displayed within the FAB <android.support.design.widget.FloatingActionButton android:id=”@+id/fab_normal” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/ic_plus” app:fabSize=”normal” />

15. EditText Floating Labels • Display floating labels above EditText fields. • Gives focus or hint of float. • Useful to use while data is being input • You can also add Error message 24.09.201515 <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/edit_text_email" android:layout_width="match_parent"/> </android.support.design.widget.TextInputLayout> setErrorEnabled(true); setError(getString(R.string.text_error_message));

16. Navigation View • Placed within a DrawerLayout 24.09.201516 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <FrameLayout android:id="@+id/main_content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navigation_header" app:menu="@menu/drawer" /> </android.support.v4.widget.DrawerLayout>

17. TabLayout • tabMode: set the layout to fixed or scrollable • tabGravity: set gravity of the tab, either filled (distributed to all available space between individual tabs) or centre (position tabs in the center of the TabLayout) • setText() and setIcon() • Listeners: • OnTabSelectedListener • TabLayoutOnPageChangeListener • ViewPagerOnTabSelectedListener 24.09.201517 <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" /> ViewPager pager = (ViewPager) rootView.findViewById(R.id.viewPager); pager.setAdapter(new MyPagerAdapter(getActivity().getSupportFragmentManager())); TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.sliding_tabs);tabLayout.addTab(tabLayout.newTab().setText("Tab One")); tabLayout.addTab(tabLayout.newTab().setText("Tab Two")); tabLayout.addTab(tabLayout.newTab().setText("Tab Three")); tabLayout.setupWithViewPager(pager);

18. Coordinator Layout • Super FrameLayout • Adds transition view basedon motion of other components • Lets us adapt layouts based on scroll events. • Set the property layout_scrollFlags • enterAlways – view will become visible when a downward scroll event occurs • enterAlwaysCollapsed – if view has minHeight, it will only enter at a that height and expand fully once the scrolling view reached the top. 24.09.201518 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior= "@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout /> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>

19. Support Toolbar • Use • com.android.support.appcompat-v7:<versionnumber> • Remember to style the toolbar! 24.09.201519 <android.support.v7.widget.Toolbar android:id=”@+id/my_awesome_toolbar” android:layout_height=”wrap_content” android:layout_width=”match_parent” android:minHeight=”?attr/actionBarSize” android:background=”?attr/colorPrimary” /> @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.blah); Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); setSupportActionBar(toolbar); } <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- Set AppCompat’s actionBarStyle --> <item name="actionBarStyle">@style/MyActionBarStyle</item> <!-- Set AppCompat’s color theming attrs --> <item name="colorPrimary">@color/my_awesome_red</item> <item name="colorPrimaryDark">@color/my_awesome_darker_red</item> <!-- The rest of your attributes --> </style>

20. Pattern recommended to use • Model-View-Presenter (MVP) • User interacts with the View. • There is one-to-one relationship between View and Presenter means one View is mapped to only one Presenter. • View has a reference to Presenter but View has not reference to Model. • Provides two way communication between View and Presenter. 24.09.201520

21. Firmu – The Cinema Locator App • Google Play Store • (Later on Windows Store and IOS). • Highly inspired by Material Design and modern mobile development. • Feedback on the app please  24.09.201521

22. Pitch (Beta version) • Google Play Store • (Later on Windows Store and IOS). • Highly inspired by Material Design and modern mobile development. • Feedback on the app please  24.09.201522

23. 23 © Computas AS 24.09.2015 Questions? Computas AS Tel +47 67 83 10 00 Lysaker Torg 45, pb 482 Fax +47 67 83 10 01 1327 Lysaker Org.nr: NO 986 352 325 MVA Norway www.computas.com Khiem-Kim Ho Xuan

Add a comment

Related pages

Design | Android Developers

Android Developers on YouTube Android Developers on Google+ Android Developers on Twitter. Except as noted, this content is licensed under Creative ...
Read more

Android software development - Wikipedia, the free ...

Android software development is the process by which new applications are created for the Android operating system. Applications are usually developed in ...
Read more

Modern Strike Online - Android Apps on Google Play

Cooperative online shooter with modern graphics and ... We are ready to change an idea of free online Android ... Game development ltd.
Read more

Building Your First App | Android Developers

Welcome to Android application development! This class teaches you how to build your first Android app. You’ll learn how to create an Android project ...
Read more

Android development with Android Studio - Tutorial

Android is an operating system based on the Linux kernel. The project responsible for developing the Android system is called the Android Open ...
Read more

Android Mobile Application Development Company | Android ...

We are a leading Android mobile application development company in Gurgaon, India providing quality Android apps for any Android Mobile, Tablet with cool ...
Read more

Modern Combat 4: Zero Hour – Android-Apps auf Google Play

Mindesthardwareanforderungen für Modern Combat 4: - 1 GHz CPU ... Der Android 6 Bug mit den fehlenden Texturen wurde behoben. ... Game development ltd.
Read more

Get Started with Play Games Services for Android | Play ...

Get Started with Play Games Services for Android Welcome to Android game development with the Google Play games services!
Read more

Modern Strike Online Android GamePlay #1 (By Game ...

Modern Strike Online Android GamePlay #1 (By Game development ltd) FOR MORE TOP&BEST ANDROID GAMES 2016 GAMEPLAYS, GO: http://goo.gl/xBHOMF ...
Read more

Android Development | LinkedIn

View 321124 Android Development posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more