I want to draw a candlestick chart (500 itmes). In WPF, I can use 500 borders (System.Windows.Controls.Border) inside 1 scrollviewer.
I also can change any item when it's needed.
How can I do the same in Xamarin.Android? Xamarin.Android doesn't contain the Border class.
you could use a ScrollView, containing a LinearLayout containing itself 500 times a simple <View> that has a size and a drawable stroke as background
something like
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
>
<View
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#drawable/border_white"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/border_white"
/>
and in res/drawable, a file named border_white
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dip" android:color="#android:color/white" />
</shape>
but it'll be pretty slow I tell you (like on Windows, probably).
Related
EDIT: TLTR; This was a long and hard road. Turns out Visual Studio / Xamarin / Android / SOMETHING.. didn't like that I moved the downloaded .xml files into my drawable folder, and just renamed them to .axml so creating new .axml files and pasting the .xml layouts into there seems to have fixed it all.
.....
I think I have an issue in my layouts. The project won't build, but no errors are shown.
What I have noticed is that.. if I delete three blocks of code references my axml and layout ids, the project builds (see comments in first code section below).. also if I grab random axml and layout ids from my project (and not the ones I just imported from the online example) it also builds.
I think the issue might be:
one of the #dimens, #colors, etc is breaking my layouts, but I tried deleting them all from the .axml files with no luck.
my layout might be missing some code of declaration in the first Layout object aka RelativeLayout xmlns:android=
something I'm not catching is different in layouts in regular Android versus Xamarin android
NOTE:
All three blocks of code MUST be deleted / replaced
I have restarted my computer, restarted VS, deleted by obj/bin folders, etc.
I am recreating this project but with Xamarin Android C#: https://www.androidhive.info/2016/05/android-build-intro-slider-app/
I have the following code in my Activity OnCreate function: (NOTE that i point out which three blocks of code could be deleted in order for the build to work correctly)
class StartUpDialogs : Activity
{
...
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Making notification bar transparent
if ((int)Build.VERSION.SdkInt >= 21)
{
Window.DecorView.SystemUiVisibility = (StatusBarVisibility)(SystemUiFlags.LayoutStable | SystemUiFlags.LayoutFullscreen);
}
//REMOVING THE FOLLOWING THREE CODE BLOCKS ALLOWS IT TO BUILD
// Also replacing with Ids and Layouts not from this example work too
{
SetContentView(Resource.Layout.activity_welcome);
viewPager = FindViewById<ViewPager>(Resource.Id.view_pager);
dotsLayout = FindViewById<LinearLayout>(Resource.Id.layoutDots);
btnSkip = FindViewById<Button>(Resource.Id.btn_skip);
btnNext = FindViewById<Button>(Resource.Id.btn_next);
// layouts of all welcome sliders
// add few more layouts if you want
layouts = new int[]{
Resource.Layout.welcome_slide1,
Resource.Layout.welcome_slide2,
Resource.Layout.welcome_slide3,
Resource.Layout.welcome_slide4};
}
myViewPagerAdapter = new StartUpDialogAdapter(this, layouts);
viewPager.Adapter = (myViewPagerAdapter);
viewPager.PageSelected += OnPageChange;
btnSkip.Click += OnSkip;
btnNext.Click += GoNext;
}
...
}
Here are the layout files:
activity_welcome.axml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:showIn="#layout/activity_welcome">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="#dimen/dots_height"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/dots_margin_bottom"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha=".5"
android:layout_above="#id/layoutDots"
android:background="#android:color/white" />
<Button
android:id="#+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#null"
android:text="#string/next"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#null"
android:text="#string/skip"
android:textColor="#android:color/white" />
</RelativeLayout>
welcome_slide1.axml (2 - 4 are identical except with numbers switched out for 2, 3, 4)
<?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="match_parent"
android:background="#color/bg_screen1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="#dimen/img_width_height"
android:layout_height="#dimen/img_width_height"
android:src="#drawable/ic_food" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/slide_1_title"
android:textColor="#android:color/white"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="#dimen/desc_padding"
android:paddingRight="#dimen/desc_padding"
android:text="#string/slide_1_desc"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="#dimen/slide_desc" />
</LinearLayout>
</RelativeLayout>
And my Resource files in case its them: (I had to move string-array into my strings.xml in order for them to be registered in my OnCreate function as the code owners project had it in colors.xml)
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<!-- Screens background color-->
<color name="bg_screen1">#f64c73</color>
<color name="bg_screen2">#20d2bb</color>
<color name="bg_screen3">#3395ff</color>
<color name="bg_screen4">#c873f4</color>
<!-- dots inactive colors -->
<color name="dot_dark_screen1">#d1395c</color>
<color name="dot_dark_screen2">#14a895</color>
<color name="dot_dark_screen3">#2278d4</color>
<color name="dot_dark_screen4">#a854d4</color>
<!-- dots active colors -->
<color name="dot_light_screen1">#f98da5</color>
<color name="dot_light_screen2">#8cf9eb</color>
<color name="dot_light_screen3">#93c6fd</color>
<color name="dot_light_screen4">#e4b5fc</color>
</resources>
dimens.xml
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="dots_height">30dp</dimen>
<dimen name="dots_margin_bottom">20dp</dimen>
<dimen name="img_width_height">120dp</dimen>
<dimen name="slide_title">30dp</dimen>
<dimen name="slide_desc">16dp</dimen>
<dimen name="desc_padding">40dp</dimen>
</resources>
Strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">XXX</string>
<string name="user_spinner_prompt">Select Account</string>
<string name="app_name">Intro Slider</string>
<string name="title_activity_welcome">Home Screen</string>
<string name="next">NEXT</string>
<string name="skip">SKIP</string>
<string name="start">GOT IT</string>
<string name="slide_1_title">Hello Food!</string>
<string name="slide_1_desc">The easiest way to order food from your favourite restaurant!</string>
<string name="slide_2_title">Movie Tickets</string>
<string name="slide_2_desc">Book movie tickets for your family and friends!</string>
<string name="slide_3_title">Great Discounts</string>
<string name="slide_3_desc">Best discounts on every single service we offer!</string>
<string name="slide_4_title">World Travel</string>
<string name="slide_4_desc">Book tickets of any transportation and travel the world!</string>
<string name="play_again_desc">To see the welcome slider again, goto Settings -> apps -> welcome slider -> clear data</string>
<string name="play_again">Play Again</string>
<string-array name="array_dot_active">
<item>#color/dot_light_screen1</item>
<item>#color/dot_light_screen2</item>
<item>#color/dot_light_screen3</item>
<item>#color/dot_light_screen4</item>
</string-array>
<string-array name="array_dot_inactive">
<item>#color/dot_dark_screen1</item>
<item>#color/dot_dark_screen2</item>
<item>#color/dot_dark_screen3</item>
<item>#color/dot_dark_screen4</item>
</string-array>
</resources>
try to check the axml which you copy from Java Project,set their BuildAction to AndroidResource like this:
I have created a custom toolbar. But when I put things like imageview, button etc it wont be below toolbar. I also tried android:layout_below but i either its not working or I put wrong id (i tried multiple ids). Its just mixing with the toolbar.
In the code the imageview is merging with the toolbar and i want the imageview to be below it.
Thanks for anyone who answers
code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ImageView
android:id="#+id/icon"
android:layout_below="#id/toolbar"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shoppingcart"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<android.support.design.widget.TextInputLayout
android:layout_below="#+id/icon"
android:id="#+id/forgot_input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/forgot_email"
android:hint="Enter groceries"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.TextInputLayout>
P.s.
include is just the normal toolbar settings
I got my answer! I had to put on image view tag android:layout_marginTop="?attr/actionBarSize", it just do it below the height of the toolbar/actionbar Like that:
<ImageView
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shoppingcart"
android:layout_width="100dp"
android:layout_height="100dp"
I'm trying to display an image in my Xamarin app but it does not seem to be displaying on the screen. The app complies and runs without any warnings or errors, and a separate image is displaying successfully as a long toolbar along the top of the app.
The images are held within my Resources -> Drawable directory.
XAML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:minWidth="25px"
android:minHeight="25px"
android:rowCount="5"
android:columnCount="2">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_height="150px"
android:layout_width="match_parent" />
<ImageView
android:id="#+id/cardOne"
android:layout_width="wrap_content"
android:layout_height="150px"
android:src="#drawable/m1"
android:layout_row="3"
android:layout_column="1" />
</GridLayout>
MainActivity
var imageView = FindViewById<ImageView>(Resource.Id.cardOne);
imageView.SetImageResource(Resource.Drawable.m1);
I'm attempting to make a circular imageView with two borders.
The circular image is made with a library that only allows to make one border, with the app:civ_border_color property.
The second border is achieved by setting a background property.
My problem is, the second border, made with the background, is being cropped on the sides, like this:
The circular image
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:background="#drawable/border"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_height="200dp"
android:src="#drawable/mrwhite"
app:civ_border_width="3dp"
app:civ_border_color="#BF0404" />
The second border
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
android:useLevel="false" >
<solid android:color="#android:color/transparent" />
<stroke
android:width="5dp"
android:color="#F2F2F2" />
</shape>
Change thicknessRatio value to 2
android:thicknessRatio="2"
A simple way to create RoundedImageView using ImageView and CardView
Check this example: https://github.com/SergeySharipov/RoundedImageView
Add the following dependency to your app module's build.gradle file:
dependencies {
implementation 'com.android.support:cardview-v7:27.1.0'
}
Add the code to your layout and change "YOUR_PICTURE":
<android.support.v7.widget.CardView
android:id="#+id/card_view_for_image"
android:foreground="#drawable/shape"
android:layout_margin="2dp"
android:layout_width="200dp"
android:layout_height="200dp"
app:cardCornerRadius="100dp">
<ImageView
android:id="#+id/rounded_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/YOUR_PICTURE" />
</android.support.v7.widget.CardView>
Create shape.xml in drawable and add this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="10dp"
android:color="#f44336" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="#ffffff" />
</shape>
</item>
</layer-list>
Hi I use C# and Xamarin to develop my new application and ran into many problems using this platform. Is it possible to customize menu items inside NavigationView using xamarin? all I found are the valid properties for the menu items.
But what if instead of this:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/itemOne"
android:title="Go to page one" />
<item
android:id="#+id/itemTwo"
android:title="Go to page two" />
</menu>
I want to do this:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<TextView></TextView>
<Button></Button>
<SomeOtherControlHere></SomeOtherControlHere>
</menu>
Is it possible using xamarin? What are my other options?
Aside from that I found that Xamarin API's are very restrictive, for example you cant use custom ttf fonts directly inside xml to set the fonts for menu items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/itemOne"
android:title="Go to page one"
android:fontFamily="MyCustomFontName Or MyPathToFonts" /> <-- NOT VALID
</menu>
Also if I apply style for an entire menu items container it is also not possible to use custom fonts, the only fonts we can use is the built in fonts...
Even if I get reference inside my Activity to an individual menu item (IMenuItem), there is no property or function to set font family.
It's possible to define a more complex NavigationView. Just put the child controls inside the NavigationView-Tag. For example, this is how I use the NavigationView to implement a footer. There are no restrictions to the child controls so you can you Buttons etc. as well:
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
local:headerLayout="#layout/drawer_header"
local:theme="#style/NavigationDrawerStyle"
local:menu="#menu/drawer_menu">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:id="#+id/empty_spacer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:clickable="false"
android:text="" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="#drawable/footer_small"
android:orientation="vertical"
android:weightSum="1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
To change the TextSize of the items for example, you have to define an own style:
<style name="NavigationDrawerStyle">
<item name="android:textSize">24sp</item>
<!-- more properties -->
</style>
Then assign it to your NavigationView:
<android.support.design.widget.NavigationView app:theme="#style/NavigationDrawerStyle">
<!-- ... -->
</android.support.design.widget.NavigationView>
This is how I format the Navigation Menu Item which starts by icon, then menu text and the last one is number. It look like the one in gmail app.
OnCreate
navigationView = FindViewById<NavigationView>(Resource.Id.wnl_nav_view);
//Add customize menu item style
IMenu menuNav = navigationView.Menu;
View view = View.Inflate(this, Resource.Layout._drawerMenuItemTemplate, null);
IMenuItem logoutItem = menuNav.FindItem(Resource.Id.nav_mail);
MenuItemCompat.SetActionView(logoutItem, view);
TextView txtNewNumber = view.FindViewById<TextView>(Resource.Id.txtNewNumber);
_drawerMenuItemTemplate.axml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/primary_text"
android:text="3/30"
android:id="#+id/txtNewNumber"
android:layout_gravity="right"
android:fontFamily="#string/abc_font_family_display_2_material"
android:textSize="13sp"
android:textStyle="bold"
android:paddingRight="6dp"
android:layout_marginTop="14dp" />
</FrameLayout>