Android Expandable RecyclerView Example
Hola amigos en esta ocasión vamos a aprender a crear un RecyclerView con contenido expansible les presentare este tutorial paso a paso. |
| Como crear un RecyclerView Expandable en Android |
Como crear un proyecto en Android (Aquí)
Vamos a crear un proyecto en Android para desarrollar nuestro ejemplo del control RecyclerView. |
| Crear proyecto RecyclerView Expandable en Android |
Crear diseño de RecyclerView Expandable
Vamos a crear el diseño de nuestra aplicaciones y vamos a abrir nuestro activity_main.xml para agregar los siguientes controles que serán los principales.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>Nos quedaría de la siguiente forma.
 |
| RecyclerView diseño en nuestra aplicación |
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/textViewName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff3847"
android:padding="10dp"
android:text="Iron Man"
android:textAlignment="center"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large.Inverse" />
<LinearLayout
android:animateLayoutChanges="true"
android:id="@+id/linearLayout"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Real Name " />
<TextView
android:id="@+id/textViewRealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tony Stark"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Team " />
<TextView
android:id="@+id/textViewTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Avengers"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Appearance " />
<TextView
android:id="@+id/textViewFirstAppearance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1974"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Created By " />
<TextView
android:id="@+id/textViewCreatedBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stan Lee"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Publisher " />
<TextView
android:id="@+id/textViewPublisher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Marvel Comics"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bio " />
<TextView
android:id="@+id/textViewBio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:text="Steven Rogers was born in the Lower East Side of Manhattan, New York City, in 1925 to poor Irish immigrants, Sarah and Joseph Rogers.[54] Joseph died when Steve was a child, and Sarah died of pneumonia while Steve was a teen. By early 1940, before America's entry into World War II, Rogers is a tall, scrawny fine arts student specializing in illustration and a comic book writer and artist."
android:textStyle="bold" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Nos quedaría de la siguiente forma el diseño.
 |
| Diseño de nuestro contenido expandible en el RecyclerView |
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
Código de nuestro RecyclerView expandable.
Ahora vamos por el código de nuestra aplicación para nuestro RecyclerView Expandable. Y para ello vamos a nuestro MainActivity.
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
final String URL_GET_DATA = "https://simplifiedcoding.net/demos/marvel/";
RecyclerView recyclerView;
HeroAdapter adapter;
List<Hero> heroList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
heroList = new ArrayList<>();
loadHeroes();
}
private void loadHeroes() {
StringRequest stringRequest = new StringRequest(Request.Method.GET, URL_GET_DATA,
new Response.Listener<String>() {
@Override
public void onResponse(String response) {
try {
JSONArray jsonArray = new JSONArray(response);
for (int i = 0; i < jsonArray.length(); i++) {
JSONObject obj = jsonArray.getJSONObject(i);
Hero hero = new Hero(
obj.getString("name"),
obj.getString("realname"),
obj.getString("team"),
obj.getString("firstappearance"),
obj.getString("createdby"),
obj.getString("publisher"),
obj.getString("imageurl"),
obj.getString("bio")
);
heroList.add(hero);
}
adapter = new HeroAdapter(heroList, getApplicationContext());
recyclerView.setAdapter(adapter);
} catch (JSONException e) {
e.printStackTrace();
}
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
}
});
RequestQueue requestQueue = Volley.newRequestQueue(this);
requestQueue.add(stringRequest);
}
}Ahora añadiremos dos clases mas las cuales serán las siguientes. La primera sera la clase Hero que sera el constructor del contenido. Y la siguiente sera el adaptador HeroAdapter.
public class Hero {
private String name, realName, team, firstAppearance, createdBy, publisher, imageUrl, bio;
public Hero(String name, String realName, String team, String firstAppearance, String createdBy, String publisher, String imageUrl, String bio) {
this.name = name
this.realName = realName;
this.team = team;
this.firstAppearance = firstAppearance;
this.createdBy = createdBy;
this.publisher = publisher;
this.imageUrl = imageUrl;
this.bio = bio;
}
public String getName() {
return name;
}
public String getRealName() {
return realName;
}
public String getTeam() {
return team;
}
public String getFirstAppearance() {
return firstAppearance;
}
public String getCreatedBy() {
return createdBy;
}
public String getPublisher() {
return publisher;
}
public String getImageUrl() {
return imageUrl;
}
public String getBio() {
return bio;
}
}y el adaptador.
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import java.util.List;
public class HeroAdapter extends RecyclerView.Adapter<HeroAdapter.HeroViewHolder> {
private List<Hero> heroList;
private Context context;
private static int currentPosition = 0;
public HeroAdapter(List<Hero> heroList, Context context) {
this.heroList = heroList;
this.context = context;
}
@Override
public HeroViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout_heroes, parent, false);
return new HeroViewHolder(v);
}
@Override
public void onBindViewHolder(final HeroViewHolder holder, final int position) {
Hero hero = heroList.get(position);
holder.textViewName.setText(hero.getName());
holder.textViewRealName.setText(hero.getRealName());
holder.textViewTeam.setText(hero.getTeam());
holder.textViewFirstAppearance.setText(hero.getFirstAppearance());
holder.textViewCreatedBy.setText(hero.getCreatedBy());
holder.textViewPublisher.setText(hero.getPublisher());
holder.textViewBio.setText(hero.getBio().trim());
Glide.with(context).load(hero.getImageUrl()).into(holder.imageView);
holder.linearLayout.setVisibility(View.GONE);
if (currentPosition == position) {
Animation slideDown = AnimationUtils.loadAnimation(context, R.anim.slide_down);
holder.linearLayout.setVisibility(View.VISIBLE);
holder.linearLayout.startAnimation(slideDown);
}
holder.textViewName.setOnClickListener(new View.OnClickListener() {
@Overrid
public void onClick(View view) {
currentPosition = position;
notifyDataSetChanged();
}
});
}
@Override
public int getItemCount() {
return heroList.size();
class HeroViewHolder extends RecyclerView.ViewHolder {
TextView textViewName, textViewRealName, textViewTeam, textViewFirstAppearance,
textViewCreatedBy, textViewPublisher, textViewBio;
ImageView imageView;
LinearLayout linearLayout;
HeroViewHolder(View itemView) {
super(itemView);
textViewName = (TextView) itemView.findViewById(R.id.textViewName);
textViewRealName = (TextView) itemView.findViewById(R.id.textViewRealName);
textViewTeam = (TextView) itemView.findViewById(R.id.textViewTeam);
textViewFirstAppearance = (TextView) itemView.findViewById(R.id.textViewFirstAppearance)
textViewCreatedBy = (TextView) itemView.findViewById(R.id.textViewCreatedBy);
textViewPublisher = (TextView) itemView.findViewById(R.id.textViewPublisher);
textViewBio = (TextView) itemView.findViewById(R.id.textViewBio);
imageView = (ImageView) itemView.findViewById(R.id.imageView);
linearLayout = (LinearLayout) itemView.findViewById(R.id.linearLayout);
}
}
}Y listo.
Como crear un Emulador AVD (Aquí)
Vamos a crear un emulador para ver nuestra aplicación completamente en ejecución. |
| RecyclerView expandable ejecutado en emulador AVD. |
Android Studio - Curso Español
No hay comentarios:
Publicar un comentario