Develop Reference

Android: how to have a cropped image after ImageView rotation?

I have a problem with an ImageView that I rotate in a RelativeLayout. Here is my problem:
How should I do to obtain what I want ?
Thanks !
My java code:
previewImageView.setRotation(rotAngle);
My xml:
<RelativeLayout
android:id="#+id/previewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.xxxx.SquareImageView
android:id="#+id/previewBackgroundImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/dark_blue_page"
/>
<com.xxxx.TouchImageView
android:id="#+id/previewImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/previewBackgroundImageView"
android:layout_alignTop="#+id/previewBackgroundImageView"
android:layout_alignEnd="#+id/previewBackgroundImageView"
android:layout_alignBottom="#+id/previewBackgroundImageView"
android:layout_margin="50dp"
android:scaleType="centerInside"
/>
</RelativeLayout>

The easiest solution would be to wrap the ImageView in the FrameLayout
Like that:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="50dp"
android:layout_alignStart="#+id/previewBackgroundImageView"
android:layout_alignTop="#+id/previewBackgroundImageView"
android:layout_alignEnd="#+id/previewBackgroundImageView"
android:layout_alignBottom="#+id/previewBackgroundImageView"
android:layout_alignLeft="#+id/previewBackgroundImageView"
android:layout_alignRight="#+id/previewBackgroundImageView" >
<com.xxxx.TouchImageView
android:id="#+id/previewImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside" />
</FrameLayout>
That way the FrameLayout would clip any part of its child views that is beyond the FrameLayout boundaries. That is based on the view attribute android:clipChildren that have a default value of true
Drawbacks: That brings more layouts nesting to the project that could potentially harm the performance of the application. But that one FrameLayout alone would not do any harm by itself.

how to have drawable image filled the entire screen in a ListView in Android?

Hi guys I want to have an image that I got from the Vector Asset tab to filled the entire screen on my GridView items. Currently,it looks like this at the moment. I want to have all my TextViews and ImageView to be inside of this if possible.
Here is the necessary code
This is the XML layout that my GridView currently adapts and inflate with. Look at the top part of the code to save time to see the --> android:background="#drawable/ic_folder_white_24dp">
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_folder_white_24dp">
<!-- android:background="#drawable/text_view_border">-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:id="#+id/check_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/date_created"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="15sp"
android:gravity="center" />
</LinearLayout>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textColor="#color/black"
android:gravity="center"/>
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:padding="8dp"
android:textColor="#color/black"
android:layout_height="250dp" />
<ImageView
android:id="#+id/psw_lock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_lock_black_24dp"
android:layout_gravity="end"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:visibility="invisible"
/>
</LinearLayout>
Here is my GridView code in my mainActivity.xml though I don't think its revelant
<GridView
android:id="#+id/grid_view"
android:layout_below="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:numColumns="2">
</GridView>
Lastly here is my drawable image itself. I try messing with the values though nothing points to the right direction. By default it got me 24dp.
<vector android:height="24dp" android:tint="#FFDF00"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M10,4H4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V8c0,-1.1 -0.9,-2 -2,-2h-8l-2,-2z"/>
</vector>
Any help would be appreciative.

If you mean you want a folder on each grid item, with all the other views inside it, you'll need to set some padding on the item's layout or margins on its views, so they don't overlap the edges. Whatever works to fit the image!
If you mean you want one big folder as the entire background, you'll need to set that as the background to the GridView area in your activity's layout file. So it's the background of the whole grid container, not separate backgrounds for each item.
Also I don't think you can avoid the background being stretched to fit the view, so you'll probably need to add an ImageView with scaleType="fitCenter" or something (and you won't be able to use a LinearLayout to overlay something on that image)

Problem with relative layouts: anchored elements at the top right

I'm trying to create an android application but I'm a beginner, especially with the XML. I don't know why, if I put Relative layout and move the widgets they remain anchored at the top left. does anyone know why?
ps I would like to work on the window design not on the code. Anyway I leave you the code in case there is something wrong
<?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"
tools:context=".Tentativo">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</RelativeLayout>

You are facing this problem because you are using the wrong attributes. The attributes you are using are meant for Constraint Layout and not Relative layout.
For Example: in case of TextView instead of using app:layout_constraintRight_toRightOf="parent" try using android:layout_alignParentRight="true"
Also, I would like to recommend you to use Constraint Layout instead of Relative as is much better and easier to use. example: To center a view in a RelativeLayout you would write centerInParent=true. Constraint Layout instead allows centering in-between views and the parent.

relative layout works great with nested sibling Containers, just add a container, and add the Widgets inside the container, my favorite one to use when Relative Layout is the parent is the Linear Layout, it makes the UI much cleaner and uses weights which is great for supporting different screen ratios. Here is a sample Example for your case (also you can remove all the constraints in the widget since their parent is no longer the relative layout) :
<?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">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="2"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_weight="1"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</LinearLayout>
</RelativeLayout>

Modal Bottom sheet with FAB

I have implemented persistent bottom sheet with FAB anchored to the top of it.
When I try to do the same with modal bottom sheet (extends BottomSheetDialogFragment) it says
java.lang.IllegalStateException: Could not find CoordinatorLayout descendant view to anchor view android.support.design.widget.FloatingActionButton
Is it possible to do the same layout with modal bottom sheet or maybe make a shadow and unclickable area above persistent one?

I was trying to do the same "FAB on top" thing in ModalBottomSheet, but there's no direct method/way to do that.
For such cases, we therefore use FrameLayout. Inside the definition, it says that -
Child views are drawn in a stack, with the most recently added child on top.
So we can create a layout for the ModalBottomSheet (extends BottomSheetDialogFragment), which would look something like this in your case -
<FrameLayout
android:id="#+id/parent_frame_layout"
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="wrap_content"
android:orientation="vertical"
tools:context=".ModalBottomSheetFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:orientation="vertical">
<!-- Whatever layout you want to give here. This is going to be the body
of the ModalBottomSheet. Also you might not wanna use the current Linear
Layout too.-->
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/icon_sheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_gravity="center|top"
android:src="#drawable/ic_music"
android:elevation="20dp"/>
</FrameLayout>
Notice that -
FAB is made after LinearLayout (body for the BottomSheet), as it would be stacked over the LinearLayout.
We gave a marginTop=25dp for LinearLayout but we gave marginTop=0dp for the FAB. This is how you create the half-out, half-in effect. And also gave elevation on FAB for better float look.
Finally we can inflate it's view inside the onCreateDialog overridden method and perform all necessary actions thereafter.
Hope I was able to answer your question. Do comment for any further doubts/updates.

Adding to #Krishn Agarwal answer we need to make sure the bottom sheet dialog has a transparent theme then only the same look and feel will be achieved. We can even have a Constraint Layout instead of a Linear Layout. We can use BottomSheetDialog/BottomSheetDialogFragment
<?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:id="#+id/parent_frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_success_dialog"
style="#style/AppModalStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin_60"
android:paddingStart="#dimen/dimen_25"
android:paddingEnd="#dimen/dimen_25"
android:paddingBottom="#dimen/dimen_25">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_title_text"
style="#style/style_bottomsheet_header_22sp"
android:gravity="center"
android:layout_marginTop="80dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/mf_mandate_creationsuccessful" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_description"
style="#style/open_sans_semi_bold_15sp_gray"
android:layout_marginTop="#dimen/dimen_7"
android:layout_marginBottom="#dimen/margin_25"
app:layout_constraintBottom_toTopOf="#+id/go_to_dashboard_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_title_text"
tools:text="Description" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/go_to_dashboard_btn"
style="#style/mf_style_blue_button"
android:layout_width="0dp"
android:elevation="#dimen/margin_5"
android:text="#string/mf_go_to_dashboard"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_description"
tools:targetApi="lollipop" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_tick_icon"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_gravity="center|top"
android:layout_marginTop="0dp"
android:importantForAccessibility="no"
android:visibility="visible"
app:backgroundTint="#color/very_light_green"
app:elevation="#dimen/margin_20"
app:fabCustomSize="128dp"
app:maxImageSize="128dp"
app:srcCompat="#drawable/ic_success_tick"
app:tint="#null" />
</FrameLayout>

How to make a fill parent+wrap_content (in that order) Android

I'll try to simplify the problem for avoiding long code pieces: I want to do something like that in my layout
The structure should be easy with something like:
LinearLayoutA (vertical)
LinearLayoutB (vertical)
LinearLayoutC (horizontal)
LinearLayoutC' (horizontal)
LinearLayoutB' (vertical)
LinearLayoutC'' (horizontal)
LinearLayoutC''' (horizontal)
All with weight=1
the problem for me is define what to put within the LinearLayoutC. So focusing now the elements inside LinearLayoutC:
My first option was another LinearLayout (vertical) the problem is that if the image is taller than the LinearLayoutC the TextView is not visible.
So I used that RelativeLayout:
<RelativeLayout
android:id="#+id/RelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Eiffel"
android:textSize="45sp"
android:id="#+id/text"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
></TextView>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/eiffel2"
android:id="#+id/image"
android:layout_above="#id/text"
android:layout_centerHorizontal="true"></ImageView>
</RelativeLayout>
Nice it works! But not for long =(. (We will call it from now RelativeLayout1) When the screen is smaller than the views the layout seems perfect but when going into a larger screen the block is aligned to the bottom of the parent and I'd like it to be centered in the screen (or the sublayout). Like shows that screen:
That is because of the android:layout_alignParentBottom="true" at the TextView.
Trying to solve that I used a RelativeLayout2 for wrap the RelativeLayout1 with a code like:
<RelativeLayout2
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout1
android:layout_centerInParent="true"
.....
></RelativeLayout1>
</RelativeLayout2>
But even with that the layout RelativeLayout1 still aligned to the bottom of the image (and filling all the screen vertically as it had a height= fill_parent and I don't understand why is that happening and how can I solve it. Please can you help me? I've tried for hours. Thanks in advance

Add
android:adjustViewBounds="true" in your ImageView

remove the android:layout_alignParentBottom="true" from the textview and add this to your root relativelayout tag android:layout_centerInParent="true"

I had debug your code .. try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center_vertical" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/eiffel2"
android:id="#+id/image"
android:layout_centerHorizontal = "true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Eiffel"
android:textSize="45sp"
android:id="#+id/text"
android:layout_below = "#+id/image"
android:layout_centerHorizontal = "true"
/>
</RelativeLayout>

use android:layout_height="wrap_content" for your second RelativeLayout

set
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
in the ImageView and the TextView, and then use a LinearLayout (with gravity= center) as container and it work

Have you considered using TableLayout? It is best suited for grid like views such as this one. You can even specify weights for different columns, etc. and have different column widths.