Android Layout help

Question

I am still bit new to Android layout designing. I need small help to design a layout that looks like this with dynamically loading images/text. Please advice how to do it.

Answer 1

You can use GridLayoutManager in RecyclerView to achieve this design and you can load images from your web server. In client side you try to use Glide or Picasso to show and cache images. list_item.xml

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="80dp"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp"
android:layout_marginBottom="16dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/country_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/action_settings"
        android:src="@drawable/three"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/country_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:text="@string/country_name"
        android:textColor="@color/accent_color"
        android:gravity="center"
        android:layout_below="@+id/country_photo"
        android:paddingBottom="8dp"
        android:paddingTop="8dp"
        android:layout_alignParentBottom="true"
        android:background="@color/color_primary_dark"/>

</RelativeLayout>

RecyclerViewAdapter

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {

private List<ItemObject> itemList;
private Context context;

public RecyclerViewAdapter(Context context, List<ItemObject> itemList) {
    this.itemList = itemList;
    this.context = context;
}

@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {

    View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_list, null);
    RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView);
    return rcv;
}

@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
    holder.countryName.setText(itemList.get(position).getName());
    holder.countryPhoto.setImageResource(itemList.get(position).getPhoto());
}

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

RecyclerViewHolders

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

public TextView countryName;
public ImageView countryPhoto;

public RecyclerViewHolders(View itemView) {
    super(itemView);
    itemView.setOnClickListener(this);
    countryName = (TextView)itemView.findViewById(R.id.country_name);
    countryPhoto = (ImageView)itemView.findViewById(R.id.country_photo);
}

@Override
public void onClick(View view) {
    Toast.makeText(view.getContext(), "Clicked Country Position = " + getPosition(), Toast.LENGTH_SHORT).show();
}
}

MainActivity

public class MainActivity extends ActionBarActivity {
private GridLayoutManager lLayout;

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

    Toolbar topToolBar = (Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(topToolBar);
    topToolBar.setLogo(R.drawable.logo);
    topToolBar.setLogoDescription(getResources().getString(R.string.logo_desc));

    List<ItemObject> rowListItem = getAllItemList();
    lLayout = new GridLayoutManager(MainActivity.this, 4);

    RecyclerView rView = (RecyclerView)findViewById(R.id.recycler_view);
    rView.setHasFixedSize(true);
    rView.setLayoutManager(lLayout);

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(MainActivity.this, rowListItem);
    rView.setAdapter(rcAdapter);
 }

 @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;
    }
    if(id == R.id.action_refresh){
        Toast.makeText(MainActivity.this, "Refresh App", Toast.LENGTH_LONG).show();
    }
    if(id == R.id.action_new){
        Toast.makeText(MainActivity.this, "Create Text", Toast.LENGTH_LONG).show();
    }

    return super.onOptionsItemSelected(item);
   }

   private List<ItemObject> getAllItemList(){

    List<ItemObject> allItems = new ArrayList<ItemObject>();
    allItems.add(new ItemObject("United States", R.drawable.one));
    allItems.add(new ItemObject("Canada", R.drawable.two));
    allItems.add(new ItemObject("United Kingdom", R.drawable.three));
    allItems.add(new ItemObject("Germany", R.drawable.four));
    allItems.add(new ItemObject("Sweden", R.drawable.five));
    allItems.add(new ItemObject("United Kingdom", R.drawable.six));
    allItems.add(new ItemObject("Germany", R.drawable.seven));
    allItems.add(new ItemObject("Sweden", R.drawable.eight));
    allItems.add(new ItemObject("United States", R.drawable.one));
    allItems.add(new ItemObject("Canada", R.drawable.two));
    allItems.add(new ItemObject("United Kingdom", R.drawable.three));
    allItems.add(new ItemObject("Germany", R.drawable.four));
    allItems.add(new ItemObject("Sweden", R.drawable.five));
    allItems.add(new ItemObject("United Kingdom", R.drawable.six));
    allItems.add(new ItemObject("Germany", R.drawable.seven));
    allItems.add(new ItemObject("Sweden", R.drawable.eight));

    return allItems;
}
}

This code might be helpful for you.

Answer 2

I would use a GridLayout inflating custom views including the title and the image you want. You can always get into the inflated view to dynamically change their content (text or images).

I've found this websites wich explais you how to use them together with adapters.

Answer 3

That's all about retrieving data from web servers. Look for LazyList adapter implementation(googling will lead you on Stackoverflow). That's for loading images. Also study REST communication.

Good tutorial for XML parsing on Android

When you are done with this - ask more specific questions.