I have a RecyclerView which contains many images. When an image is long clicked, I unhide an RelativeView (via setVisibility(View.VISIBLE)) to display a "preview" of the image in an ImageView until the long click is released at which point I hide the preview again. Currently, this is working as expected except that the preview always gets shown in the same spot on the screen.
Is there a way to anchor the preview to the position that the user clicked on? Ideally I'd like to have the bottom corner be aligned with the position at which the user is long clicking(or at least the bottom edge). This is what my preview looks like currently:
This is the RecyclerView and preview container layout:
<?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">
<!-- Recyclerview -->
<com.sometimestwo.moxie.MultiClickRecyclerView
android:id="#+id/recycler_zoomie_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Preview container that gets hidden/unhidden-->
<RelativeLayout
android:id="#+id/hover_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:visibility="gone">
<TextView
android:id="#+id/hover_view_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBgBlackTint"
android:gravity="center"
android:textColor="#color/colorWhite"
android:visibility="visible" />
<ImageView
android:id="#+id/hover_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/hover_view_title"
android:background="#color/colorBgBlackTint"
android:visibility="visible" />
</RelativeLayout>
</FrameLayout>
You can use the PopupWindow. In that you can set a particular view as anchor to show a window and inside the window you can show your preview.
Related
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!
Quick background: I have a portion of my activity in a relative layout. I did this on purpose because I wanted a button directly below a listview. I want the button to move down as the listview expands which is why I set it up this way. I've set the height of the listview to wrap content, this way in the relative layout, the button will move down as the list expands.
Issue: Once the list gets big enough such that the content fills up the screen, the button remains below the list (which is fine) but I can't scroll down the list to reveal the button. The button "disappears" below the list. How can I make it so that I can scroll on the list/screen to reveal my button?
Edit: I do want the button to go off screen, I just want to be able to scroll down to see it again.
Sample code below + images:
3 pics, one showing the intial layout, next you can see the button moves as my list expands, 3rd, eventually the button reaches the bottom and I can't scroll more to click it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/workoutList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/logExerciseButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/workoutList"
android:text="#string/log_set" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/workoutList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/logExerciseButton" />
<Button
android:id="#+id/logExerciseButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/log_set" />
</RelativeLayout>
wrap your ListView with ScrollView:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/workoutList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
<Button
android:id="#+id/logExerciseButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/scrollView"
android:text="#string/log_set" />
</RelativeLayout>
Adding the button as a footer to the listview resulted in the desired behavior: https://www.tutorialspoint.com/how-to-add-footer-in-android-listview
The main layout for an app I'm writing is on RelativeLayout with a LinearLayout and a FrameLayout inside. In the LinearLayout, there's the buttons and text and stuff the user actually interacts with. Inside the FrameLayout, there's a graphic. The FrameLayout stays in the bottom-right corner and the LinearLayout is at the top.
When displayed on most different size screens, this layout works great. However, there is one device whose screen is too small and just an annoying little bit of this graphic shows. Is there a way to automatically disable an object if there isn't enough room for it in the XML? I know I could programmatically calculate it, but I'm wondering if there's a better way
Here's a the relevant parts of my layout file:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/buttonLayout">
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#id/buttonLayout">
<ImageView
android:layout_width="139dp"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</FrameLayout>
</RelativeLayout>
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 am using fragments to display an image using ImageView, and ScrollView below the image view having some text using TextView in a RelativeLayout. Now the problem is that as seen in the image here there's a space created between the image and the scroll view when ever the navigation bar is enabled.
By enabling show layout bounds in the developer options, it's the image view creating the white space as seen here. There's no such space when viewed in the graphical layout on Eclipse.
Here's my xml of the fragment
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
android:src="#drawable/city_image" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:clipToPadding="false"
android:fitsSystemWindows="true" >
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:padding="16dp"
android:text="#string/fragment_main" />
</ScrollView>
</RelativeLayout>
I am new to Android and I apologize if I am making a silly mistake. I have tried to change scroll view's gravity to top and also played with layout_height. But still can't figure out what is wrong in my xml.