I have a grid implementation of the recyclerview using the Autofit grid as detailed here:
http://blog.sqisland.com/2014/12/recyclerview-autofit-grid.html
However, my grid items are not squares (they are rectangles) despite fixing the grid item size. Is there a way to make the items square (as in actual GridView) while maintaining the autofit property
item_grid_image.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/image_wrapper"
android:layout_width="140dp"
android:layout_height="140dp"
android:padding="1dp"
android:layout_centerInParent="true">
<com.makeramen.roundedimageview.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
tools:src="#drawable/file_directory" />
</FrameLayout>
fragment_recyclerview.xml
<?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:id="#+id/grid_view_wrapper"
android:layout_marginStart="#dimen/default_margin"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.project.AutoFitRecyclerView
android:id="#+id/grid_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/count_text_view"
android:layout_alignParentTop="true"
android:columnWidth="140dp"
android:layout_centerInParent="true"
android:requiresFadingEdge="vertical"
tools:listitem="#layout/item_grid_image">
</com.project.AutoFitRecyclerView>
</RelativeLayout>
So the reason for this is that it is very rare that your RecyclerView would have a width that is divisible by your columnWidth property. That means that your actual column width will almost always be larger than 140dp while the cell height will always be 140dp.
To fix this, you need to make your image match the column width and make the height match the width. One way to accomplish this would be to use a SquareFrameLayout:
<com.project.SquareFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/image_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
tools:src="#drawable/file_directory" />
</com.project.SquareFrameLayout>
Related
So I have been trying every mix and match with different layouts and settings and still cant figure out how to make this work. I want to have a spinner on the Same Screen as an MPAndroid Line Chart, I know I can fix the height Manually and adjust it to fit properly, but fill parent or match parent does not account for the spinner and just pushes it off the screen! If I load the application on my phone with height of 290dp Great fits perfectly! Load it on the 7" tablet not so pretty... Half the screen is empty. How do I contain the Chart to fill a layout that accounts for spinner? Wrap Content on the chart makes it unusable.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".history"
android:background="#303030">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner4"
android:entries="#array/list3"
android:popupBackground="#303030"
android:layout_centerHorizontal="true" />
</LinearLayout>
Try using this I have removed some attributes which were missing at my end. This is where spinner is on top and rest is filled with line chart.
<?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:background="#303030"
android:orientation="vertical">
<Spinner
android:id="#+id/spinner4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:popupBackground="#303030" />
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_below="#+id/spinner4"
android:layout_height="fill_parent" />
</RelativeLayout>
Try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".history"
android:background="#303030">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="70">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<Spinner
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="30"
android:id="#+id/spinner4"
android:entries="#array/list3"
android:popupBackground="#303030"
android:layout_centerHorizontal="true" />
</LinearLayout>
Because of using weight, on any screen "map and spinner" will look like in same screen height ratio.
I am using com.android.volley.toolbox.NetworkImageView.
Image is coming from url.
I want to display image so that its width to occupy full width of screen not height because below image there is a caption which is a Textview.
Here is the activity's xml
<?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="fill_parent"
android:layout_height="fill_parent"
android:background="#color/black"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Here is the items xml.
<?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="match_parent"
android:gravity="center" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:src="#drawable/button_register" />
<TextView
android:id="#+id/caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/photo_image"
android:layout_marginLeft="15dp"
android:text="Check"
android:textColor="#color/white" />
</RelativeLayout>
From the backend the image size is 300 X 200 pixels.
How to set imageview so that it can occupy full width of the screen.
Can anyone help?
NetworkImageView extends ImageView so you should be able to use everything that works with ImageView.
So, if you want your image to occupy full width and adjust its height so it maintains its aspect ratio (at least that's what I understood you wanted to do) use the adjustViewBounds property
Your xml will look like this:
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:src="#drawable/button_register"
<!-- add adjustViewBounds -->
android:adjustViewBounds="true" />
I am making a video player and previewing the video's thumbnails in gridview. Is there any way to make the thumbnails fill the gridview completely, by perhaps zooming in the image till both sides are >= grid size. Something like CSS background-size: cover, if that makes things clear
Activity Layout:
<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"
tools:context=".MainActivity">
<GridView
android:id="#+id/videos_grid"
android:numColumns="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</GridView>
</RelativeLayout>
Grid Item Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="384dp"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/video_item_thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/video_thumbnail"
android:background="#drawable/video_item_background"/>
<TextView
android:id="#+id/video_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="20sp"
android:textColor="#android:color/white"
android:padding="5dp" />
</RelativeLayout>
android:scaleType
<ImageView
...
android:scaleType="centerCrop" />
This makes the smaller edge of drawable == ImageView's size while keeping the aspect ratio
On landscape mode my background image stretches, I would like the image to enlarge rather than stretch to fit the size. From what I've seen I have to add it to it's own layout (E.g. LinearLayout) or 'ImageView` and the have a layout for the content on the view, am I correct in saying this?
My current xml layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/photo_background"
android:tag="layout" >
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadingEdge="none" >
<include layout="#layout/instructions_internal" />
</ScrollView>
Which includes the following layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/instructionsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent_black" >
<RelativeLayout
android:id="#+id/more_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<WebView
android:id="#+id/top_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
<Button
android:id="#+id/test"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#+id/top_content"
android:layout_marginBottom="10dp"
android:layout_centerHorizontal="true"
android:onClick="onClickHandler" />
<Button
android:id="#+id/instructionsbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/test"
android:background="#color/dark_gray"
android:drawableLeft="#drawable/arrow_down_float"
android:gravity="left|center"
android:onClick="onMoreInstructions"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="#string/more_instructions_start"
android:textColor="#color/solid_white" />
</RelativeLayout>
<WebView
android:id="#+id/bottom_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/more_info"
android:layout_marginTop="10dp" />
</RelativeLayout>
Any guidance on this would be gladly appreciated. Thanks
Yes you're correct. View's background scaling type is equivalent to ImageView's ScaleType.FIT_XY It will mess up the aspect ratio unless you're using wrap_content and the contents do not make it stretch past background bounds.
So in this situation I usually use an ImageView I place behind the view I need to give a properly-scaled background to. (Most likely yo're looking for CENTER_CROP scale type)
UPD here's some code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="layout" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/photo_background"
android:scaleType="centerCrop" />
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadingEdge="none" >
<include layout="#layout/instructions_internal" />
</ScrollView>
</FrameLayout>
use an image that matches or in accordance with the android device resolution and screen size.
the image cannot itself enlarge itself, even if you use a linear layout dedicatedly for the image, the image is bound to stretch.
keep images of all possible resolutions in separate folders that you plan to run you application on.
my code is like below,when the FrameLayout layout_height from
android:layout_height="wrap_content"
to
android:layout_height="120dp"
the layout becomes
i hope the image's height will become 120dp, and keep the scale.
And the width of the layout will be followed by changes , as described wrap_content ,
but it only seems to adapt to the size of the original image .
what can i do?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_thumbnail_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/network_3" />
</FrameLayout>
How about specifying both the layout_width and layout_height to 120dp each? Like below
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_thumbnail_container"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="#color/black" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
</FrameLayout>