Android Imageview and Buttons in the same View - android

I have a Button and a ImageView on the same "Page". Now, I made a OnClickListener and when I Click the Button the Page clears and my Drawing appears. I think I have to change the setContentView(meinView) but I don't know how ?
I want when I click the Button that the Drawing will be made in the ImageView on the same "Page". I'm new in android-programming and I'm not sure that the xml-File is correct. It was made from the Android Studio 3.5.3.
The XML-File:
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="422dp"
android:layout_height="452dp"
android:layout_marginBottom="296dp"
android:background="#555555"
app:layout_constraintBottom_toBottomOf="parent"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="253dp"
android:layout_marginTop="166dp"
android:onClick="BeimKlick"
android:text="Klick mich" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="109dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="6dp"
android:elevation="2dp"
tools:layout_editor_absoluteX="4dp"
tools:layout_editor_absoluteY="514dp" />
</RelativeLayout>
My Main-Activity:
MeinView meinView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
meinView = new MeinView(this);
meinView.setBackgroundColor(Color.DKGRAY);
setContentView(R.layout.activity_main);
final Button button1 = findViewById(R.id.button1);
final ProgressBar progressbar1 = findViewById(R.id.progressBar1);
final ImageView iView = findViewById(R.id.imageView);
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
setContentView(meinView);
//setContentView(R.id.imageView);
}
});
}
Here is my Drawing-Class:
int x;
for (x=0;x<=200;x+=5)
{
canvas.drawLine(x, 0, x, 1000, paint);
}
int y;
for (y=0;y<=200;y+=5)
{
canvas.drawLine(0, y, 1000, y, paint);
}
canvas.scale(6, 6);
paint.setColor(Color.RED);
canvas.drawText("Test", 20, 50, paint);
canvas.drawText("Row1", 20, 70, paint);
canvas.drawText("Row2", 20, 90, paint);
OK I used Framelayout instead of Relativelayout, but the same result as before. The controls (buttons/progressbar etc.) disappear and the drawing can be seen. Also I changed ImageView in SurfaceView but the same result (because I think ImageView is maybe not up-to-date anymore)

Use FrameLayout for overlapping in your XML instead of RelativeLayout.

Related

How to find a mid point of an android textview

I have a sub-class of TextView and want to draw a horizontal line by making its height to be 1px. It is ok but i also want to make it center vertically by setting the top margin as half of the height.
However it turns out to be failed.
Any solution to it?
thank you
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);
int h = getHeight();
lp.setMargins(0, h/2, 0, 0);
You can do it in your xml:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World!.\nA second line test."/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
android:layout_centerVertical="true"/>
</RelativeLayout>
Regards.
If you come here with some screenshots what you want to do , i can help you easily. But i can suggest you to use FrameLayout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="center"
android:background="#123456" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Horizontal Line" />
</FrameLayout>
There is one guide for FrameLayout here : Frame Layout
And the screenshot :
Without XML you could override onDraw(Canvas canvas) and draw the line in your subclassed TextView like so:
public final class TextViewEx extends TextView
{
private final Paint mPaint = new Paint();
protected final void onDraw(Canvas canvas)
{
super.onDraw(canvas);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(1);
mPaint.setColor(Color.GRAY);
float y = getHeight() / 2f;
canvas.drawLine(0, y, getWidth(), y, mPaint);
}
}

How to divide an Fragment in Android into Two Colors

First I would like to say please do not mark this question a duplicate. It differs from other posts in one critical way. Does anybody know a way that I may divide the color of fragment into two colors right down the middle? Thanks everyone!
here is sample to use gradient
float in[] = new float[] {0f,1f};
TextView textView= (TextView)findViewById(R.id.tv_test);
Shader shader = new LinearGradient(
0, textView.getTextSize(), textView.getWidth(), textView.getHeight(), new int[]{Color.RED, Color.BLUE},in,
Shader.TileMode.CLAMP);
textView.getPaint().setShader(shader);
To achieve Second Simply user Framelayout xml
<FrameLayout
android:id="#+id/fl_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/ll_test"
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#android:color/white"
android:orientation="horizontal">
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#android:color/holo_red_dark" />
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark" />
</LinearLayout>
<TextView
android:id="#+id/tv_test2"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:gravity="center"
android:text="A"
android:textColor="#android:color/white"
android:textSize="100sp" />
</FrameLayout>
For Third one you have to write little and do some work on pixel level
<TextView
android:id="#+id/tv_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="H"
android:textColor="#android:color/holo_red_dark"
android:textSize="100sp" />
<FrameLayout
android:id="#+id/fl_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/ll_test"
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#android:color/white"
android:orientation="horizontal">
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#android:color/holo_red_dark" />
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark" />
</LinearLayout>
<TextView
android:id="#+id/tv_test2"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:gravity="center"
android:text="A"
android:textColor="#android:color/white"
android:textSize="100sp" />
</FrameLayout>
<ImageView
android:id="#+id/iv_test"
android:layout_width="200dp"
android:layout_height="200dp" />
public class MainActivity extends AppCompatActivity {
View linearLayout;
View tvTest2;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TextView textView = (TextView) findViewById(R.id.tv_test);
Shader shader = new LinearGradient(
0, textView.getTextSize()/2, textView.getTextSize(), textView.getTextSize()/2,Color.RED, Color.BLUE,
Shader.TileMode.CLAMP);
textView.getPaint().setShader(shader);
linearLayout = findViewById(R.id.ll_test);
tvTest2 = findViewById(R.id.tv_test2);
}
#Override
protected void onResume() {
super.onResume();
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
ImageView imageView = (ImageView) findViewById(R.id.iv_test);
Bitmap b1 = getBitmapFromView(linearLayout);
Bitmap b2 = getBitmapFromView(tvTest2);
imageView.setImageBitmap(textEffect(b1, b2));
}
},2000);
}
public Bitmap textEffect(Bitmap image, Bitmap text) {
if (image.getWidth() != text.getWidth() ||
image.getHeight() != text.getHeight()) {
throw new IllegalArgumentException("Dimensions are not the same!");
}
for (int y = 0; y < image.getHeight(); ++y) {
for (int x = 0; x < image.getWidth(); ++x) {
int textPixel = text.getPixel(x, y);
int imagePixl = image.getPixel(x,y);
int red = Color.red(textPixel);
int blue = Color.blue(textPixel);
int green = Color.green(textPixel);
int alpha = Color.alpha(textPixel);
Log.i("TAG", "textEffect: "+x+"-"+y+",-->"+red+","+blue+","+green+","+alpha);
/*Since text color is white so give the color of background to it
* else make it white*/
if (red == 255) {
if (blue == 255) {
if (green == 255) {
image.setPixel(x, y, imagePixl);
}else
{
image.setPixel(x, y, textPixel);
}
}else{
image.setPixel(x, y, textPixel);
}
}else
{
image.setPixel(x, y, textPixel);
}
}
}
return image;
}
public static Bitmap getBitmapFromView(View view) {
//Define a bitmap with the same size as the view
Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
//Bind a canvas to it
Canvas canvas = new Canvas(returnedBitmap);
//Get the view's background
Drawable bgDrawable = view.getBackground();
if (bgDrawable != null)
//has background drawable, then draw it on the canvas
bgDrawable.draw(canvas);
else
//does not have background drawable, then draw white background on the canvas
canvas.drawColor(Color.WHITE);
// draw the view on the canvas
view.draw(canvas);
//return the bitmap
return returnedBitmap;
}
}
What you exactly want to achieve ??
First one
Second one
Third one ??
Define a TextView
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:text="O"
android:textColor="#88022b54"
android:textSize="250sp"
android:textStyle="bold"
android:shadowColor="#ff2e7cca"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="1"/>
Then
Shader shader = new LinearGradient(
0, mytv.getTextSize()/2, mytv.getTextSize(), mytv.getTextSize()/2,
Color.RED, Color.BLUE,
Shader.TileMode.CLAMP);
mytv.getPaint().setShader(shader);
You can do like this
String text = "<font color=#cc0029>Erste Farbe</font> <font color=#ffcc00>zweite Farbe</font>";
yourtextview.setText(Html.fromHtml(text));
I achieved this by creating the ideal background in photoshop, saving it as a .png, and then setting that as the activity background for when I need it to be. Simple, clean, easy, and because I only need it to be two colors all the time, I don't have to worry about the image becoming pixelated.

Unable to fill imageview by bitmap, weird behavior

Simple layout
<FrameLayout 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"
android:background="#0099cc"
tools:context="com.testzoom.app.FullscreenActivity">
<TextView android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:textColor="#33b5e5"
android:textStyle="bold"
android:textSize="50sp"
android:gravity="center"
android:text="#string/dummy_content" />
<Button android:id="#+id/dummy_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dummy_button"
android:layout_gravity="bottom"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="#+id/dummy_image"
/>
</FrameLayout>
Goal - by pressing button on the bottom, set imageview(which is same size as screen) with screenshot bitmap of half size. Result - weird rendering, why fitXY not working?
Click handler:
findViewById(R.id.dummy_button).setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
View view = getWindow().getDecorView();
Bitmap bmp = Bitmap.createBitmap(view.getWidth()/2, view.getHeight()/2, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bmp);
c.scale(0.5f,0.5f, bmp.getWidth(), bmp.getHeight());
view.draw(c);
((ImageView)findViewById(R.id.dummy_image)).setImageBitmap(bmp);
}
});
Result on screenshots:
Note that this task is synthetic so don't ask why I am doing this, this is just demonstration of problem.
The problem lies within the call where you are scaling the canvas. You provide the pivot points which are bmp.getWidth() and bmp.getHeight() which are essentially in the middle of the screen.
findViewById(R.id.dummy_button).setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
View view = getWindow().getDecorView();
Bitmap bmp = Bitmap.createBitmap(view.getWidth()/2, view.getHeight()/2, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bmp);
c.scale(0.5f,0.5f);//no pivot points
view.draw(c);
((ImageView)findViewById(R.id.dummy_image)).setImageBitmap(bmp);
}
});
I don't think it's the rendering so much as the placement of the new ImageView. You have all three items in a FrameLayout which does nothing to determine the order or placement of view. Where is the code to place the newly created ImageView?

Android slider animation is not synchronized [duplicate]

I am trying to make an animation with two textviews. Both are in a relative layout. The functionality of the animation is left textview will go little bit left and at the same time right textview will also go little bit left. I have tried:
http://nineoldandroids.com/ and default way.
But for both case I am getting a gap during the process. I already put one question but i am not getting any positive reply:
Android slider animation is not synchronized
Nineoldandroids code:
xml file:
<RelativeLayout
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/target"
android:layout_marginTop="50dp">
<TextView
android:id="#+id/TextView01"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#f00"
android:gravity="center"
android:text="RED"
android:textColor="#000" />
<Button
android:id="#+id/TextView02"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/TextView01"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/TextView01"
android:background="#0F0"
android:text="TXT"
android:visibility="invisible" />
</RelativeLayout>
MainActivity.java:
public class MainActivity extends Activity {
double counter = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.toggles);
final View target = findViewById(R.id.target);
final int duration = 5*1000;
final int duration1 = 300;
final View textView1 = findViewById(R.id.TextView01);
final View textView2 = findViewById(R.id.TextView02);
textView1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (counter == 0) {
textView2.setVisibility(View.VISIBLE);
ObjectAnimator.ofFloat(textView1, "translationX", 0, -50).setDuration(duration1).start();
ObjectAnimator.ofFloat(textView2, "translationX", 100, 0).setDuration(duration1).start();
counter++;
}
else {
ObjectAnimator.ofFloat(textView1, "translationX", -50,0).setDuration(duration1).start();
ObjectAnimator.ofFloat(textView2, "translationX", 0,100).setDuration(duration1).start();
counter--;
}
}
});
}
}
How can I fix it?
otherwise I am trying to put both textview inside a layout where second textview will be outside the screen and using the animation I will move the whole layout. how can I make the xml like this?
Sorry for misunderstanding your question.
Anyway, your issue is not about time exactly. Both animations have the same duration but the problem is the sizes of the animated regions are different. Logically, moving a longer distance in the same duration will look slower than moving a smaller distance.
For example, to solve your problem, I used the following code in the OnClickListener:
public void onClick(View v) {
int width =textView2.getWidth();
if (counter == 0) {
textView2.setVisibility(View.VISIBLE);
ObjectAnimator.ofFloat(textView1, "translationX", 0, -1*width).setDuration(duration1).start();
ObjectAnimator.ofFloat(textView2, "translationX", 1*width, 0).setDuration(duration1).start();
counter++;
}
else {
ObjectAnimator.ofFloat(textView1, "translationX", -1*width, 0).setDuration(duration1).start();
ObjectAnimator.ofFloat(textView2, "translationX", 0, 1*width).setDuration(duration1).start();
counter--;
}
}
Try this
<!-- YOUR CONTAINER -->
<LinearLayout
android:id="#+id/target"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/target"
android:layout_marginTop="50dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/TextView01"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#f00"
android:gravity="center"
android:text="RED"
android:textColor="#000" />
<Button
android:id="#+id/TextView02"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/TextView01"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/TextView01"
android:background="#0F0"
android:text="TXT"
android:visibility="invisible" />
</LinearLayout>
Then use a ViewPropertyAnimator like this (if you can use it)
//Translate your view -50 to the left.
yourLinearLayout.animate().translationX(-50).setDuration(1000);
With the ObjectAnimator I achieved the same results by using this code
Button textView02 = (Button) findViewById(R.id.textView02);
LinearLayout target = (LinearLayout) findViewById(R.id.target);
int width = textView02.getWidth();
ObjectAnimator.ofFloat(target, "translationX", 0, -width).setDuration(1000).start();
Hope this helps you

Draw a rectangular over an image by code

I have this xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/photo0"
android:id="#+id/imagBackground">
<TextView android:layout_width="20dip" android:layout_height="20dip"
android:layout_marginLeft="250dip" android:layout_marginTop="15dip" android:background="#FFFFFF"
android:id="#+id/index" android:text="0" android:textColor="#000000">
</TextView>
<ImageView android:layout_marginTop="280dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#drawable/anim_ctrl_panel" android:id="#+id/change">
</ImageView>
</LinearLayout>
and over this I must draw some rectangular by code. How to do this ?
I tried this :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
layout = (LinearLayout) findViewById(R.id.imagBackground);
changeImage = (ImageView) findViewById(R.id.change);
index = (TextView) findViewById(R.id.index);
draw();
}
private void draw() {
System.out.println("desenam");
int width = 50;
int height = 100;
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.RED);
canvas.drawRect(25, 50, 75, 150, paint);
ImageView imageView = new ImageView(this);
imageView.setImageBitmap(bitmap);
layout.addView(imageView);
setContentView(layout);
}
but the rectangulars are on the bottom on screen. How to set the location where to put them?
My guess is, the reason why it's in the bottom of the page is because of the LinearLayout: in the end you will have 3 children: TextView, ImageView and ImageView, all below each other.
A few possible solutions:
Add a FrameLayout inside the LinearLayout and add the ImageViews inside it, so the hierarchy would be:
LinearLayout
TextView
FrameLayout
ImageView
ImageView
Use a RelativeLayout instead of the LinearLayout and align all the edges of the second ImageView with the first one
Create a custom ImageView class, for example "com.foo.bar.MyImageView", which of course extends ImageView. Override onDraw:
public void onDraw(Canvas canvas) {
super.onDraw(canvas); // This will render the original image
// ... and here you can have the code to render the rectangle
}
In the xml you replace
<ImageView ...
with
<com.foo.bar.MyImageView ...
I would go for the last solution, since from a performance point of view it's the best.
try this code:
Point left=new Point(x, y);
paint.setColor(Color.parseColor("#00CCFF"));
paint.setStyle(Style.FILL);
canvas.drawCircle(left.x, left.y, 9, paint);
So you have to create a Point using pixels and then draw a rectangle around it otherwise it doesn't know where to draw
Why dont you do this in the layout file itself:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/photo0"
android:id="#+id/imagBackground">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#android:color/darker_gray">
<LinearLayout android:layout_width="fill_parent"
android:layout_margin="5dip"
android:layout_height="fill_parent" android:background="#android:color/black">
<TextView android:layout_width="20dip" android:layout_height="20dip"
android:layout_marginLeft="250dip" android:layout_marginTop="15dip" android:background="#FFFFFF"
android:id="#+id/index" android:text="0" android:textColor="#000000">
</TextView>
<ImageView android:layout_marginTop="280dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#drawable/anim_ctrl_panel" android:id="#+id/change">
</ImageView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Try to change your LinearLayout to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:gravity="top" android:layout_gravity="top"
android:layout_height="fill_parent" android:background="#drawable/photo0"
android:id="#+id/imagBackground">
...

Categories

Resources