Placing confetti to fall from top instead of top left only - java

I recently came across this library.
https://github.com/DanielMartinus/Konfetti
I tried to implement it in my application. I read the documentation and tried to implement it. Below is my code:
JAVA FILE:
final KonfettiView konfettiView = findViewById(R.id.viewConfetti);
konfettiView.build()
.addColors(Color.YELLOW, Color.GREEN, Color.MAGENTA)
.setDirection(0.0, 359.0)
.setSpeed(1f, 5f)
.setFadeOutEnabled(true)
.setTimeToLive(2000L)
.addShapes(Shape.Square.INSTANCE, Shape.Circle.INSTANCE)
.addSizes(new Size(12, 5))
.setPosition(-50f, konfettiView.getWidth() + 50f, -50f, -50f)
.streamFor(300, 1500L);
Below is my Layout file:
<?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"
android:background="#drawable/folk"
tools:context=".TrueActivity">
<nl.dionsegijn.konfetti.KonfettiView
android:id="#+id/viewConfetti"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/CongoText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/congratulations"
android:visibility="invisible"
android:textSize="35dp"
android:textColor= "#FFF"
android:gravity="center"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Everything is working fine for me. But the confetti is ejected from the top left only. I tried to change the KonfettiView object to different dimensions (i.e. trying to change the X-axis); but to no avail. I even read below answer on Stack overflow.
https://stackoverflow.com/a/46016959/13627957
But it doesn't seem to help. Is there any way I could get it ejected from full top as shown in the main library readme file instead of only top left.
Thanks.

You can use the DisplayMetrics class' constant widthPixels instead of konfettiView.getWidth() method to achieve your results.
Speaking about the two; your konfettiView.getWidth() uses the Konfetti width whereas DisplayMetrics.widthPixels uses device width. Information about width pixels.
Try the code below:
DisplayMetrics display = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(display);
final KonfettiView konfettiView = findViewById(R.id.viewConfetti);
konfettiView.build()
.addColors(Color.YELLOW, Color.GREEN, Color.MAGENTA)
.setDirection(0.0, 359.0)
.setSpeed(1f, 5f)
.setFadeOutEnabled(true)
.setTimeToLive(2000L)
.addShapes(Shape.Square.INSTANCE, Shape.Circle.INSTANCE)
.addSizes(new Size(12, 5))
.setPosition(-50f, display.widthPixels + 50f, -50f, -50f)
.streamFor(300, 1500L);

Related

draw circle on preview view is not accurate when dimension ratio is given

I'm trying to draw a circle on previewView by setOnTouchListener as below
val shape = GradientDrawable()
shape.shape = GradientDrawable.OVAL
shape.setColor(Color.TRANSPARENT)
shape.setStroke(5, Color.WHITE)
var circleSize = 200
var img: ImageView = ImageView(this)
img.background = shape
val params = FrameLayout.LayoutParams(circleSize, circleSize)
params.leftMargin = (event.x - (circleSize / 2)).toInt()
params.topMargin = (event.y - (circleSize / 2)).toInt()
idFocusIndicator.removeAllViews()
idFocusIndicator.addView(img, params)
This was my PreviewView
<androidx.camera.view.PreviewView
android:id="#+id/viewFinder"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
--->app:layout_constraintDimensionRatio="" // 3:4, 9:16, 1:1 etc
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/idFocusIndicator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toTopOf="#+id/viewFinder"
app:layout_constraintEnd_toEndOf="#+id/viewFinder"
app:layout_constraintStart_toStartOf="#+id/viewFinder"
app:layout_constraintTop_toTopOf="#+id/viewFinder" />
When I tap on view when constraintDimensionRatio is blank i.e "". Wherever I tap on view a round circle will appear exactly at that point as a center.
But when constraintDimensionRatio is given values like "3:4","1:1" etc. Circle was getting drawn little far from where I tapped the view. And it's distance from the actual position is different for different dimension ratio.
Look where I tapped and where the circle get drawn when ratio is "3:4" which don't give problem when ratio is ""
How to solve this issue ?
Edit :
I found that because FrameLayout is hard coded with match_parent constraint values It is behaving like that. SO, If I create a FrameLayout and add ImageView to it and then adding FrameLayout as child to parent layout will solve the issue. But I'm not getting how to do it ! Any Help ?
No one answered my question So, I'm only answering
I solved it by just changing the constraint exactly matching PreviewView. But, it took almost a day to figure this out. It might help someone who does same mistake.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/idFocusIndicator"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

how to convert textview into image with exact size like screenshot

I am new in android developing and I am trying to convert or screenshot a text view into an image, lately I found a snippet code for this problem and it work fine with me when the text is very small like one sentence with one line and small text size, but if there are more than one line or big text size it gives the image with the text compressed in one line and the size of the text becomes very small.
Here is the java code.
public class MainActivity extends AppCompatActivity {
ImageView bmImage;
TextView view;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (TextView) findViewById(R.id.screen);
bmImage = (ImageView)findViewById(R.id.image);
view.setDrawingCacheEnabled(true);
view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.buildDrawingCache(true);
Bitmap b = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);
bmImage.setImageBitmap(b);
bmImage.setBackgroundColor(Color.GRAY);
}}
and here is the xml code.
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.jarad.c_to_i.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/screen"
android:textSize="20dp"
android:text="My name is Mo7mdech I am 30 years old, please help my in this problemŮŽ"
/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
please help, thanks.
You could try to draw the same text into a new Canvas by hand. You can get the textPaint by TextView.getTextPaint().
I found what I did wrong ..
I made the text with width -> match_parent and the height -> wrap_content and I think that is not giving me the exact size of the text in the image I don't know exactly why (I think the problem in width with no fixed number) but what I did lately is giving the text a fixed width and the image start giving me the same width of the text so I change the image height to -> wrap_content and it start to give me a copy of the text as a screenshot and that's what I want for now.
I know it is not the perfect solution specially with any device with width less than I put to the text but it gave me till now what I want.
Please if anyone have a better answer don't hesitate to respond.
this is my new 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/screen"
android:padding="6dp"
tools:context="com.jarad.c_to_i.MainActivity">
<TextView
android:layout_width="370dp"
android:layout_height="wrap_content"
android:id="#+id/text"
android:textSize="20dp"
android:text="My name is Mo7mdech I am 30 years old, please help my in this problem"
/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

Why does minHeight attribute not work in WebView Android?

This question has already been asked here, but it has no solution.
I have a WebView. I want to set minimum height to the WebView using minHeight attribute, but it doesn't work. The same attribute works for Button.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.anshul.webview.WebActivity">
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="400dp"></WebView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minHeight="150dp"
android:text="This is a Button. It's minHeight is set to 150 dp and it works !!"/>
Clearly from the below image, the WebView is not supporting the minHeight attribute. Does anybody knows a solution for this problem?
First, let's understand how other view's use android:minHeight attribute. Let's take Spinner for example. In AbsSpinner#onMeasure() code we see following chunk of code:
...
preferredHeight = Math.max(preferredHeight, getSuggestedMinimumHeight());
preferredWidth = Math.max(preferredWidth, getSuggestedMinimumWidth());
heightSize = resolveSizeAndState(preferredHeight, heightMeasureSpec, 0);
widthSize = resolveSizeAndState(preferredWidth, widthMeasureSpec, 30);
setMeasuredDimension(widthSize, heightSize);
...
So, getSuggestedMinimumHeight() should be regarded when computing preferred height.
Now, let's see how WebView is being measured.
WebView#onMeasure() delegates the job to WebViewChromium#onMeasure()
WebViewChromium#onMeasure() delegates the job to AwContents#onMeasure()
AwContents#onMeasure() delegates the job to AwLayoutSizer#onMeasure
AwLayoutSizer is the last component that is responsible for measuring WebView and we can clearly see, that its onMeasure() does not respect getSuggestedMinimumHeight() value.
I'm not sure whether this is an intended behavior or no. Nevertheless, I cannot find enough seams to somehow affect that measurement process. Here's the chuck of code in WebView class, where the object that eventually would return WebViewChromium (the first step in abovementioned order) is initialized.
private void ensureProviderCreated() {
checkThread();
if (mProvider == null) {
// As this can get called during the base class constructor chain, pass the minimum
// number of dependencies here; the rest are deferred to init().
mProvider = getFactory().createWebView(this, new PrivateAccess());
}
}
As you can see, this is not something that can be easily customized/changed.
Try it :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = (WebView)findViewById(R.id.webView);
webView.loadDataWithBaseURL(null, "<html><body bgcolor=\"#E6E6FA\"> hehehe </body></html>", "text/html", "utf-8", null);
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#color/blue"
android:layout_height="match_parent">
<LinearLayout
android:minHeight="300dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
>
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minHeight="150dp"
android:text="This is a Button. It's minHeight is set to 150 dp and it works !!"/>
</RelativeLayout>
I think webview dimensions work more according to content view port properties...
Check https://developer.android.com/guide/webapps/targeting.html#Viewport
The viewport is the area in which your web page is drawn. Although the viewport's total visible area matches the size of the screen when zoomed all the way out, the viewport has its own pixel dimensions that it makes available to a web page. For example, although a device screen might have physical a width of 480 pixels, the viewport can have a width of 800 pixels. This allows a web page designed at 800 pixels wide to be completely visible on the screen when the viewport scale is 1.0. Most web browsers on Android (including Chrome) set the viewport to a large size by default (known as "wide viewport mode" at about 980px wide). Many browsers also zoom out as far as possible, by default, to show the full viewport width (known as "overview mode").
use constraint layout .that will help to resolve all these types of errors and very easy to use.
if your android studio version is below 2.3.1 then add this dependency.
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta1'

how do i accurately calculate my layout (button) height relative to screen size?

Hey everyone im currently working on my first app and im facing a strange problem.
I have 5 buttons in my layout of which the height is calculated by a function to get the right size for every screen.
The function works fine and almost correctly sets the height for each button except for a tiny little line at the bottom, I guess it's some kind of rounding error?
Maybe somebody can point me in the right direction, i cant figure this out.
Thanks in advance.
DisplayMetrics displayMetrics = new DisplayMetrics();
WindowManager wm = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(displayMetrics);
int minusthis = 0;
Context context = this;
int resource = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resource > 0) {
minusthis = context.getResources().getDimensionPixelSize(resource);
}
int screenHeight = displayMetrics.heightPixels - minusthis;
int tilesize = (screenHeight / 5);
As you can see I get the displayMetrics and divide them by 5 because i have 5 tiles which have to be exactly 1/5 of the screen.
"tilesize" will be applied to the buttons in the code later on.
app running on Nexus6p
In the picture I attatched you can see the buttons get stretched almost correctly over the screen except for the tiny white line I circled in red.
The line may seem small but I cant make it disappear and it really annoys me, also it becomes more apparent in other activities where I have differently sized buttons and panels.
So if you've read this far, thank you already! If you see any way to improve my code please tell me :)
Instead of calculating size dynamically use Linear Layout and the child Text Views with weight property. It will solve your problem.
Here is the sample code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:text="item1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="item2"
/>
</LinearLayout>
We have better option to display view with same weight. You can use LinearLayout with android:orientation="vertical". Add all TextView into LinearLayout and set All TextView property android:layout_width="0dp", android:layout_height="match_parent" and android:layout_weight="1".
With LinearLayout and weight property in we can easily divide screen equally.
Instead of trying to get the size dynamically try linear layout and give the height and weight
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:text="item1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="item2"
/>
if u want to add buttons horizontally than use orientation horizontal and weightsum property
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightsum="10"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:text="item1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="5"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="item2"
/>

How can I specify the layout_height value based on the layout_width in Android layout?

I am absolutly new in Android development and I have a problem positioning image in the first app that I am developing.
So I have the following situation.
Into a layout file I have:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Dummy content. -->
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="0dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="#drawable/carbonara" />
<TextView android:id="#android:id/text1"
style="?android:textAppearanceLarge"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp" />
</LinearLayout>
</ScrollView>
So, as you can see, there is this ImageView element:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="#drawable/carbonara" />
As you can see, for this ImageView I have setted the following values for the width and for the height
android:layout_width="wrap_content"
android:layout_height="300dp
This because I want that the image occupies horizontally all the space, but I have also to put a vaue for the height.
So for the previous value I obtain the following result:
As you can see in the previous screenshot there is a space up and down the image because I am manually giving a specific value to my ImageView element and this is wrong.
I have tryed to set a lower hwight value and this empty space is deleted for the android:layout_height="240dp" value.
But I think that this is not a good solution because it depens from the used screen.
So, what is the best way to handle this situation?
I have an image view that horizontally have to fill the screen and its height have be automatically handled and not manually specified with a dp value.
How can I implement this behavior? What am I missing?
Your problem can be solved with this simple line of code below
The XML attribute for this is:
android:scaleType="fitCenter"
Put it here like this your code below I just added new line see #1
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:scaleType="fitCenter" // #1
android:layout_height="300dp"
android:src="#drawable/carbonara" />
Also you are using src but you can use background attribute:
android:background="#drawable/carbonara"
Try to use android:scaleType="centerCrop" or android:scaleType="fitXY" if you need to rescale the picture
you can use screen aspect ratio for setting height and width to the image.Try following function.`
public void calculateAspectRatio() {
int imagewidth;
int imagewidth;
DisplayMetrics displaymetrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
imagewidth=width;
imageHeight = (imageTwoWidth / 4) * 3;
}
set image height and width
imageview.requestLayout();
imageview.getLayoutParams().width = imagewith;//take value from above function for height and width.
imageview.getLayoutParams().height =imageheight;
`

Categories

Resources