Oxyplot graph takes up whole screen for display - xamarin.android

I just started using using oxyplot library for my project. I successfully added a donut chart in my project but the problem with this is that it takes up the whole screen to show the graph. Is tried so many way to solve this but none of them worked.
Here is my axml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
local:layout_behavior="#string/appbar_scrolling_view_behavior" >
<OxyPlot.Xamarin.Android.PlotView
android:id="#+id/plot_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxBind="Model DonutChart"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16dp"
local:MvxBind="Text TestText1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16dp"
local:MvxBind="Text TestText2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16dp"
local:MvxBind="Text TestText3" />
</LinearLayout>
Here is the graph method:
private void GeneratePlotModel()
{
var plotmodel = new PlotModel();
var seriesP1 = new PieSeries
{
Stroke = OxyColors.Transparent,
StrokeThickness = 2.0,
InsideLabelPosition = 0.0,
AngleSpan = 360,
StartAngle = 0,
InnerDiameter = 0.7,
OutsideLabelFormat = null,
InsideLabelFormat = null,
TickHorizontalLength = 0.0,
TickRadialLength = 0.0
};
seriesP1.Slices.Add(new PieSlice("Test 1", test1) { IsExploded = false, Fill = OxyColors.Blue });
seriesP1.Slices.Add(new PieSlice("Test 2", test2) { IsExploded = false, Fill = OxyColors.Green });
seriesP1.Slices.Add(new PieSlice("Test 3", test3) { IsExploded = false, Fill = OxyColors.Red });
plotmodel.Series.Add(seriesP1);
DonutChart = plotmodel;
}
Here is my plotmodel property:
private PlotModel _donutChart ;
public PlotModel DonutChart
{
get => _donutChart ;
set
{
if (_donutChart == value)
return;
_donutChart = value;
RaisePropertyChanged(nameof(DonutChart ));
}
}

It takes up the whole screen to show the graph because you set
android:layout_width="match_parent"
android:layout_height="match_parent"
And you can make it only takes patial space by adding
android:layout_weight="1"
So the layout is like this:
<OxyPlot.Xamarin.Android.PlotView
android:id="#+id/plot_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
local:MvxBind="Model DonutChart"/>

Related

How to create view in Xamarin.Android

enter image description here
How do I make a view like this in Xamarin.Android?
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

how to Create Slide up Menu in Xamarin.Android

how to Create Slide up Menu in Xamarin.Android
Firstly , create a bottom_dialog.xml layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:orientation="vertical"
android:padding="16dp"
app:behavior_hideable="false"
app:behavior_peekHeight="90dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textColor="#fff"
android:textSize="18"
android:textAlignment="center"
android:drawablePadding="20dp"
android:text="Menu" />
<TextView
android:id="#+id/action1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textColor="#fff"
android:drawablePadding="16dp"
android:text="111111111" />
<TextView
android:id="#+id/action2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textColor="#fff"
android:drawablePadding="16dp"
android:text="222222222" />
<TextView
android:id="#+id/action3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textColor="#fff"
android:drawablePadding="16dp"
android:text="333333333" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#aaa"
android:text="Start"
android:textColor="#fff" />
</LinearLayout>
And in the activiy
private void FabOnClick(object sender, EventArgs eventArgs)
{
View dialogView = LayoutInflater.Inflate(Resource.Layout.bottom_dialog, null);
BottomSheetDialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(dialogView);
dialog.Show();
}
Update
You could override the method OnTouchEvent in the activity .
float x1 = 0;
float x2 = 0;
float y1 = 0;
float y2 = 0;
public override bool OnTouchEvent(MotionEvent e)
{
if (e.Action==MotionEventActions.Down)
{
x1 = e.GetX();
y1 = e.GetY();
}
if(e.Action == MotionEventActions.Up)
{
x2 = e.GetX();
y2 = e.GetY();
if(y1-y2>50)
{
View dialogView = LayoutInflater.Inflate(Resource.Layout.bottom_dialog, null);
BottomSheetDialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(dialogView);
dialog.Show();
}
}
return base.OnTouchEvent(e);
}

how do i get the text from edittext in in inflated layout

I have a Button that, when click on it, displays 6 TextEdits. This happens trhough a inflated layout, that contains the TextEdits. That means, that everytime you click on the Button you get 6 new TextEdit. Now, how can i collect the Values of all of them?
Inflated Layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<EditText
android:id="#+id/nombrePuntaje"
android:layout_width="54dp"
android:layout_height="42dp"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName"
android:hint="Nombre"
/>
<EditText
android:id="#+id/j1"
android:layout_width="54dp"
android:layout_height="42dp"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName"
android:hint="00"
/>
<EditText
android:id="#+id/j2"
android:layout_width="54dp"
android:layout_height="42dp"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName"
android:hint="00"
/>
<EditText
android:id="#+id/j3"
android:layout_width="54dp"
android:layout_height="42dp"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName"
android:hint="00"
/>
<EditText
android:id="#+id/j4"
android:layout_width="wrap_content"
android:layout_height="42dp"
android:layout_weight="1"
android:ems="2"
android:inputType="textPersonName"
android:hint="00"
/>
<EditText
android:id="#+id/j5"
android:layout_width="wrap_content"
android:layout_height="42dp"
android:layout_weight="1"
android:ems="2"
android:inputType="textPersonName"
android:hint="00"
/>
Here int the activity, when inflates:
agregarPuntajes = (Button) findViewById(R.id.cargarPuntajes);
agregarPuntajes.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//https://stackoverflow.com/questions/29673613/remove-and-add-layout-dynamically-by-click-button-in-android
LayoutInflater ltInflater = getLayoutInflater();
final LinearLayout subLayoutFields = (LinearLayout) findViewById(R.id.contenedorPuntajes);
final View view1 = ltInflater.inflate(R.layout.puntos, subLayoutFields, true);
}
});
Thank you :)
To gather all the edit texts
LinearLayout myLayout = get the layout of edit-texts
ArrayList<EditText> myEditTextList = new ArrayList<EditText>();
for( int i = 0; i < myLayout.getChildCount(); i++ )
if( myLayout.getChildAt( i ) instanceof EditText )
myEditTextList.add( (EditText) myLayout.getChildAt( i ) );

How to add text color to ListView

How to add text color to ListView ?
The background is white for Layout and I need the text color to be darkgray or black.
--UI
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ListView1" />
</LinearLayout>
-- code :
listV= FindViewById<ListView>(Resource.Id.ListView1);
itemlist = new List<string>();
itemlist.Add("item1");
itemlist.Add("item2");
itemlist.Add("item3");
itemlist.Add("item4");
itemlist.Add("item5");
itemlist.Add("item6");
itemlist.Add("item7");
itemlist.Add("item8");
ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, itemlist);
listV.Adapter = adapter;
Thanks
Create a layout file containing the textview you want with textSize, textStyle, color etc preferred by you and then use it with the ArrayAdapter.
e.g. mytextview.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tview"
android:textColor="#color/yourColor"
android:padding="5sp"
android:layout_width="fill_parent"
android:background="#drawable/rectgrad"
android:singleLine="true"
android:gravity="center"
android:layout_height="fill_parent"/>
and then use it with your ArrayAdapter as usual like
ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, R.layout.mytextview, itemlist);

Custom adapter does not called getVIew

Here is the code of my custom adapter... it doesn't call my get view... returns only white blank page without nothing. I don't know what is the problem. Does anybody can help. Thanks a lot previously!
public class ProductShopsAdapter extends ArrayAdapter<ProductShop> {
private Context cntx;
private ArrayList<ProductShop> shopValues;
ProductShopsHolder holder = null;
public ProductShopsAdapter(Context context, int textViewResourceId, ArrayList<ProductShop> stringValues) {
super(context,textViewResourceId);
shopValues = stringValues;
cntx = context;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
holder = new ProductShopsHolder();
LayoutInflater layoutInflater = (LayoutInflater)cntx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = layoutInflater.inflate(R.layout.shops_list, null);
//Holder Elements initialization
holder.setShopName((TextView)convertView.findViewById(R.id.shop_name));
holder.setPrice((TextView)convertView.findViewById(R.id.shop_part_price));
convertView.setTag(holder);
} else {
holder = (ProductShopsHolder) convertView.getTag();
}
holder.getShopName().setText(getItem(position).getShopName());
holder.getPrice().setText(getItem(position).getPrice());
return convertView;
}
}
and here is my 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"
tools:context=".ProductShopsActivity" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:padding="0dp" >
</ListView>
<include
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#android:id/list"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
layout="#layout/footer_menu" />
</RelativeLayout>
and single view :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#f2f2f2"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/shop_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Technomarket"
android:textSize="14sp" />
<TextView
android:id="#+id/shop_part_price"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="30 лв."
android:textSize="18sp" />
<TextView
android:id="#+id/details_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableRight="#drawable/rightarrow"
android:gravity="center"
android:text="Детайли"
android:textColor="#289bd6"
android:textSize="14sp" />
You don't need ArrayList inside your ArrayAdapter - ArrayAdapter can store items itself. And that's why getView() doesn't get called - default implementation of getCount() returns the number of items in ArrayAdapter itself. If you keep your items in your own ArrayList, at least override getCount() to return shopValues.getCount(). Otherwise it is always 0 and the ListView to which your adapter is bound doesn't even know there are any items to dsplay at all.

Resources