Android support v7 palette demo

Description: In this post I'm gonna show you how to use android's support library v7 palette for extracting color from bitmap. Its can have variety of use-cases like making the background of the profile image somewhat similar to profile image or changing the whole UI as per the bitmap into the screen. Really Awesome !!!

Github project here

Lets get started.

Step 1: Add this into build.gradle.

compile 'com.android.support:palette-v7:+'

Step 2: Pass the bitmap into palette to get List<Palette.Swatch> as shown below.

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
    @Override    public void onGenerated(Palette palette) {
        swatchesList = palette.getSwatches();

        }
    }
});

Step 3: Here we have used CountDownTimer to display the RGB of the bitmap into the background of parent layout after the interval of 1sec. As shown below

mainContainer.setBackground(AppUtils.createGradient(swatch.getRgb()));

Steps 4: Lets combine everything :-)

public class MainActivity extends AppCompatActivity implements INotifyTimer {

    private static final String TAG = MainActivity.class.getName();

    private List<Palette.Swatch> swatchesList;
    private CountDownTimerPalette countDownTimer;

    private int size ;

    private RelativeLayout mainContainer;
    private ImageView circularImageView;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();

        extractColorFromBitmap();
    }

    private void init() {
        mainContainer = (RelativeLayout)findViewById(R.id.mainContainer);
        circularImageView = (ImageView)findViewById(R.id.circularImageView);
    }

    private void extractColorFromBitmap() {

        Bitmap bitmap = AppUtils.getCircleBitmap(BitmapFactory.decodeResource(MainActivity.this.getResources(), R.mipmap.capture_palette));
        circularImageView.setImageBitmap(bitmap);

        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override            public void onGenerated(Palette palette) {
                swatchesList = palette.getSwatches();

                if (swatchesList != null && swatchesList.size() > 0) {
                    countDownTimer = new CountDownTimerPalette(1000 * swatchesList.size(), 1000, MainActivity.this);
                    countDownTimer.start();
                }
            }
        });
    }

    @Override    public void onTick(int tick) {

        Palette.Swatch swatch = swatchesList.get(tick - 1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            mainContainer.setBackground(AppUtils.createGradient(swatch.getRgb()));
        }else {
            mainContainer.setBackgroundDrawable(AppUtils.createGradient(swatch.getRgb()));
        }

    }

    @Override    public void onFinish() {
        countDownTimer.start();
    }


    @Override    protected void onDestroy() {
        super.onDestroy();

        if (countDownTimer != null){
            countDownTimer.cancel();
        }
    }

}

Output:

 

Read More

Android percent support lib sample

Update: 

From API Level 26, percent support library is deprecated. Please use updated code and samples from Github project.

GitHub project HERE

In this post I'm gonna show you guys a demo of percent layout of android from support library. Since many a time in our awesome RelativeLayout we insert LinearLayout just to get the property of layout_weight for accessing.

Now android has a new support library to remove this dependencies.

Before beginning some pre-requestic (at the time for development):

• Android SDK v22
• Android Build Tools v22.0.1
• Android Percent Support Repository v23.0.0
• Android Support appcompat-v7:22.2.1

So let's get started:

Step 1: Add below line into apps build.gradle.

compile 'com.android.support:percent:23.0.0'

Step 2:  Add any one of below as the parent of the layout.Its similar to our RelativeLayout or FrameLayout.

<android.support.percent.PercentRelativeLayout> 

or

<android.support.percent.PercentFrameLayout>

Step 3: Now we gonna use layout_heightPercent and layout_widthPercent  property's to specify our height and width in percentage.

Consider this simple layout.

percent_layout.xml

Lets make it :-)

<android.support.percent.PercentRelativeLayout
    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">
    <TextView
        android:id="@+id/fifty_fifty_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center_horizontal"
        android:background="#ffff8800"
        android:text="50% - 50%"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"
         />
    <TextView
        android:id="@+id/twenty_fifty_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center_horizontal"
        android:layout_toRightOf="@id/fifty_fifty_tv"
        android:background="#ffff5566"
        android:text="20%-50%"
        android:textSize="25sp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        />

    <TextView
        android:id="@+id/thirty_fifty_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/twenty_fifty_tv"
        android:layout_gravity="center_horizontal"
        android:layout_toRightOf="@id/fifty_fifty_tv"
        android:background="#aa3628cc"
        android:text="30%-50%"
        android:textSize="25sp"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="50%"
        />
    <TextView
        android:id="@+id/century_50_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/fifty_fifty_tv"
        android:layout_gravity="center_horizontal"
        android:background="#aacacc46"
        android:text="50%-100%"
        android:textSize="25sp"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%"
        />
</android.support.percent.PercentRelativeLayout>

Thus by using the android percent support library we have made our layout simple by removing boilerplate layout.

GitHub project HERE

Really awesome :-)

Read More