Se você precisa implementar um botão parecido ou amor ou um botão favorito, então este tutorial é para você. Vamos explorar algumas soluções de código aberto que podem permitir que você consiga isso. Fazemos isso passo a passo usando amostras de código.
(a). Como Button
LikeButton é uma biblioteca que permite criar um botão com efeitos de animação semelhantes ao coração do Twitter quando você gosta de algo.
Aqui está a demonstração:
Etapa 1: Instalação
**Repositório***
Comece registrando o Repositório:
Adicione isto em seu arquivo build.gradle raiz (não em seu arquivo build.gradle do módulo):
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}**dependência***
Em seguida, adicione o seguinte estado de implementação no arquivo build.gradle do seu módulo:
implementation 'com.github.jd-alexander:LikeButton:0.2.3'Por padrão, você receberá o botão do coração com o código acima.
Passo 2: Adicionar ao Layout
O próximo passo é adicionar o botão LikeButton em seu layout xml:
<com.like.LikeButton
app:icon_type="heart"
app:icon_size="25dp"
android:id="@+id/star_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>Explore abaixo os atributos que você pode usar com esta biblioteca:
<com.like.LikeButton
app:icon_type="Star"
app:circle_start_color="@color/colorPrimary"
app:like_drawable="@drawable/thumb_on"
app:unlike_drawable="@drawable/thumb_off"
app:dots_primary_color="@color/colorAccent"
app:dots_secondary_color="@color/colorPrimary"
app:circle_end_color="@color/colorAccent"
app:icon_size="25dp"
app:liked="true"
app:anim_scale_factor="2"
app:is_enabled="false"
/>Aqui está como você pode, por exemplo, definir declarativamente um tipo de recurso de ícone:
app:icon_type="heart"Passo 3: Ouvir os eventos
Agora você pode programar um manipulador de eventos no botão de seu código, e ouvir eventos semelhantes ou não:
likeButton.setOnLikeListener(new OnLikeListener() {
@Override
public void liked(LikeButton likeButton) {
}
@Override
public void unLiked(LikeButton likeButton) {
}
});Você também pode programar um tipo de ícone como abaixo:
likeButton.setIcon(IconType.Star);E para definir o tamanho do ícone:
likeButton.setIconSizePx(40);
likeButton.setIconSizeDp(20);Referência
Abaixo está o link para download do projeto de exemplo.
| Número | Link |
|---|---|
| 1. | Ler mais |
| 2. | Download |
| 3. | Follow code author |
(b). MaterialFavoriteButton
Um botão animado favorito/estrela/like para andróide.
Aqui está a demonstração desta biblioteca:
Vamos ver como usar este pacote.
Passo 1: Instale-o
Comece instalando-o. Adicione a seguinte declaração de implementação em seu nível de módulo build.gradle:
implementation 'com.github.ivbaranov:materialfavoritebutton:0.1.5'Em seguida, sincronize para baixá-lo.
Passo 2: Adicionar ao Layout
A seguir você precisa adicionar MaterialFavoriteButton ao seu layout xml:
<com.github.ivbaranov.mfb.MaterialFavoriteButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Aqui estão os atributos xml que podem ser utilizados:
app:mfb_state="false" // default button state
app:mfb_animate_favorite="true" // to animate favoriting
app:mfb_animate_unfavorite="false" // to animate unfavoriting
app:mfb_padding="12" // image padding
app:mfb_favorite_image="@drawable/ic_fav" // custom favorite resource
app:mfb_not_favorite_image="@drawable/ic_not_fav"// custom not favorite resource
app:mfb_rotation_duration="400" // rotation duration
app:mfb_rotation_angle="360" // rotation angle
app:mfb_bounce_duration="300" // bounce duration
app:mfb_color="black" // black or white default resources (enum)
app:mfb_type="star" // star or heart shapes (enum)
app:mfb_size="48" // button size
Passo 3: Escrever Código
Você pode então escrever seu código ou em kotlin ou java. Por exemplo, você pode programar a criação do MaterialFavoriteButton sem adicioná-lo ao layout. Você faz isso da seguinte forma:
MaterialFavoriteButton favorite = new MaterialFavoriteButton.Builder(this)
.create();Para obter o status de favorito/desfavorito ou semelhante/desfavorecido, você anexa um manipulador de eventos da seguinte forma:
favorite.setOnFavoriteChangeListener(
new MaterialFavoriteButton.OnFavoriteChangeListener() {
@Override
public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
//
}
});
**Usagem na RecyclerView***
Para evitar acionar a animação durante a renderização da visualização do item, certifique-se de definir o estado do botão favorito no onBindViewHolder sem animação:
favoriteButton.setFavorite(isFavorite(data.get(position)));Exemplo completo
Vejamos agora um exemplo completo escrito em Java. Comece instalando a biblioteca, como já havíamos discutido anteriormente.
Em seguida, crie um layout xml:
**content_main.xml***
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Basic"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="@string/ipsum_1" />
<com.github.ivbaranov.mfb.MaterialFavoriteButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Nice"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="@string/ipsum_en_1914_1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/starred_margin"
android:text="@string/starred" />
<TextView
android:id="@+id/counter_value"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/counter_text"
android:layout_marginLeft="@dimen/counter_value_margin" />
<com.github.ivbaranov.mfb.MaterialFavoriteButton
android:id="@+id/favorite_nice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
app:mfb_rotation_duration="400"
app:mfb_rotation_angle="216"
app:mfb_bounce_duration="700" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Custom"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<com.github.ivbaranov.mfb.MaterialFavoriteButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
app:mfb_rotation_duration="700"
app:mfb_rotation_angle="360"
app:mfb_favorite_image="@drawable/ic_event_available_black_24dp"
app:mfb_not_favorite_image="@drawable/ic_event_busy_black_24dp"
app:mfb_animate_unfavorite="true"
app:mfb_bounce_duration="0" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="@string/ipsum_2" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
Em seguida, você substitui seu código "atividade principal" pelo seguinte:
**MainActivity.java***
public class MainActivity extends AppCompatActivity {
private TextView niceCounter;
private int niceCounterValue = 37;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//in the toolbar
MaterialFavoriteButton toolbarFavorite = new MaterialFavoriteButton.Builder(this) //
.favorite(true)
.color(MaterialFavoriteButton.STYLE_WHITE)
.type(MaterialFavoriteButton.STYLE_HEART)
.rotationDuration(400)
.create();
toolbar.addView(toolbarFavorite);
toolbarFavorite.setOnFavoriteChangeListener(
new MaterialFavoriteButton.OnFavoriteChangeListener() {
@Override
public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
Snackbar.make(buttonView, getString(R.string.toolbar_favorite_snack) + favorite,
Snackbar.LENGTH_SHORT).show();
}
});
//nice cardview
niceCounter = (TextView) findViewById(R.id.counter_value);
niceCounter.setText(String.valueOf(niceCounterValue));
MaterialFavoriteButton materialFavoriteButtonNice =
(MaterialFavoriteButton) findViewById(R.id.favorite_nice);
materialFavoriteButtonNice.setFavorite(true, false);
materialFavoriteButtonNice.setOnFavoriteChangeListener(
new MaterialFavoriteButton.OnFavoriteChangeListener() {
@Override
public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
if (favorite) {
niceCounterValue++;
} else {
niceCounterValue--;
}
}
});
materialFavoriteButtonNice.setOnFavoriteAnimationEndListener(
new MaterialFavoriteButton.OnFavoriteAnimationEndListener() {
@Override
public void onAnimationEnd(MaterialFavoriteButton buttonView, boolean favorite) {
niceCounter.setText(String.valueOf(niceCounterValue));
}
});
}
@Override public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Referência
Encontre o link para download abaixo:
| Número | Link | Link |
|---|---|---|
| 1. | Ler mais | |
| 2. | Download | |
| 3. | Follow code author |
(c). SpartButton
Biblioteca Android para criar botões com o coração do Twitter como animação.
Esta biblioteca suporta API 14+.
Aqui está uma demonstração da mesma em uso:
Para utilizá-lo:
Passo 1: Instalá-lo
Você precisa instalá-lo primeiro. Por estar hospedado no jitpack, registre o jitpack como segue em seu arquivo build.gradle de nível de raiz:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}Em seguida, acrescente sua declaração de implementação:
implementation 'com.github.varunest:sparkbutton:1.0.6'Sync para fazer o download.
Passo 2: Adicionar ao Layout
Agora você precisa adicionar SparkButton ao seu layout xml:
<com.varunest.sparkbutton.SparkButton
android:id="@+id/spark_button"
android:layout_width="40dp"
android:layout_height="40dp"
app:sparkbutton_activeImage="@drawable/active_image"
app:sparkbutton_inActiveImage="@drawable/inactive_image"
app:sparkbutton_iconSize="40dp"
app:sparkbutton_primaryColor="@color/primary_color"
app:sparkbutton_secondaryColor="@color/secondary_color" />Aqui estão os atributos aplicáveis:
<attr name="sparkbutton_iconSize" format="dimension|reference" />
<attr name="sparkbutton_activeImage" format="reference" />
<attr name="sparkbutton_disabledImage" format="reference" />
<attr name="sparkbutton_primaryColor" format="reference" />
<attr name="sparkbutton_secondaryColor" format="reference" />
<attr name="sparkbutton_pressOnTouch" format="boolean" />
<attr name="sparkbutton_animationSpeed" format="float" />Passo 3: Escrever código
Você também pode criar o botão programmaticamente e definir os atributos via java:
SparkButton button = new SparkButtonBuilder(context)
.setActiveImage(R.drawable.active_image)
.setInActiveImage(R.drawable.inactive_image)
.setDisabledImage(R.drawable.disabled_image)
.setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
.setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
.setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
.build();Referência
Encontre o link para download abaixo:
| Número | Link | Link |
|---|---|---|
| 1. | Ler mais | |
| 2. | Download | |
| 3. | Follow code author |
Tenha um bom dia.
