I want to make a view in which one image view, say iv_up should be placed above the another image view, say iv_down.
The iv_up should be slighty transparent. One more thing, the iv_down happens to be an QR Code.
Is there any way to implement this?
Below is the code that I have written so far:
<?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"
android:gravity="center">
<ImageView
android:id="#+id/iv_down"
android:layout_width="419dp"
android:layout_height="419dp"
android:layout_centerInParent="true"
android:contentDescription="QR CODE"
tools:srcCompat="#tools:sample/avatars"/>
<ImageView
android:id="#+id/iv_up"
android:layout_width="419dp"
android:layout_height="419dp"
android:layout_centerInParent="true"
android:contentDescription="QR CODE"
tools:srcCompat="#tools:sample/avatars"/>
</RelativeLayout>
So take a look at this sample XML I have created:
<?xml version="1.0" encoding="utf-8"?>
<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">
<ImageView
android:id="#+id/iv_down"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:contentDescription="QR CODE"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<ImageView
android:id="#+id/iv_up"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:contentDescription="QR CODE"
app:layout_constraintStart_toStartOf="#id/iv_down"
app:layout_constraintTop_toTopOf="#id/iv_down"
tools:srcCompat="#tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>
This will create a UI where the iv_up appears on top of the iv_down. Using the ConstraintLayout you can position views relative to one another with ease - it is the "better version" of the RelativeLayout. So here we set the iv_down to be in the top left corner of the view, and iv_up to be 50dp from the top and start of the iv_down view. Since the views are ordered as such in the XML, the iv_up will always sit on top of the iv_down due to its Z positioning. You can change this by setting specific values for the android:translationZ attribute.
Simply setting the android:alpha="0.5" attribute on the iv_up view, will cause the view to be 50% transparent. You can play with this float value from 0-1 to get the desired look for the transparency. Changing the margins on iv_up will also change how far the view moves from the top left corner i.e. how much of the views overlap!
Related
I'm working on Android app with custom camera module. Main purpose of custom camera module is in adding overlay to camera - it should be something like outer transparent border (see first attached pic). It's actually blurred in the attached picture, but I need at least transparent effect as blur is not trivial to implement on Android.
The main point here is to ensure that "clear" visible area is corresponding to A4 format, so height divided by width should be √2 (main purpose of the app is in taking photos of A4 sheets).
I've figured how to achieve "inverted" effect - see second picture. But I can't get my head around on how could setup the view for the desired effect - first picture. Could someone share their thoughts on the problem? Here is the code:
camera.xml:
<LinearLayout
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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="#+id/overlay"
android:layout_width="316dp"
android:layout_height="446dp"
android:layout_centerInParent="true"
android:background="#drawable/overlay"
android:duplicateParentState="false" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:background="#android:color/black">
<Button
android:id="#+id/button_capture"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/capture_button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<Button
android:id="#+id/button_close"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerVertical="true"
android:layout_marginEnd="50dp"
android:layout_marginRight="50dp"
android:layout_toLeftOf="#+id/button_capture"
android:background="#drawable/close" />
</RelativeLayout>
</LinearLayout>
overlay.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<solid android:color="#88ffffff" />
I've found an article about just like what I needed. With little effort I could adjust the code there to get desired effect: https://blog.budiharso.info/2016/01/09/Create-hole-in-android-view/
To avoid tricky vector masks, it's enough to define the id/overlay as layout with 4 semitransparent rectangles, sharing the same drawable you use now: top, bottom, left, and right. You can determine the dimensions of each rectangle at runtime, but if you like intellectual challenges, you can define them as a ConstraintLayout.
I'm trying to make a trimmerbar to my video player
trimmer_bar.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/thumbsBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
tools:background="#color/trimmerBarSelected">
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription=""
android:scaleType="fitStart"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:contentDescription=""
android:scaleType="fitEnd"
android:src="#drawable/ic_right_thumb" />
</RelativeLayout>
<ImageView
android:id="#+id/progressIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="60dp"
android:layout_marginTop="3dp"
android:contentDescription=""
android:scaleType="centerCrop"
android:src="#android:drawable/btn_star_big_on" />
</FrameLayout>
activity_video_viewer:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#a8c71c"
tools:context=".activities.VideoTrimmerActivity">
<com.tomatedigital.instagram.longstories.ui.TrimmerBar
android:id="#+id/trimmerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/trimmerBarSelected"
/>
</FrameLayout>
it's logic is working great: when the user touches, i detect if it was on the any of the thumbs and case on the left thumb I adjust the left margin of the thumbsBar, case on the right I adjust the right margin...
As the two imageview are aligned to the edges this behavior makes them to move... but what is actually moving is the whole RelativeLayout
The problem is even adjuting the margins and moving the imageviews the relative layout is still showing the background in the margin area
ignoring the whole calculation i set the margins using:
this.thumbsBar= (RelativeLayout) findViewById(R.id.thumbsBar);
this.thumbsBarLayout = (LayoutParams) this.thumbsBar.getLayoutParams();
this.thumbsBarLayout.leftMargin = this.leftMargin;
this.thumbsBarLayout.rightMargin = this.rightMargin;
this.thumbsBar.setLayoutParams(this.thumbsBarLayout);
===============================================================
UPDATE:
to make it easier to understand
I've this:
I should have:
com.tomatedigital.instagram.longstories.ui.TrimmerBar has the same background as your RelativeLayout and has a width of match_parent. You don't really specify how your layout is being loaded and I assume it is in your custom view.
For a test, change the color of the background of the custom view to see if the background you are seeing in the margins is coming from the RelativeLayout or the custom view. My guess is that it's coming from the custom view and changing the background color in the custom view will solve your problem.
I have a dialog fragment that contains linear layout that involves a titleText above a RecyclerView, and at the very bottom, there's a button below the recyclerView.
Since a recyclerView expands or collapses based on the number of items the adapter sets, the button sometimes gets truncated and no longer appears to be on screen, since the recyclerView just covers the entire screen.
My question is, is there a way to set the maximum height of the recyclerView without ever hiding the button underneath. I also don't want to just give the view a random height just in case the recyclerView contains no items, and it would just be a blank section.
Please let me know if you've ever run into this issue, and how you resolved this. Thanks!
UPDATED
You can achieve this easily using layout weights. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="21sp"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Submit"/>
</FrameLayout>
The Title and RecyclerView will wrap content according to contents and button will always take up bottom place.
I suggest using RelativeLayout as it handles the positioning of views for cases like yours, so that you can actually focus on main design.
<?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">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Some title" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/title"
android:layout_above="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</RelativeLayout>
Above XML code is the skeleton code for what you need. you can add margins and dimensions to control the spacing. But in any case (until you provide negative margins) your views will never overlap each other.
Main trick of using RelativeLayout is the ability to use XML tags like
android:layout_below or android:layout_above or android:layout_start
or android:layout_end which perfectly aligns your view the way you
want.
I want to set the logo of my app to the bottom left hand side of the screen and be in the background. the reason i want to do this is to allow the users to modify the background colors which would not be possible if i simply set the entire activity or layout background to an image to give same impression.
Another way of asking this is how do i set an image to bottom left hand corner and below other controls?
i don't know if i understand correct. but what you ask is pretty simple.
<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="#bbbbbb"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|left"
android:layout_margin="10dp"
android:src="#ffff00" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:orientation="vertical">
<!-- Put your views here -->
</LinearLayout>
</FrameLayout>
you can change the frame layout's background as you wish and keep logo on bottom left corner.
Also you can set your LinearLayout (which you can use any layout. it is up to you) background to transparent so you will see background. and any extra view inside the linear layout (your view container) will be on top always.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_desired_full_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_logo"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.
How would you do this?
Edit:
In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.
Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/banner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="25dp"
android:src="#drawable/banner" />
<ImageView
android:id="#+id/avatar1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:src="#drawable/horse" />
<ImageView
android:id="#+id/avatar2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:layout_toRightOf="#id/avatar1"
android:src="#drawable/horse" />
</RelativeLayout>
If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.
Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.
<?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="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
</LinearLayout>