I have a picture (jpg) that I want to display on the screen.
Additionally the picture should be covered partially by a transparent effect.
The transparent cover should be dynamic. So e.g. each day more of the picture is shown.
Here a picture to show what I mean:
I have the picture without the gray cover and want to add this cover but in different steps.
Can someone give me a hint how to do that.
You can do this simply with widgets:
FrameLayout is the general mechanism for overlaying a view on top of another:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_image"/>
<View
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</FrameLayout>
Then in your Java code you can dynamically set the transparency of your overlay:
View overlay = (View) findViewById(R.id.overlay);
int opacity = 200; // from 0 to 255
overlay.setBackgroundColor(opacity * 0x1000000); // black with a variable alpha
FrameLayout.LayoutParams params =
new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT, 100);
params.gravity = Gravity.BOTTOM;
overlay.setLayoutParams(params);
overlay.invalidate(); // update the view
You can do something like this where the canvas is coming from an onDraw() request:
Paint paint = new Paint();
Rect r = new Rect();
paint.setColor(0x80808080); // translucent gray
r.right = iDisplayWidth-1;
r.left = 0;
r.top = iDisplayHeight/2;
r.bottom = iDisplayHeight-1;
canvas.drawRect(r, paint); // fill with gray
Related
I am working on an android project where I have a custom view. When the custom view is clicked, I want a to put a view (a circle) at each corner of the view.
At the moment I'm just trying to get it work in the top left corner but it ends up in the middle.
Below is my click function for adding the view.
View view = LayoutInflater.from(getContext()).inflate(R.layout.view, this, false);
TextView textItem = view.findViewById(R.id.lblItemText);
textItem.setText("View: " + counter);
view.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
Anchor anchor1 = new Anchor(getContext());
anchor1.setLeft(v.getLeft());
anchor1.setTop(CustomView.this.getTop());
CustomView.this.addView(anchor1);
}
});
The custom view is hosted inside a relative layout. The custom view extends RelativeLayout and the anchor view which is supposed to go into the top left corner of the custom view extends button.
The anchor constructor contains the following:
public Anchor(Context context)
{
super(context);
this.setBackgroundResource(R.drawable.anchor);
this.setPadding(0,0,0,0);
this.setWidth(1);
this.setHeight(1);
}
For some reason the anchor is appearing in the middle instead of being on the corner as shown below
Below is kind of expecting.
UPDATE
After a couple of days made some progress and I do have it working, except its using hardcoded values to get it in the right position, which doesn't seem right. I'm guessing this will only work on the specific device I'm testing on, another device with another resolution will be positioned wrong.
Below is the code I have that hopefully shows what is I am trying to achieve along with a screenshot as to what I have now.
private void createAnchorPoints()
{
//Main View
ViewGroup mainView = activity.findViewById(android.R.id.content);
int[] viewToBeResizedLoc = new int[2];
viewToBeResized.getLocationOnScreen(viewToBeResizedLoc);
//Add top left anchor
Anchor topLeftAnchor = new Anchor(context, Anchor.ResizeMode.TOP_LEFT);
FrameLayout.LayoutParams topLeftParms = new FrameLayout.LayoutParams(150,150);
topLeftParms.leftMargin = viewToBeResizedLoc[0] - 50;
topLeftParms.topMargin = viewToBeResizedLoc[1] - viewToBeResized.getHeight() - 30;
topLeftAnchor.setLayoutParams(topLeftParms);
mainView.addView(topLeftAnchor);
//Add top right anchor
Anchor topRightAnchor = new Anchor(context, Anchor.ResizeMode.TOP_RIGHT);
FrameLayout.LayoutParams topRightParms = new FrameLayout.LayoutParams(150, 150);
topRightParms.leftMargin = topLeftParms.leftMargin + viewToBeResized.getWidth() - 40;
topRightParms.topMargin = topLeftParms.topMargin;
topRightAnchor.setLayoutParams(topRightParms);
mainView.addView(topRightAnchor);
//Add bottom left anchor
Anchor bottomLeftAnchor = new Anchor(context, Anchor.ResizeMode.BOTTOM_LEFT);
FrameLayout.LayoutParams bottomLeftParms = new FrameLayout.LayoutParams(150, 150);
bottomLeftParms.leftMargin = topLeftParms.leftMargin;
bottomLeftParms.topMargin = topLeftParms.topMargin + viewToBeResized.getHeight() - 40;
bottomLeftAnchor.setLayoutParams(bottomLeftParms);
mainView.addView(bottomLeftAnchor);
//Add bottom right anchor
Anchor bottomRightAnchor = new Anchor(context, Anchor.ResizeMode.BOTTOM_RIGHT);
FrameLayout.LayoutParams bottomRightParms = new FrameLayout.LayoutParams(150, 150);
bottomRightParms.leftMargin = topRightParms.leftMargin;
bottomRightParms.topMargin = bottomLeftParms.topMargin;
bottomRightAnchor.setLayoutParams(bottomRightParms);
mainView.addView(bottomRightAnchor);
}
Since the top-level layout is a RelativeLayout, you will need to use the view positioning that is available to RelativeLayout to achieve what you want. (See the documentation.)
Here is a mock-up of what you want to achieve in XML. This mock-up will demonstrate how we can approach the actual solution. I am using standard views, but it shouldn't matter. The technique will apply to your custom views. The image is from Android Studio's designer, so no code was used to create the image.
activity_main.xml
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/customView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="#android:color/holo_green_light" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignStart="#id/customView"
android:layout_alignTop="#id/customView"
android:src="#drawable/circle"
android:translationX="-10dp"
android:translationY="-10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignEnd="#id/customView"
android:layout_alignTop="#id/customView"
android:src="#drawable/circle"
android:translationX="10dp"
android:translationY="-10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignBottom="#id/customView"
android:layout_alignStart="#id/customView"
android:src="#drawable/circle"
android:translationX="-10dp"
android:translationY="10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignBottom="#id/customView"
android:layout_alignEnd="#id/customView"
android:src="#drawable/circle"
android:translationX="10dp"
android:translationY="10dp" />
</RelativeLayout>
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="#android:color/holo_red_light" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
The Actual Solution
Now that we have demonstrated that the mocked-up approach works, we now have to reproduce the effect in code. We will have to add the circle view and position it within the parent RelativeLayout using RelativeLayout view positioning and translations. The following code shows just the top left circle positioned, but the other circles will be positioned in a similar way.
activity_main.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Drawable circle = ContextCompat.getDrawable(this, R.drawable.circle);
ImageView imageView = new ImageView(this);
imageView.setImageDrawable(circle);
int circleSize = dpToPx(CIRCLE_SIZE_DP);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(circleSize, circleSize);
// Position top left circle within the custom view.
lp.addRule(RelativeLayout.ALIGN_START, R.id.customView);
lp.addRule(RelativeLayout.ALIGN_TOP, R.id.customView);
// Uncomment these 2 lines to position the top left circle with translation.
imageView.setTranslationX(-circleSize / 2);
imageView.setTranslationY(-circleSize / 2);
// Uncomment these 3 lines to position the top left circle with margins.
// View customView = findViewById(R.id.customView);
// lp.leftMargin = customView.getLeft() - circleSize / 2;
// lp.topMargin = customView.getTop() - circleSize / 2;
((RelativeLayout) findViewById(R.id.relativeLayout)).addView(imageView, lp);
}
private int dpToPx(int dp) {
return (int) (dp * getResources().getDisplayMetrics().density);
}
private static final int CIRCLE_SIZE_DP = 20;
}
The code above uses a shortened layout:
activity_main.xml
<RelativeLayout
android:id="#+id/relativeLayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/customView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="#android:color/holo_green_light" />
</RelativeLayout>
It is also possible to produce the same positioning using margins. The code to use margins is commented out but will work. (I think that negative margins may also work, but I have read that they are not officially supported, so I try to avoid them.)
This might look like a very common problem but I can't seem to move a view to the center of the screen.
I have 3 views:
a background image (center crop)
a black/white grid to visualize the center of the screen, for debugging purpose. Also center crop
a square that I want to move to the center, top left corner of the square at the center of the screen.
I first get the screen size in pixels, divide width and height by 2 to get the coordinates of the center. Then move my square view by center.x and center.y
I expect the square to be moves precisely to the center of the screen.
I also scale the square view so its size is always the same relative to the background image.
I want to solve this programmatically (not just centering with layout properties) because it is only a first step, I intend to be able to place the square anywhere I want on the screen. I try to place in the center here because it seems like the easiest thing to do.
The code
public class FullScreenActivity extends AppCompatActivity {
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
);
}
}
}
The class whit the logic
public class AnimalPopupActivity extends FullScreenActivity {
private final String TAG = "AnimalPopup";
ImageView backgroundView;
ImageView square;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animal_popup);
backgroundView = (ImageView)findViewById(R.id.background);
square = (ImageView) findViewById(R.id.square);
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int screenWidthInPixels = metrics.widthPixels;
int screenHeightInPixels = metrics.heightPixels;
Log.i(TAG, "screen width pixels: "+screenWidthInPixels);
Log.i(TAG, "screen height pixels: "+screenHeightInPixels);
Point center = new Point(screenWidthInPixels/2, screenHeightInPixels/2);
Log.i(TAG, "center: "+center);
double ratioH = (double)screenWidthInPixels/100d;
Log.i(TAG, "ratioH: "+ratioH);
double ratioV = (double)screenHeightInPixels/100d;
Log.i(TAG, "ratioV: "+ratioV);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams((int)(10*ratioH), (int)(10*ratioV));
layoutParams.leftMargin = center.x;
layoutParams.topMargin = center.y;
square.setLayoutParams(layoutParams);
}
}
Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.bentaye.app.games.AnimalPopupActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:srcCompat="#drawable/animal_popup_background" />
<ImageView
android:id="#+id/grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:srcCompat="#drawable/animal_popup_grid" />
<ImageView
android:id="#+id/square"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/square" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Here is what I get on a Nexus 5 (1080*1920:420dpi)
With the following logs:
screen width pixels: 1080
screen height pixels: 1794
center: Point(540, 897)
ratioH: 10.8
ratioV: 17.94
Here is what I get on a Nexus 10 (2560*1600:xhdpi)
With the following logs:
screen width pixels: 1600
screen height pixels: 2464
center: Point(800, 1232)
ratioH: 16.0
ratioV: 24.64
The 2 are off by a few pixels, I am not an Android specialist and clearly I am doing something wrong but can't understand what.
Any help welcome. Cheers!
EDIT: I think that it is due the calculation taking the status bar into account. It also explains why the discrepancy is bigger on the Nexus5, as the status bar is bigger relatively to the screen height. And also why the discrepancy only affects the vertical alignment.
I'll come back and post the code once I sort it out.
Assuming the square you want centered is inside the RelativeLayout, add layout_gravity=center
For example:
<ImageView
android:id="#+id/square"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity=center"
app:srcCompat="#drawable/square"/>
Add this Line
android:layout_centerInParent="true"
this line is for RelativeLayout
I have a picture (jpg) that I want to display on the screen.
Additionally the picture should be covered partially by a transparent effect.
The transparent cover should be dynamic. So e.g. each day more of the picture is shown.
Here a picture to show what I mean:
I have the picture without the gray cover and want to add this cover but in different steps.
Can someone give me a hint how to do that.
You can do this simply with widgets:
FrameLayout is the general mechanism for overlaying a view on top of another:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_image"/>
<View
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</FrameLayout>
Then in your Java code you can dynamically set the transparency of your overlay:
View overlay = (View) findViewById(R.id.overlay);
int opacity = 200; // from 0 to 255
overlay.setBackgroundColor(opacity * 0x1000000); // black with a variable alpha
FrameLayout.LayoutParams params =
new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT, 100);
params.gravity = Gravity.BOTTOM;
overlay.setLayoutParams(params);
overlay.invalidate(); // update the view
You can do something like this where the canvas is coming from an onDraw() request:
Paint paint = new Paint();
Rect r = new Rect();
paint.setColor(0x80808080); // translucent gray
r.right = iDisplayWidth-1;
r.left = 0;
r.top = iDisplayHeight/2;
r.bottom = iDisplayHeight-1;
canvas.drawRect(r, paint); // fill with gray
How do you make a progressbar with rounded corner at the right side (the end), not only in the left side (the start). What I currently have is nearly the layout what I want but the progressbar loader is just a straight vertical line, I'd like to get this line rounded.
Basically you should make a custom Widget, so you can cutomize it to your taste.
Here is a tutorial on exactly what you're looking for. link!
So what I ended up doing this in xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white"
android:id="#+id/splash_linear">
<FrameLayout
android:layout_width="144dp"
android:layout_height="13dp"
android:layout_gravity="center"
android:layout_marginTop="20dp">
<View android:id="#+id/progress_horizontal"
android:background="#drawable/progress_background"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View android:id="#+id/progress_horizontal_bar"
android:background="#drawable/progress_bar"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
Then in code:
public void updateProgress(int percent) {
int progressBarSizeDp = 144; // the size of the progressbar
float scale = (float) (progressBarSizeDp/100.0);
int progressSize = (int) (percent * scale);
if(progressSize > progressBarSizeDp) {
progressSize = progressBarSizeDp;
} else if(progressSize < 20) {
progressSize = 20;
}
View progressBar = (View) findViewById(R.id.progress_horizontal_bar);
int py = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, progressSize, getResources().getDisplayMetrics());
LayoutParams params = new FrameLayout.LayoutParams(py, LayoutParams.MATCH_PARENT);
progressBar.setLayoutParams(params);
View splashMain = (View) findViewById(R.id.splash_linear);
splashMain.invalidate();
}
Found a nice link:
Custom progress bar with rounded corners
Basically it uses a custom RelativeLayout and a 9-patch approach to draw the rounded progress bar.
I have two ImageViews inside an AbsoluteLayout.
<AbsoluteLayout android:id="#+id/AbsoluteLayout01"
android:layout_width="fill_parent" android:background="#drawable/whitebackground"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/floorPlanBackgroundImage"
android:src="#drawable/ic_tab_lights_gray"
android:scaleType="center"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
<ImageView android:id="#+id/fpLight"
android:src="#drawable/ic_tab_lights_gray"
android:scaleType="center" android:layout_x="50px" android:layout_y="50px"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</AbsoluteLayout>
the floorPlanBackgroundImage is dynamically set from an image that is 800x600 in size. The can scroll around it.
My second image, fpLight represents a light in a room. It's a small 20x20 image. What I need to do is change the layout_x & layout_y properties in code, but I don't see a way to set that in the ImageView.
I'd expected something like this...
fpLight.setLayoutX("55px");
Is there a way?
You should use:
AbsoluteLayout.LayoutParams param = new AbsoluteLayout.LayoutParams(int width, int height, int x, int y)
layout Parameter object with the preferred x and y and set it to your fpLight image by
fpLight.setLayoutParams(param);
AbsoluteLayout is Deprecated
You should use RelativeLayout instead
EXAMPLE:
Suppose you want a ImageView of size 50x60 on your screen at postion (70x80)
// RelativeLayout. though you can use xml RelativeLayout here too by `findViewById()`
RelativeLayout relativeLayout = new RelativeLayout(this);
// ImageView
ImageView imageView = new ImageView(this);
// Setting layout params to our RelativeLayout
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(50, 60);
// Setting position of our ImageView
layoutParams.leftMargin = 70;
layoutParams.topMargin = 80;
// Finally Adding the imageView to RelativeLayout and its position
relativeLayout.addView(imageView, layoutParams);
yourImageView.setX(floatXcoord);
yourImageView.setY(floatYcoord);