I want to create my entire app's UI using Droid.Dialog in MvvmCross. More specifically setting the background image and then adding a header image to the view, as well as input fields and buttons.
I am stuck trying to get a header image into the view. Firstly here is a wireframe explaining what I mean by header image:
I have managed to set the background gradient image using:
using (var drawable = Resources.GetDrawable(Resource.Drawable.Backgroud))
Window.SetBackgroundDrawable(drawable);
I have then tried to add the header image using the Cirrious.MvvmCross.Dialog.Droid stuff like this:
var img = new ImageView(this.BaseContext);
img.LayoutParameters = new Gallery.LayoutParams(330, 110);
img.SetImageResource(Resource.Drawable.Header);
Root = new RootElement()
{
new Section(){new ImageElement(img)}
};
However, the image appears as a tiny blotch in the UI.
Doing this in AXML I would set the image as follows:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:layout_width="330dp"
android:layout_height="110dp"
android:src="#drawable/Header" />
</LinearLayout>
I'm basically stuck trying to figure out how to get the image into the view at the top of the screen and with the right dimensions!
Any help would be greatly appreciated. Or am I better off creating the views using the native AXML and IB respectively?
If you look what is inside the ImageElement and what happens when you call the ctor with the ImageView argument, then you will discover that the image is scaled to 48x44.
https://github.com/MvvmCross/MvvmCross/blob/v3/CrossUI/CrossUI.Droid/Dialog/Elements/ImageElement.cs#L52:
private const int dimx = 48;
private const int dimy = 44;
...
private ImageView Scale(ImageView source)
{
var drawable = (BitmapDrawable) source.Drawable;
var bitmap = drawable.Bitmap;
var bMapScaled = Bitmap.CreateScaledBitmap(bitmap, dimx, dimy, true);
source.SetImageBitmap(bMapScaled);
return source;
}
So you have a couple of options:
Create your own Element, where you are in the control of what is done with the ImageView
Do it by creating a native Android Layout instead.
Related
Using the following XML and java code I add images taken with camera to LinearLayout within a ScrollView.
XML:
<HorizontalScrollView
android:layout_gravity="center_vertical"
android:scrollbars="none"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/detailsback"
android:layout_gravity="center_vertical"
android:id="#+id/imageSlider"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
Java (runs in Fragment):
private void setTakePicButton(){
mTakePicButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mBitmap = mTextureView.getBitmap();
Date currentDateTime = Calendar.getInstance().getTime();
String filename = getFileName();
FileOutputStream fileOutputStream = null;
try {
fileOutputStream = new FileOutputStream( filename);
mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fileOutputStream);// bmp is your Bitmap instance
ImageView imageView = new ImageView(getActivity());
imageView.setImageBitmap(mBitmap);
linearLayout.addView(imageView);
} catch (Exception e) {
e.printStackTrace();
} finally {
}
}
});
}
Problem is whenever I add a pic to linearLayout (id:imageSlider) it is added with large margins like shows in the picture
I want the images to show in a sequence like in the following pic.
Solution 01
You can set the image to bounds using FIT_XY scale type
imgview.setScaleType(ImageView.ScaleType.FIT_XY);
You can find all the ScaleTypes here
Solution 02
If you are trying to view images like a list you can use a RecyclerView:
Create a List with RecyclerView
Solution 03
If you want to display the images side by side, Set layout_weight to imageView
This is how to do that programmatically, (The Last param is the weight )
LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT,
1.0f
);
imageView.setLayoutParams(param);
If I understand correctly, the problem is that the image in the bottom is centered instead of outlined to the left? This might be caused by the wrap_content width for the linear layout.
I would also suggest you to use some sort of a list view instead of a LinearLayout and adding items manually. A RecyclerView would be a nice solution and is able to be set to horizontal as well.
I am using xamarin studio. I have to download a bunch of images from a web service. I only get their url and then I use the following code to make the images bitmap
SetContentView (Resource.Layout.test);
ImageView img = FindViewById<ImageView> (Resource.Id.image);
Bitmap bitimage = GetImageBitmapFromUrl ("http://apk.payment24.co.za/promotions/engensa/muffin.png");
img.SetImageBitmap (bitimage);
public static Bitmap GetImageBitmapFromUrl(string url)
{
Bitmap imageBitmap = null;
using (var webClient = new WebClient())
{
var imageBytes = webClient.DownloadData(url);
if (imageBytes != null && imageBytes.Length > 0)
{
imageBitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
}
}
return imageBitmap;
}
The problem is the image I display is very small. If I manually download the images from the url and add it to the project it works perfectly fine.
My image view settings are with: match_parent and height: wrap_content.
How can I get the original size of the images if I download it via url.
Please see this link to see how the image look http://postimg.org/image/c3kbsz903/
You need to add android:adjustViewBounds ="true" and android:src="#drawable/ attribute in your Imageview
<ImageView
layout_width="match_parent"
layout_height="wrap_content"
android:adjustViewBounds ="true"
android:src="#drawable/ dummy drawable/>
Please Check ScaleType in android .
You stated that your view attributes are something like this
<ImageView
layout_width="match_parent"
layout_height="wrap_content" />
In order to have the original size of the image, you must set the layout_width attribute of your ImageView to wrap_content so that the ImageView won't use its parent's width but will adapt to the image original size.
So I'm creating a board game that uses a 9x9 board with different images for the edges/corners and the middle of the board. After doing a lot of research, people seem to recommend using a TableLayout with buttons or imageButtons for each individual space on the board.
What I am wondering is that in my game, the pieces can also be rotated by 45 degrees each turn. My original plan was to simply have the pieces as part of the imageButton, but I am not sure how I could rotate it. One option that I can think of would be to simply have an individual image for each 45deg rotation, but this seems extremely inefficient as it would require 8 images per piece.
Questions:
Is a tablelayout the proper way to implement my board?
Should I be using imagebuttons for each space on my board?
What would be the best way to rotate my pieces? Should I use a canvas approach for the entire game?
Thank you and please let me know if anything isn't clear.
Yes table layout is a good aproach for this kind of layout IMO
If you have to push on the image you can use ImageButtons, otherwise just use ImageView.
You can rotate a drawable the following way.
private void updateImageOrientation(final float rotationAngle) {
// rotate compass to right orientation
final ImageView img = (ImageView) findViewById(R.id.actMyDrawableImage);
// only if imageView in layout
if (img != null) {
final Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.act_my_drawable);
// Getting width & height of the given image.
final int w = bmp.getWidth();
final int h = bmp.getHeight();
// Setting post rotate to rotation angle
final Matrix mtx = new Matrix();
// Log.v(LOG_TAG, "Image rotation angle: " + rotationAngle);
mtx.postRotate(rotationAngle, (float) (w / 2.0), (float) (h / 2.0));
// Rotating Bitmap
final Bitmap rotatedBMP = Bitmap.createBitmap(bmp, 0, 0, w, h, mtx, true);
final BitmapDrawable bmd = new BitmapDrawable(getResources(), rotatedBMP);
img.setImageDrawable(bmd);
}
}
Edit 1:
To use ImageButton just replace ImageView by ImageButton in he code above.
final ImageButton img = (ImageButton) findViewById(R.id.actMyDrawableImage);
img.setImageDrawable(drawable)
Edit 2
To show your pieces above your board you could use a FrameLayout for each of your cell. The background would be set:
using an ImageView as below
with a background flag on the FrameLayout (android:background)
if you want one background for your board with a background flag on the parent TableLayout
You can make your pieces visible/invisible programatically:
img.setVisibility(View.VISIBLE);
img.setVisibility(View.INVISIBLE);
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/actMyDrawableButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" >
</ImageView>
<ImageButton
android:id="#+id/actMyDrawableButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible" >
</ImageButton>
</FrameLayout>
when I set the background of my editText with "setBackgroundResource", everything works fine. When I use "setBackgroundDrawable" with the same image it ends up stretched ...
The result with "setBackgroundResource" on the left, "setBackgroundDrawable" on the right :
http://i.stack.imgur.com/yQi5n.jpg
(sorry I'm not allowed to post images here ...)
The code :
View chips = EditChipsActivity.this.findViewById(mydID);
chips.setBackgroundResource(R.drawable.chips_filter);
VS :
View chips = EditChipsActivity.this.findViewById(mydID);
Bitmap bkg = ((BitmapDrawable) getResources().getDrawable(R.drawable.chips_filter)).getBitmap();
BitmapDrawable bkg = new BitmapDrawable(bkg);
chips.setBackgroundDrawable(bkg);
(I have to create my own bitmap and use the setBackgroundDrawable because I want to draw on the background)
Try this:
View chips = (EditText) findViewById(R.id.editText1);
Bitmap bkg = ((BitmapDrawable) getResources().getDrawable(R.drawable.chips_filter)).getBitmap();
BitmapDrawable bkgbt = new BitmapDrawable(getResources(),bkg);
chips.setBackgroundDrawable((Drawable) bkgbt);
And your EditText:
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</EditText>
I'm not if this do what you want....
I'm trying to make some graphics in my application with the AchartEngine API but it doesn't works.
Can anyone explain me how to have a view with a graphic instead of Intent?
Cause in the demo code it's only by Intent, not by view.
edit:
I tried to test the 2 options at the same time:
I have a linearLayout with a button in it:
<LinearLayout android:id="#+id/list_infos_layout_stat" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" >
<Button
android:id="#+id/list_infos_bouton_stats"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="statistiques"
/>
When I hit the button, a new activity is made by the ChartFactory.getLineChartIntent(..) method and it works great.
And in the same LinearLayout, I put a view returned by ChartFactory.getLineChartView method, its ok I have the graphic at the right of the button.
But when I remove the button I have nothing...
View graphique = new ReponsesChart().getView(contexte);
if (graphique !=null){
LinearLayout layout = (LinearLayout)convertView.findViewById(R.id.list_infos_layout_stat);
layout.addView(graphique, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
} else {
Log.d("Infos", "GRAPHIQUE NULL");
}
edit 2: Fixed by replacing Fill Parent properties when I add the view to the layout by the width of the screen
In the ChartFactory class there are several methods that you can use like this:
GraphicalView gView=ChartFactory.getDoughnutChartView(context,data,renderer);
and similar ones for other graph types like line charts and bar charts. You can then simply call:
setContentView(gView);
Download the documentation for AChartEngine, its pretty easy to find there.
Would something that writes to a bitmap help? I use the following in some of my code:
final XYMultipleSeriesRenderer multipleRenderer = new XYMultipleSeriesRenderer();
final XYSeriesRenderer renderer = new XYSeriesRenderer();
multipleRenderer.addSeriesRenderer(renderer);
final XYMultipleSeriesDataset dataset = final XYMultipleSeriesDataset dataset = ...
final Bitmap image1 = Bitmap.createBitmap(WIDTH, HEIGHT, Bitmap.Config.ARGB_8888);
final TimeChart tc = new TimeChart(dataset, multipleRenderer);
final Canvas canvas = new Canvas(image1);
tc.draw(canvas, 0, 0, WIDTH, HEIGHT, paint);
final Bitmap image = Bitmap.createBitmap(image1, 0, 0, WIDTH, HEIGHT);
Note that I've cut out a lot of code relating to initialising the multipleRender and dataset