Im working on an android app were you can setup your own Ring.
Now I want to give the user a preview of the ring, when they selected multiple rings.
Here a preview of how it should look like
The setup of how i thought to make it is this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp">
<ImageView
android:id="#+id/generator_ring_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e7e7e7"/>
<FrameLayout
android:id="#+id/generator_ring_addon_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</FrameLayout>
I'm going to add the addon rings programmatically by just creating a new ImageView in the code.
Now the hard part of this is to place the image over the other ring, and have the view the same on every screen size..
Is ther anybody who can help me getting the correct code for placing the image on the correct position on every screen size?
thanks for reading
EDIT:
the moment I am selecting the addons rings the Base Rings is already visible, so I can get the height of the image
User Paint API: https://developer.android.com/reference/android/graphics/Paint.html
https://developer.android.com/reference/android/graphics/Canvas.html
Like that you can add whatever pictures you want, programatically, move them, even create animations if you want.
Also you will have just a view, which contains the canvas. So no need to have convoluted FrameLayouts into FrameLayouts.
Example on how to draw images on a canvas.
draw object/image on canvas
Using canvas you can get (x,y) coordinates of the ring.
First create canvas with ring image and than use canvas.draw() to draw another image on base image.
Related
I've searched this up many times, but couldn't find an answer which worked for me. So basically, my issue is that I get an image from a backend provider and should display it in the ImageView with an opacity gradient of 100% at the bottom and 0% at the top so the image behind it slowly shows up. Applying a transparent gradient overlay doesn't work since the pixels to be transparent are the actual image I get from the backend service. Any help or ideas would be appreciated! The UI is in XML not Compose
This is the xml for the view I want to add an opacity gradient to. The image comes as a bitmap variable I assign to it's background currently:
<ImageView
android:id="#+id/bottom_container_background"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_container_height"
android:adjustViewBounds="true"
android:alpha="0.7"
android:src="#drawable/cardview_gradient_shape"
app:layout_constraintBottom_toBottomOf="#+id/iv_epg"
app:layout_constraintEnd_toEndOf="#+id/iv_epg"
app:layout_constraintStart_toStartOf="#+id/iv_epg"
tools:src="#drawable/cardview_gradient_shape" />
val croppedBlurredThumbnail = BitmapDrawable(thumbnailBottomBackgroundBlurred)
cardLayout.bottom_container_background.background = croppedBlurredThumbnail
I try to make an app but I have an issue with the background.
The above image shows what should look like the app. Every rectangle of color is a fragment and the red one already have the correct part of the background. But now I try to figure out how can i make the green rectangle background respect this rules :
Image width needs to match parent
The image needs to keep his ratio
Image need to "stick" the bottom (in that way the upper part shows in the red rectangle won't appears in the green one)
In the green fragment I have a ConstraintLayoutand an ImageView like above :
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ss_background_blur"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
The #drawable/ss_background_blur is my PNG image.
Thx
As Neo Shen pointed out in the comments, the only thing you need to do is set the background property of the container element to the drawable resource (the image).
If you have an Activity which only contains three Fragment elements, then you can set the background of the main Activity layout.
You can see and clone a quick demo I put together here:
https://github.com/sipox11/full-background-android-app
This is the result:
Note: I did it very quickly so obviously the tabs are not real tabs and the top bar is not a real nav bar, but you get the idea.
In this case the background image is actually below the tabs area, but if you want it to start on top of it, you can wrap the top and middle fragments within a LinearLayout and set the background image to that container.
Hope it helps,
Cheers.
Set the background of the rootlayout to green and add android:layout_margin="2dp" to the imageview .
Hope this helps.
I would like to fill the screen with a rotated ImageView. The question of how to fill the screen with an ImageView and how to rotate an ImageView has been answered seperately mutlipe times on the site. My XML code looks as follows.
<ImageView
android:id="#+id/video_frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:rotation="270"
/>
The problem is that the rotation happens after the image has been fitted with no rotation applied and I end up with an image that does not fill the screen.
I could of course just rotate the images (and remove the ImageView rotation) as follows:
Matrix mMatrix = new Matrix();
mMatrix.postRotate(-90);
ImageView video = (ImageView)findViewById(R.id.video_frame);
Bitmap frame = BitmapFactory.decodeFile("path/to/file.jpg");
Bitmap frame2 = Bitmap.createBitmap(frame, 0, 0, frame.getWidth(), frame.getHeight(), mMatrix, true);
video.setImageBitmap(frame2);
Here the problem is that the application is realtime and I am serving multipe frames per second (20+). The rotation per frame seems to be quite heavy and even if in this case the images fill the screen, the result is lagging and not as responsive as without the matrix rotation.
My question would therefore be if I could solve this issue with XML only or in any other way without rotating every image I want to display?
You can use RotateLayout and put your ImageView in RotateLayout and pass your rotation in setAngle() method of RotateLayout, So It rotates only view not Image or we can say bitmap it's much faster than any other rotation of Images.
you can add its dependency in Gradle file.
Usage
In your layout file add
<com.github.rongi.rotate_layout.layout.RotateLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:angle="90"> <!-- Specify rotate angle here -->
<YourLayoutHere
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</YourLayoutHere>
</com.github.rongi.rotate_layout.layout.RotateLayout>
Voila! Your layout will be rotated 90 degrees.
Download
compile 'rongi.rotate-layout:rotate-layout:3.0.0'
Features
Handles all touch events in a correct way. You press the same button you touch!
Layout measures itself in a correct way. This means that if the original view is 50x100, then 90 degrees rotated it will measure itself as 100x50 and can fit in another layout with this dimensions.
RotateLayout Link
I'm new to Android and discover lots of things. But now I'm quite stucked.
I want to make a hexagonal board game, with tiles. I found many tutos and finally decided to draw as mush hexagons as I want to.
I created a 'Hex' class extending from View, add some variables and so on. Here is what I put in my main XML layout:
<flocoolb.app6.Hex
android:layout_width="wrap_content"
android:layout_height="wrap_content"
flocoolb:r="50"
android:id="#+id/h01"/>
<flocoolb.app6.Hex
android:layout_width="wrap_content"
android:layout_height="wrap_content"
flocoolb:r="50"
flocoolb:x="75"
flocoolb:y="43.30127"
android:id="#+id/h02"/>
<flocoolb.app6.Hex
android:layout_width="wrap_content"
android:layout_height="wrap_content"
flocoolb:r="50"
flocoolb:x="150"
android:id="#+id/h03"/>
r=size, x and y are offsets on canvas.
Here is what I get on my activity:
Main activity screen
But now I want to select single Hex. For example I want to select to top left one, or the bottom right one. I add OnClickListener on each of them, but actually the size of the view is the whole screen.
For example, if I change the background color of the view, it change that color on the whole screen. Is it possible to have the view limited to the drawn lines?
I hope you will understand what I mean.
Many thanks :)
Although,I don't understand you very much.But I suggest you to override onTouch Method of your view.And implement your function in onTouch method.
I am creating a small Battleship game and for the Android UI I was hoping to create a 10x10 grid of image buttons or something (anything easy).
I was following the tutorial provided at this link
My problem is that I can't get the images to display in a proper 10x10 format. Using the GridView, I set the num_columns to "10" in the XML but there is no such attribute for the number of rows.
As phone sizes differ, is there a way to have a 10x10 grid auto fit any screen?
By following the steps in the above link I can display 100 clickable images but my problem is with the formatting. Here's a screenshot of said result:
I've tried changing values in XML to scale the images down but cannot figure out how to. Apologies for lack of code snippets but I really haven't altered much from the sample given in the above link other than the vertical and horizontal spacing.
Would appreciate any enlightenment, even if it's just to say I am I going about this the wrong way completely.
You can achieve this with a table layout : http://www.mkyong.com/android/android-tablelayout-example/
GridViews, just as ListViews have been designed to contain any number of rows.
But I really doubt you want to use views in your game and not only use a canvas, draw anything and detect clicks without relying on views built-in mechanisms. It's more work but you end with something that will make you much more free to do what you want (for instance not having to deal with the number of rows of a container...)
go to this link and try 2nd example Custom Adapter example.
just change android:numColumns="auto_fit" to android:numColumns="10".
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridView1"
android:numColumns="10"
android:gravity="center"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</GridView>
You can probably do what you want with a GridLayout, but not with a GridView (which automatically scrolls vertically). Using a GridLayout, set all the buttons to have 0dp layout width and height, and set their layout gravity to fill.