Tutorial Sliding Tab Using Material Design (Best & Simple)

Today i going to share a awesome tutorial about Sliding Tab. In this tutorial we don't need a custom library, but we just use from design:support (Default Material Design)

Must see : How To Open Specific Tab

By using default material design build an awesome UI is more easier that before. That will make developers reduce their stresses hahaha. Take a look at the image below.

The result

If you are interesting with the result and need to implement to your project, then follow the several steps below :

1.  Library

Compile the design:support in your build.gradle(app : Module) :

compile 'com.android.support:design:25.0.0'

2. Create Directory Color

Create new folder in directory res and name it as color (this is directory not a xml file, they are different)

Directory color

Inside the directory color, create a new xml file. Give it name as tab_selector.xml. This selector used for coloring the text of tab's item.

There are two colors, if the tab is selected the color will change to white, if not the color will change to grey.

3.  Colors.xml

For the background of the TabLayout and the color of the selector line, you can choose from Colors.xml.

4. Creating Fragments

Create 3 fragments. Because number of the tab's item is 3. Tab 1 for Home, Tab 2 for Timeline, Tab 3 for Profile.

fragment_first.xml

FirstFragment.java

Also create next fragment for SecondFragment.java and ThirdFragment.java.

5. Creating SlidingTabAdapter.java

This adapter used for set your tab's item. Tab Home for FirstFragment, Tab Timeline for SecondFragment and Tab Profile for ThirdFragment.

Don' forget return the size of your fragment. If you used 3 fragment, so return 3 on inside method getCount().

6. Modify MainActivity.java

In this project i use MainActivity as the class where i hosting my SlidingTabAdapter. You can change with your own class.

Paste the following code :

From the code above :
Code getSupportActionBar().setElevation(0) used for hide a divider between action bar and tab layout.

Codes :

private TabLayout.Tab home;
private TabLayout.Tab timeline;
private TabLayout.Tab profile;

used for set/define your tab's item. It means you creating 3 tab's item.

Codes :

home = tabLayout.newTab();
timeline = tabLayout.newTab();
profile = tabLayout.newTab();

Means home, timeline and profile as a new tabs.

Codes :

tabLayout.addTab(home, 0);
tabLayout.addTab(timeline,1);
tabLayout.addTab(profile,2);

Means you have to define the index of your tab's item. These index will used in SlidingTabAdapter to return a fragment. For example in index 0, you will return the FirstFragment, index 1 will return SecondFragment and index 3 will return ThirdFragment.

For other explanation you can read straight from the code of MainActivity. Hope this tutorial helps you. Thank you.

Android Working With ButterKnife On Activity And Fragment

In this tutorial i going to share about one awesome library that help you easy manage your code (and i think you code more cleaner that before), the library called ButterKnife.

ButterKnife is a library that makes you more easy to cast your view. For example if you usually spent much time to find the id of your view (Red : findViewById(R.id.your_id)), this library will save a lot of your time. ButterKnife was developed by Jake Wharton.

ButterKnife

In normal code, you may do like the following code :

In code above, you will work twice, why?

First, you have to define your view : private TextView tvName; It's fine if your view is not too much, but if your view is much, you have to define you view first, after that you also have to define the id inside onCreate().

If you need more efficient work, you must use this library. As i wrote above, this library save your time much.

Library

Compile the library in your build.gradle (module : App) :

//add this line for butterknife
compile 'com.jakewharton:butterknife:7.0.1'

Usage

Define the ButteKnife inside the onCreate(), exactly below the setContentView() :

ButterKnife.bind(this);

Implementation on Activity

The code below will show you how to use butterknife to make you work more efficient. Here the code of MainActivity.java

@Bind = Use to define your view by its id. Make sure under @Bind is the view that owner of the id that has defined inside @Bind.

@OnClick = Use to the define the id that do onClickListener. In this project i use two buttons, so inside @OnClick there are an array id of the buttons.

if you just use one button (one OnClick), you don't need to use an array, just define like the following code snippet :

@OnClick(R.id.button_set_name)
public void onClickButton(){

       //Your Action

    }
}

Implementation on Fragment

Look at the code above, there is a different how to define ButterKnife. In fragment you have to write like this : ButterKnife.bind(this, view); . You have to include the view.

Hope the tutorial above is useful for you. Thank you.

Android Tutorial - Create Keyboard For Input PIN

You arrived at this page, must be looking for a easy tutorial for create a input PIN board. Right? hehe don't take seriously.

In internet you can find much tutorial how to create a input PIN board, you can follow one of them. In this tutorial, i also try to share about how to create a board for input PIN. Perhaps this tutorial the code is not efficient, but at least, i create it structurally, with you people read this article is easy to understand.

Final Result

Let start the coding ....

1. In directory res/drawable


Download this icon DELETE and EXIT or you can use your own. After downloaded place those icon in drawable directory.

Create new xml file, give it name as non_selected_item.xml. This file used as background color of indicator digit (when no filled a digit). Paste the following code :

Create new xml file, give it name as selected_item.xml. This file used as background color of indicator digit (when filled by a digit). Paste the following code :

Create new xml file, give it name as press_button_white_transparant.xml. This file used as background when the digit number is pressed. Paste the following code :

2. In directory res/values

colors.xml

dimens.xml

styles.xml

strings.xml

3. In directory res/layout

There is one layout that we use to create a keyboard. In this case i use activity_main.xml as the layout.  Paste the following code :

4. In your main package or in your java class, paste the following code. In this project i hosting the code in MainActivity.java

In every click on the key number, do like the following code :

mFrameNumber1.setOnClickListener(new View.OnClickListener() {
    @Override    public void onClick(View v) {
        if(mListPin.size() <=3){
            mListPin.add("1");
            conditioningPinButton();
        }else{

        }

    }
});

On code above, when number 1 is clicked/pressed, we'll save digit 1 to the list. If the list size less that 3, we can still add number to the list.

Full code of MainActivity.java :

That's all about the steps how to create keyboard for input PIN. Watch the following video for the final result.

Tutorial Image Transition Look Likes On Google Play When Image Clicked

Today i will share about Image transition. This image transition is look likes newer google play transition. When you clicked the image, it look like come out from its place. And when you back to the previous activity, the image will be back to its place.

That effect using ActivityOpstionCompat. How can it come back to its place or frame? because it's using TAG that placed in Activity where the image will shown.

IMPLEMENTATION

Compile the following libraries in your build.gradle(Module : apps) :

compile 'com.android.support:recyclerview-v7:23.4.0'
compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:design:23.4.0'

The effect that we'll use is default from the design support 23.4.0. Next, prepare some xml layouts and java classes :

1. ImageAdapter.java > We set the image to the imageview
2. ImageModel.java > Object where the image place before set to the ImageView
3. MainActivity.java > We set listview with adapter
4. SecondActivity.java > The image will appears here
5. activity_detail_layout.xml > The layout of SecondActivity.java
6. activity_main.xml > The layout of MainActivity.java
7. item_row.xml > The layout of ImageAdapter.java

Next we modify every xml layout and classed, like the following codes :

activity_detail_layout.xml
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/detail_image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="fitXY"
        android:src="@drawable/paketayam"/>

    <TextView
        android:id="@+id/name_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Name Of Image"/>

    <TextView
        android:id="@+id/name_owner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Name Of owner"/>

    <TextView
        android:id="@+id/desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Describe"/>
</LinearLayout>

Second, modify your item_rom.xml :
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_marginBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:id="@+id/imagedetail"
                    android:src="@drawable/paketayam"/>

                <LinearLayout
                    android:layout_marginLeft="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:orientation="vertical">

                    <TextView
                        android:gravity="center|left"
                        android:layout_weight="1"
                        android:id="@+id/name_of_picture"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="The Name of Image"/>

                    <TextView
                        android:layout_weight="1"
                        android:id="@+id/name_of_owner"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="The owner of picture"/>

                </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

Third, modify your activity_main.xml :
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.putuguna.animationwithrv.MainActivity">

    <TextView
        android:id="@+id/maintext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is the items" />

    <android.support.v7.widget.RecyclerView
        android:layout_marginTop="20dp"
        android:layout_below="@+id/maintext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerview"></android.support.v7.widget.RecyclerView>

</RelativeLayout>

Next process is write code for java classes. First we write code for model called ImageModel.java

package com.example.putuguna.animationwithrv;

/**
 * Created by putuguna on 02/06/16.
 */
public class ImageModel {

    private String mImage;
    private String mImageName;
    private String mImageOwnerName;
    private String mDesc;

    public ImageModel(String mImage, String mImageName, String mImageOwnerName, String mDesc) {
        this.mImage = mImage;
        this.mImageName = mImageName;
        this.mImageOwnerName = mImageOwnerName;
        this.mDesc = mDesc;
    }

    public ImageModel() {
    }

    public String getmImage() {
        return mImage;
    }

    public void setmImage(String mImage) {
        this.mImage = mImage;
    }

    public String getmImageName() {
        return mImageName;
    }

    public void setmImageName(String mImageName) {
        this.mImageName = mImageName;
    }

    public String getmImageOwnerName() {
        return mImageOwnerName;
    }

    public void setmImageOwnerName(String mImageOwnerName) {
        this.mImageOwnerName = mImageOwnerName;
    }

    public String getmDesc() {
        return mDesc;
    }

    public void setmDesc(String mDesc) {
        this.mDesc = mDesc;
    }
}

Next, modify your ImageAdapter.java. Please take a look clearly to the TAG_IMAGE_NAME. That tag taken from SecondActivity.java, it will lead the image back to the previous index after it back from SecondActivity.java

package com.example.putuguna.animationwithrv;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * Created by putuguna on 02/06/16.
 */
public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> {

    private List<ImageModel> mListImage;
    private Context mContext;


    public ImageAdapter(List<ImageModel> mListImage, Context mContext) {
        this.mListImage = mListImage;
        this.mContext = mContext;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row, parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mImageProduct.setImageResource(Integer.parseInt(mListImage.get(position).getmImage()));
        holder.mNameOfImage.setText(mListImage.get(position).getmImageName());
        holder.mNameOfOwner.setText(mListImage.get(position).getmImageOwnerName());
    }

    @Override
    public int getItemCount() {
        return mListImage.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        public ImageView mImageProduct;
        public TextView mNameOfImage;
        public TextView mNameOfOwner;

        public ViewHolder(View itemView) {
            super(itemView);
            mImageProduct = (ImageView) itemView.findViewById(R.id.imagedetail);
            mNameOfImage = (TextView) itemView.findViewById(R.id.name_of_picture);
            mNameOfOwner = (TextView) itemView.findViewById(R.id.name_of_owner);

            mImageProduct.setOnClickListener(this);
        }

        @Override
        public void onClick(View v) {
            int position = getAdapterPosition();

            ActivityOptionsCompat options =
                    ActivityOptionsCompat.makeSceneTransitionAnimation(
                            ((Activity)mContext), mImageProduct, SecondActivity.TAG_IMAGE_NAME);
            Intent intent = new Intent(mContext, SecondActivity.class);
            intent.putExtra("image",mListImage.get(position).getmImage());
            intent.putExtra("name-image", mListImage.get(position).getmImageName());
            intent.putExtra("owner-name", mListImage.get(position).getmImageOwnerName());
            intent.putExtra("desc", mListImage.get(position).getmDesc());
            ActivityCompat.startActivity(((Activity)mContext), intent, options.toBundle());

        }
    }
}

Modify your SecondActivity.java. Take a look to the TAG_IMAGE_NAME, that will leads the image back to previous place or index after press the back button from SecondActivity.java.

Flow : After you click the image from RecyclerView, automatically it brings a TAG for the image that clicked. When you press button back from SecondActivity, the TAG that brought by Image will searching where its place before.

package com.example.putuguna.animationwithrv;

import android.content.Intent;
import android.media.Image;
import android.support.v4.view.ViewCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class SecondActivity extends AppCompatActivity {

    public static String TAG_IMAGE_NAME = "tag_image_name";

    private ImageView mImage;
    private TextView mNameOfImage;
    private TextView mNameOfOwner;
    private TextView mDesc;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail_layout);

        mImage = (ImageView) findViewById(R.id.detail_image);
        mNameOfImage = (TextView) findViewById(R.id.name_image);
        mNameOfOwner = (TextView) findViewById(R.id.name_owner);
        mDesc = (TextView) findViewById(R.id.desc);

        String image = getIntent().getStringExtra("image");
        String imageName = getIntent().getStringExtra("name-image");
        String ownerName = getIntent().getStringExtra("owner-name");
        String desc = getIntent().getStringExtra("desc");

        ViewCompat.setTransitionName(mImage, TAG_IMAGE_NAME);

        mImage.setImageResource(Integer.parseInt(image));
        mNameOfImage.setText(imageName);
        mNameOfOwner.setText(ownerName);
        mDesc.setText(desc);
    }
}

Last, modify your MainActivity.java.

package com.example.putuguna.animationwithrv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List<ImageModel> mList;
    private ImageAdapter mAdapter;

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

        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);

        mList = new ArrayList<>();
        mList.add(new ImageModel(String.valueOf(R.drawable.drink1), "Drink 1", " Putu Joli Artaguna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink2), "Drink 2", " putu guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink3), "Drink 3", " Putu Guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink4), "Drink 4", " Putu Guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink5), "Drink 5", " Putu Guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket1), "Packet 1", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket2), "Packet 2", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket3), "Packet 3", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket5), "Packet 5", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink1), "Drink 1", " Putu Joli Artaguna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink2), "Drink 2", " putuguna.com", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink3), "Drink 3", " putuguna.com", "This is the best drink in the world."));


        mAdapter = new ImageAdapter(mList, this);
        RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
        mRecyclerView.setLayoutManager(mLayoutManager);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mRecyclerView.setAdapter(mAdapter);
    }
}

That's all, hope running well.