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

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.

Related

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)

Android, center image on a specific point

I have an image that I am placing inside of a FrameLayout inside my top level RelativeLayout. I need this image to be centered a bit above the center of the FrameLayout, but I am having a hard time finding info on how to do this. I can provide any other info as needed and I'm open to doing this another way if there is a better one. Thanks
You can use a combination of these attributes to push your ImageView up slightly from the center of your FrameLayout
android:layout_marginBottom="20dp"
android:layout_gravity="center"
Here is a full example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#000">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="20dp"
android:layout_gravity="center"
android:background="#ccc"/>
</FrameLayout>
</RelativeLayout>
Which will appear as such:

How to center a TextView on the parent ImageView?

I've tried several ways of doing this and failed each time.
What I want to acomplish is centering TextView (horizontally and vertically) on ImageView, but instead command android:layout_centerInParent="true" results in vertical and horizontal centering on the whole area, not on ImageView. Please help me with attaching parent to TextView or other way of solving this.
Here is my xml code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
It can be easily acheived using ConstraintLayout. Android recently introduced ConstraintLayout. It allows us to lay out child views using ‘constraints’ to define position based relationships between different views found in our layout. It is similar to RelativeLayout, but much more powerful than it because, ConstraintLayout reduces View Hierarchy to a greater extent. Now getting back to your question, Here is the sample xml code which does the work for you
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Image"
android:textSize="20sp"
app:layout_constraintRight_toRightOf="#+id/image"
app:layout_constraintLeft_toLeftOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"
app:layout_constraintBottom_toBottomOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Output View on Device
You can position the TextView anywhere on the ImageView using app:layout_constraintHorizontal_bias and app:layout_constraintVertical_bias. By default these values will be set to 0.5. So, it will be center aligned by default , if we don't specify any values.
When you add a constraint to both sides of a view (and the view size
for the same dimension is either "fixed" or "wrap content"), the view
becomes centered between the two anchor points by default.
Note: Bias attribute only works if you specify the constraints for the boundaries (e.g. top and bottom for vertical bias, left and right for horizontal bias)
More about ConstraintLayout
ConstraintLayout
Sample Project
Blog on ConstraintLayout
Try this way,hope this will help you to solve your problem.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
</FrameLayout>
Perhaps this would help you with your question
Android TextView text won't center
A person here mentions using android:gravity="center".
Here's what I would do
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_centerHorizontal="false"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
What you need to do is use FrameLayout.The doc says:
FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
So you need something like following psuedo layout code:
<FrameLayout>
<ImageView gravity="center">
<TextView gravity="center">
</FrameLayout>
Add one more relative layout under your layout like this :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Check for width and height you want. Eg. If you want specific height and width for image, change height and width of this relative layout.
Thats it...

Android: Using 2 layouts in one layout

I have some FrameLayout to display overlapping images. Under this FrameLayout I want to display a standard button for some click-action.
To make my work easier, I thought, I can put a new Linear, or Relative, Layout under the FrameLayout - surely all in one LinearLayout.
But this method isn't working for me.
What is the best way to show my button under a whole FrameLayout without putting it in the Layout and managing his position programmaticaly?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left" >
<ImageView
android:id="#+id/coverimg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:maxHeight="100dp"
android:minHeight="130dp"
android:minWidth="130dp"
android:src="#drawable/cover_img" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:src="#android:drawable/ic_media_play" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</LinearLayout>
</LinearLayout>
first to say:
your orientation of the first LinearLayout is wrong. You should use vertical instead of horizontel, cause it would show the button right of your images and not below.
second:
no nead to wrap the button into another LinearLayout, cause it's a sinlge item and attached to your first LinearLayout.
third:
to set the button on another 'place', give your top LinearLayout an ID like 'android:id="#+id/myLinear"' and then use following code:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
LayoutParams lp = new LinearLayout.LayoutParams(Gravity.CENTER);
myLinear.setLayoutParams(lp);
maybe this will work to:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
myLinear.setLayoutParams(new LinearLayout.LayoutParams(Gravity.CENTER));
Hope i could help you?
First you change Linear layout orientation to vertical, and second no need to use another
layout u can put button directly
Ex: android:orientation="vertical"

RelativeLayout in couple devices

I am using RelativeLayout for put a textview on image for example, the problem that it is change the place on the screen for every device that i try(in the simulator).
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
android:layout_marginTop="-70dp" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str_phone"
android:textColor="#color/black"
android:layout_marginTop="337dp" android:layout_marginLeft="133dp"
android:onClick="onClick"
android:clickable="true"/>
</RelativeLayout>
You would like to put a TextView directly on ImageView? Like in this example http://developer.android.com/resources/articles/layout-tricks-merge.html? If yes try FrameLayout instead of RelativeLayout.
You can make the image a background of your relative layout, then just use a textview

Categories

Resources