ImageViews in circle - java

I want to put 20 ImageView objects in LinearLayout rotated so that they form a circle. Is this possible and how, and is this the right approach for creating circular layout of ImageView objects?
Thanks

I'm not conversant with the android API, but it doesn't look like you can bend a LinearLayout into a circle. Rotating it should only change it's angle (horizontal versus vertical versus diagonal).
Probably, you're going to want to do something based off of an AbsoluteLayout or RelativeLayout, then perform geometry-related math to find out the positions the various elements need to be at.
Ideally, for future re-use, you should actually create a new CircularLayout that could be applied to containers. You want the API to require a List of some sort of the elements (plus optionally padding), then have the layout perform the necessary math.

LinearLayout can only present child elements either vertical or horizontal. You can position the ImageViews to form a circle if you use a RelativeLayout, but rotating them will include lots of calculations

consider using the canvas and draw paint functions

Try this:
Your XML
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/myImageontoolbar"
android:padding="5dp"
android:layout_width="10mm"
android:layout_height="10mm"
android:layout_gravity="left"
app:srcCompat="#android:drawable/sym_def_app_icon" />
Your Gradle
compile 'de.hdodenhof:circleimageview:2.1.0'

Related

Android - CardView becomes a diamond shape because radius too large

I'm using android.widget.CardView in my application.
In my Android 11 device, when radius is larger than the View, it will automatically adjust to half the size of the View.(I don’t know which version this was adjusted)
In the lower system version(I use Android 7.1 to test), CardView will turn into a diamond shape when the radius is larger than the View.
Anyone know why and how to solve? Thx
Very often, the Glide library is used to load images. This library can help round the edges as follows
Glide.with(context)
.load(url)
.circleCrop()
.into(imageView)
Make friends with this library and you will be happy. Not only does it help the image to take shape, but it also uses memory correctly https://github.com/bumptech/glide
P.S: In my opinion, using CardView is very limiting for you.
You could use as a root element for example a Constraint Layout and as a background use a rounded shape as you like (rectangle) and place your image inside the layout.
To hold the shape I often using the next attribute (an example is below):
app:layout_constraintDimensionRatio="W,1:2".
In your case ratio must be 1:1 because it is circle not ellipse, then you can use
app:layout_constraintDimensionRatio="W,1:1" or app:layout_constraintDimensionRatio="H,1:1"
I'm not sure if this will work in CardView, but it works well in ConstraintLayout.
Here is one of the common and most simple method to make the image get a circular border using card view in android in XML
first create a card view inside your XML and inside that create a image view with exactly 1dp less then the card view in both width and height and then try to adjust the cardCornerRadius as per your requirements, that's it it is as simple as that.
I'm using androidx.cardview.widget.CardView here.
<androidx.cardview.widget.CardView
android:layout_width="70dp"
android:layout_height="70dp"
app:cardCornerRadius="35dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/rounded_profile_img"
android:layout_width="69dp"
android:layout_height="69dp"
android:scaleType="centerCrop"/>
</androidx.cardview.widget.CardView>
Thank you hope y'll like it and it is helpful for everyone.

Select single View drawn on Android canvas

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.

Android Pixel Perfect Alignment

I'm creating a bar at the top of my app much like the one above.
The graphics are embedded into the background and the numbers that represent the level etc is using TextViews.
As you can see the TextView has to be pixel(dp) perfect to fit in the center of the white bar thingy. With some margins or padding i can achieve that.
But how do games like that keep the same pixel perfect across all devices?
I know about resource qualifiers and such but some devices within the same bucket have different sizes.
Is there a good way or trick to achieve the perfect centering across most devices?
In general Android will handle the relative sizes across devices as long as you do everything in relative units and include 9-patch or images for each screensize.
For your question of how to handle images attached to a TextView, you can accomplish this a few ways.
A TextView will allow you to attach a drawable to it on the top, bottom, left, and right. You can do this with code using the various setCompoundDrawable* methods. For example, this will add a drawable to the right and left of the TextView.
txtScore.setCompoundDrawables(R.drawable.imageLeft, null, R.drawable.imageRight, null)
You can also do this in XML with the drawableLeft, etc properties. You may need to mess with padding and bounds for the drawables.
<TextView
android:id="#+id/txtScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableLeft="#drawable/imageLeft"
android:drawableRight="#drawable/imageRight"
android:drawablePadding="10dp"
android:singleLine="true"
android:text="125"/>
There are a number of different options in code as well if you look over those setCompoundDrawable type APIs for the TextView.
Your other option is to create your own View that does all of the work for you, but may be overkill if you only use it in one spot.
Again, you will really want to consider a 9-patch image or create an image for each screensize in the drawable folders. This will allow Android to determine which image to use for each device.

How to create a 10x10 grid in Android?

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.

setting the exact x,y positions of buttons in a relative layout

I was wondering how i could set the exact x,y positions of a button in a relative layout. I want to try and not use an absolute layout. When i looked at similar posts most of them only showed how to align things exactly in the center or to the left of the screen, is there a way to align things at an exact position maybe by subtracting the distance from a margin by w/e dpi
RelativeLayout imply the concept of relative position. You can only set a position of a widget in Relation with other widgets positions (aligned to the left, under...) or the container (bottom, top etc etc).
you can position the widget and then try to adjust the distance with the padding attribute (there is a padding for every direction, left,right,bottom,top). With these maybe you can do it.
I was wondering how i could set the exact x,y positions of a button in
a relative layout
Those 2 things are diametrically opposed concepts. What is it you're trying to do? Why do you need things to be at exact x,y positions?
There might be but I don't know it. However I would think that simply placing a relative layout inside of an absolute layout but not filling it and placing your buttons on the exposed part of the absolute layout would work. Unless you REALLY don't want to use absolute at all.

Categories

Resources