How to put svg image in Xamarin.Android application's screen? - image

I want an image to ocuppy 40% of the screen of Xamarin.Android application. But as the application will have to display well on devices between 5 and 10 inches I put a .svg image to prevent the pixeling no matter how much the screen size increases. When I run the application the image doesn't appear on screen. My question is how can I put .svg image in Xamarin.Android's application screen? Here is my code:
<?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:orientation="vertical"
android:weightSum="100"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--The svg image that has to ocuppy 40% of the screen goes here-->
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_weight="40"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:src="#drawable/svg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView1" />
</LinearLayout>
<!--The rest of the things that have to ocuppy 60% of the screen go here-->
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_weight="60"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>
</LinearLayout>

In fact,Android does not provide an API method for parsing .SVG file directly.
And there are two solutions:
1.Use the third party library (like Xamarin.FFImageLoading).
2.Convert SVG to Vector (i think it's much better than using any libraries)
You could creating SVG vector drawable by using this,after you convert it to vecor drawable,you will get a vector.xml,put it into Resources/drawable folder.
Then you could use like
_yourImageView.SetImageResource(Resource.Drawable.Vector);

Related

MacOS reusable UI fragments

I need reusable UI fragments like this.
This one particularly consist of a text label, an image and a progress control.
I would like to insert it then in different parts of the application.
For example, on Android declaration and usage of such fragments look like this.
Declaration:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/InfoElementRow">
<ImageView android:src="#drawable/icon_signal" style="#style/InfoIcon"/>
<LinearLayout style="#style/InfoElementTextColumn">
<TextView android:text="Signal:" style="#style/InfoElementDescr"/>
<ProgressBar
android:id="#+id/SignalLevel"
android:layout_width="match_parent"
android:layout_height="20dp"
style="?android:attr/progressBarStyleHorizontal"/>
</LinearLayout>
</LinearLayout>
Usage:
<include layout="#layout/element_SignalLevel"/>
What is the correct way of doing that on MacOS? Optimally I'd expect the fragment to be declared in a separate xib/storyboard and then reused in other ones with little or no coding.

android:background="#null" (or some color) vs no android:background results in weird behaviour

I've got this piece of XML:
<ImageButton
android:id="#+id/button_left"
android:layout_width="40dp"
android:layout_height="60dp"
android:background="#null"
android:src="#drawable/leftarrow"
android:scaleType="centerInside"
android:layout_gravity="center"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/button_up"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#null"
android:src="#drawable/uparrow"
android:scaleType="centerInside"/>
<ImageButton
android:id="#+id/button_down"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/downarrow"
android:scaleType="centerInside"/>
</LinearLayout>
<ImageButton
android:id="#+id/button_right"
android:layout_width="40dp"
android:layout_height="60dp"
android:src="#drawable/rightarrow"
android:scaleType="centerInside"
android:layout_gravity="center"/>
</LinearLayout>
With this result in design preview:
So, I prefer the Down and Right buttons, because it changes color of area around arrows to dark gray when the ImageButtons are pressed.
However, I'd like to set the backgroundColor to something different from Gray and I want to keep the size of the arrows just like in the Down and Right buttons.
Not only do I not understand where the light gray areas around the arrows come from (the original Drawable .png background is white), but I also do not understand why simply adding the background to null changes the arrow size and eliminates the light gray area. Please enlighten me regarding this issue.
Another annoying thing is the padding inside the buttons; how to get rid of it?

Use of cardstream in google place picker sample code

The sample code in google place picker uses cardstream lib. Is this a open source lib and if so where do i find the documentation/guide for using it ?
github URL: https://github.com/googlesamples/android-play-places/tree/master/PlacePicker
I think the cardstream java code is a great set of java methods that one can use in your app. While there are no javadocs for cardstream you can read the descriptions of the method in the code itself as the method descriptions are written above the individual methods.
I would however make sure that your app can use cardstream before you import it into your code.
For example, if I look at the code, I can see that cardstream is just manipulating a linearLayout and not really adding cards to a recyclerview / listview.
The mainactivity displays the layout from here https://github.com/googlesamples/android-play-places/blob/master/PlacePicker/Application/src/main/res/layout/activity_main.xml:
<fragment
android:id="#+id/fragment_cardstream"
android:name="com.example.google.playservices.placepicker.cardstream.CardStreamFragment"
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=".MainActivity"
tools:layout="#layout/cardstream"/>
The fragment then pulls the layout from here:
https://github.com/googlesamples/android-play-places/blob/master/PlacePicker/Application/src/main/res/layout/cardstream.xml
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<com.example.google.playservices.placepicker.cardstream.CardStreamLinearLayout
style="#style/CardStream"
android:id="#+id/card_stream"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</ScrollView>
The layout here that the fragment uses is a cardStreamLinearLayout.
If your app just want to addViews / removeView for a few cards from a linearLayout, then this library is great. But most android apps will want to add on a 'stream' of cards, so it doesn't really make sense from an efficiency perspective to add them onto the linearLayout as that would really be inefficient.
There are tools available on android like listview or recyclerview which would provide a better experience as they are optimised to do so.

Android - Layout is not working properly

I want to load a layout based on screen size.
My configuration
Android 2.2
Small Screen QVGA(240x320), low density(120)
Image resolution is 240x320
res/layout-small/myimg.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/simage"
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</LinearLayout>
But when i run the app the screen is not completely covered by the image, a small margin is present on left and right side of screen.
I also followind the link below but the problem is still there
http://developer.android.com/guide/practices/screens_support.html#qualifiers
Can anyone tell me where is the problem?
Probably your image no cover all screen. May be image have a transparent borders or have no exactly right size. Also you can use a android:scaleType="fitXY" with ImageView
Added:
Suggest you use a ldpi quilifier instead of small.

How Can I add text on the top of image like pulse in android

I want to recreate pulse like UI for one of my android app. I want to know How can I put transparent text over an image like pulse also how can I create 2nd screen like pulse where we read the stories. In this screen How this bottom selecting elements comes and hide automatically and when clicked is it the complete activity being changed or only the text changes?.
Find below the two UI which I am mentioning about
How this bottom navigation is hiding?
Thanks pranay
User RelativeLayout.
Here is an example which places a TextView on Top of an ImageView and centers the text on the image.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/MyImage"
android:adjustViewBounds="true"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/TextOnImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
A relativeLayout will solve your problem, because it allows you to define the position of every child element independantly from each other. Just use margin and paddings to adjust the exact layout you want.
You should use Relative layout

Resources