How to create view in Xamarin.Android - xamarin.android

Question

enter image description here
How do I make a view like this in Xamarin.Android?

Answer 1

You can use LinearLayout and GridLayout to achieve it. Use two LinearLayout, set the android:layout_weight=1 both of them, It could divide the entire screen equally, then use GridLayout, add all of Awards, use Textview to show the awards name, use ImageView to show the awards image. You can set the android:background="#drawable/back" as the background(award shelf image) in the outside LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:background="#drawable/back"
>
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:rowCount="2"
android:columnCount="6"
android:orientation="vertical"
>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="3">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
</GridLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:rowCount="4"
android:columnCount="6"
android:orientation="vertical"
>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="3">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
<LinearLayout
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_row="0"
android:layout_column="5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hamberguer1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myicon"/>
</LinearLayout>
</GridLayout>
</LinearLayout>
Here is running gif.
You need to write a new GridView for shelves. Here is code.
public class BookGridView: Android.Widget.GridView
{
Context context;
private Bitmap background;
public BookGridView(Context context, Android.Util.IAttributeSet attributeSet):base(context, attributeSet)
{
this.context = context;
background = null;
}
protected override void DispatchDraw(Canvas canvas)
{
int count = ChildCount;
int top = count > 0 ? GetChildAt(0).Top : 0;
int width = Width;
int height = Height;
int totalCount = this.Count;
//If the total is 0, there is no need to calculate the height and draw the picture
if (totalCount > 0)
{
//get Columns
int numColumns = 3;
// Calculate the row height by calculating the number of rows and height
int rowCount = totalCount / numColumns;
if (totalCount % numColumns != 0)
{
rowCount++;
}
int rowHeight = height / rowCount;
if (background == null)
{
background = BitmapFactory.DecodeResource(Resources,
Resource.Drawable.bookshelf_layer_center);
background = Bitmap.CreateScaledBitmap(background, width, rowHeight, true);
}
int backgroundWidth = background.Width;
int backgroundHeight = background.Height;
for (int y = top; y < height; y += backgroundHeight)
{
for (int x = 0; x < width; x += backgroundWidth)
{
canvas.DrawBitmap(background, x, y, null);
}
}
}
base.DispatchDraw(canvas);
}
}
}
Here is running screenshot. shelves will increase by the number of awards.
I upload my demo, you can set columns of shelves by yourself.
https://github.com/851265601/Xamarin.Android_ListviewSelect/blob/master/App17.zip