Latest Release API ![License](https://img.shields.io/badge/license-Apache 2.0-brightgreen.svg?style=flat)

AppCompat-Extension-Library

Header Graphics for the AppCompat Extension Library

Google's AppCompat Design Library provides some awesome components for your development and design needs. For some applications though those just aren't enough. This library tries to fill the gap and provides additional common components building on the official AppCompat Design Library. If you have any additional features you'd like to see as part of this ongoing effort feel free to open a new issue.

Currently there are the following components:

There are wikis for every component that explain the setup in more depth, so be sure to check them out. Here's a link to the Wiki Home Page

Importing the library

This library is available as a gradle dependency via JitPack.io. Just add the following lines to your app module build.gradle:

repositories { 
    maven { url "https://jitpack.io" }
}
dependencies {
    compile 'com.github.TR4Android:AppCompat-Extension-Library:v0.5.1'
}

The latest Release is Release 0.5.1. You can download a sample.apk with this release.

AccountHeaderView

The AccountHeaderView is a component that allows easy switching between accounts in the navigation drawer by clicking on the avatars on the header or by choosing from the dropdown list.

Main features:
Basic setup:

Use the following layout as the app:headerLayout of the AppCompat Design Library's NavigationView:

<com.tr4android.support.extension.widget.AccountHeaderView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/account_header_cover_background"
    android:layout_width="match_parent"
    android:layout_height="@dimen/account_header_height" />

Then add your accounts to the AccountHeaderView and add a listener for account selections:

accountHeaderView.addAccounts(new Account().setName("TR4Android").setEmail("[email protected]").setIconResource(R.drawable.account_drawer_profile_image_tr4android), ...);
accountHeaderView.setAccountSelectedListener(new AccountHeaderView.OnAccountSelectedListener() {
    @Override
    public void onAccountSelected(Account account) {   }

    @Override
    public void onAccountAddSelected() {   }

    @Override
    public void onAccountManageSelected() {   }
});

For the full documentation and customization options head over to the AccountHeaderView wiki.

FloatingActionMenu

The FloatingActionMenu is a wrapper for multiple FloatingActionButtons that takes the first FloatingActionButton as the main button that stays on screen and flings out all other FloatingActionButtons in speed dial fashion.

Main features:
Basic setup
<com.tr4android.support.extension.widget.FloatingActionMenu
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom" >

    <!-- Floating Action Buttons -->

</com.tr4android.support.extension.widget.FloatingActionMenu>

For the full documentation and customization options head over to the FloatingActionMenu wiki.

CircleImageView

The CircleImageView is a supercharged ImageView that provides the ability to set circular images as well as placeholders.

Main features:
Basic setup:

Instead of the default ImageView use the following in your layouts:

<com.tr4android.support.extension.widget.CircleImageView
    android:layout_width="40dp"
    android:layout_height="40dp" />

Then use setImage...() to set a circular image or setPlaceholder() to set a placeholder.

For the full documentation and customization options head over to the CircleImageView wiki.

Picker Dialogs

The AppCompatDatePickerDialog and AppCompatTimePickerDialog are native Android implementations of the picker dialogs detailed in the official Material Design guidelines.

Main features:

Basic setup:

Setup your app theme by including the following lines (for dark themes remove the .Light part):

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- other attributes -->
    <item name="datePickerDialogTheme">@style/Theme.AppCompat.Light.DatePickerDialog</item>
    <item name="timePickerDialogTheme">@style/Theme.AppCompat.Light.TimePickerDialog</item>
</style>

Then use the AppCompatDatePickerDialog or AppCompatTimePickerDialog inside a DialogFragment (this example shows the AppCompatDatePickerDialog, but the process is quite similiar with the AppCompatTimePickerDialog):

public static class DatePickerFragment extends DialogFragment implements AppCompatDatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Create a new instance of AppCompatDatePickerDialog and return it
        return new AppCompatDatePickerDialog(getActivity(), this, 2017, 3, 13);
    }

    public void onDateSet(AppCompatDatePicker view, int year, int month, int day) {
        // Do something with the date chosen by the user
    }
}

And later show this DialogFragment anywhere you need it:

DialogFragment datePicker = new DatePickerFragment();
datePicker.show(getSupportFragmentManager(), "datePicker");

For the full documentation and customization options head over to the Picker Dialogs wiki.

FlexibleToolbarLayout

The FlexibleToolbarLayout is a more advanced alternative to the already powerful CollapsingToolbarLayout that excels by also providing a scaled icon and subtitle along with the title.

Main features:
Basic setup:
<android.support.design.widget.CoordinatorLayout>
    ...
    <android.support.design.widget.AppBarLayout>

        <com.tr4android.support.extension.widget.FlexibleToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="My title"
            app:subtitle="My subtitle"
            app:icon="@drawable/ic_my_icon"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </com.tr4android.support.extension.widget.FlexibleToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Then update your FlexibleToolbarLayout at runtime by using setTitle(), setSubtitle or setIcon().

For the full documentation and customization options head over to the FlexibleToolbarLayout wiki.

Delightful Detail Drawables

The Delightful Detail Drawables provide ready-to-use implementations of the beautifully crafted animations presented in the Delightful Details section of the Material Design guidelines.

Main features:
Basic setup:
// build a new MediaControlDrawable
final MediaControlDrawable drawable = new MediaControlDrawable.Builder(this)
        .setColor(Color.WHITE) // ... more options
        .build();
// build a new IndeterminateProgressDrawable
final IndeterminateProgressDrawable drawable = new IndeterminateProgressDrawable.Builder(this)
        .setColor(Color.WHITE) // ... more options
        .build();

For the full documentation and customization options head over to the Delightful Detail Drawables wiki.

TypefaceCompat

The TypefaceCompat utility has been removed in version 0.5.0 of this library. The official downloadable fonts or FontsContractCompat should be used instead. While apps will continue to compile, the Roboto typeface will no longer be applied on pre-Lollipop devices as the associated resources have been removed to conserve space.

The TypefaceCompat is a utility for supporting the newest Typography. It automatically sets the text size, color and typeface for the styles specified in the guidelines.

Main features:
Basic setup:

In your Activity (for ease of use in your BaseActivity, if you have one) add the following line before super.onCreate():

public class SampleActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        TypefaceCompatFactory.installViewFactory(this);
        super.onCreate(savedInstanceState);
        ...
    }
}

Then use one of the TextAppearance.AppCompat.xxx styles via android:textAppearance="@style/TextAppearance.AppCompat.xxx" on your TextViews.

To achieve the correct line height use one of the predefined line_spacing_extra_xxx values via android:lineSpacingExtra="@dimen/line_spacing_extra_xxx" on your TextView.

For the full documentation and customization options head over to the TypefaceCompat wiki.

License

Copyright 2015 Thomas Robert Altstidl & fountaingeyser

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.

For the licenses of the dependencies check out the Licenses wiki.