Android fragment views not rendering as required - android

This is my current layout:
I know it is black but my phone was facing down. It is supposed to be a camera preview. Anyway, whatever renders on the small one renders on the big one.
The small camera preview, takes half of the screen's height and 1/4 of screen's width (landscape mode). Now proportionally it should fill the rest of the screen ( the second half) but it doesn't. You can see the problem is that it is not using all the height, there are 2 green lines.
Here is my code:
<LinearLayout 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:orientation="horizontal"
tools:context=".MainPreviewActivity">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1" >
<View
android:id="#+id/center_dummy_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<FrameLayout
android:id="#+id/clean_preview_fragment_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignBottom="#id/center_dummy_view"
android:background="#color/LightGrey"/>
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/listOptionsRecyclerView"
android:layout_alignTop="#id/center_dummy_view"
android:background="#color/LightGrey"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/processed_preview_fragment_container"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="#color/WhiteSmoke"/>
</LinearLayout>
You can see the FrameLayout, #+id/processed_preview_fragment_container has a fill_parent layout_height value.
The fragments view is:
<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"
tools:context="com.apps.foo.bar.fragments.ProcessedPreviewFragment">
<ImageView
android:id="#+id/processed_preview_img_view"
android:background="#color/LimeGreen"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>

try using below code as fragment view since imageview default property to draw image at center so it doesn't scale image according to view height and width. so you need to specify scale type for image. i have used "fitXY" in this image will cover full height and width but image may be stretch so you can change it according to your requirement
<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"
tools:context="com.apps.alexs7.pointop.fragments.ProcessedPreviewFragment">
<ImageView
android:id="#+id/processed_preview_img_view"
android:background="#color/LimeGreen"
android:layout_width="fill_parent"
android:scaleType="fitXY"
android:layout_height="fill_parent" />

Related

scrolling on cardview making gap in android material design

I have this layout to display the images in card view.
<?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:padding="16dp"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cv"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
>
<ImageView
android:id="#+id/thumbnail"
android:layout_width="100dip"
android:layout_height="100dip"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
everything looks perfect when screen loads. But when i scroll on screen it makes a gap between two grids vertically. gap size is equal to screen height. in result only 2 grid can be shown on screen after scroll.
Why this behavior? how to fix this?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="16dp"
>
By the way dont use height match_parent for the root view pf item. It should be wrapContent or some fixed as I can see you ImageViewHeight is 100dp. So adding 16dp padding here,
Use height of LinearLayout as 132 dp.

NetworkImageView to occupy full width of screen

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" />

How to set the percentage in screen of each fragment

I want to design a divided screen into two non equal parts in a landscape mode of screen. So, I thought automatically in using fragments. But the problem that I have encountered is that each fragment match the half of the screen. And that's not what I want exactly. What I want is a screen with two parts non equal in their width. I want something like this:
You can make use of the weight parameter.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
Please notice the weights used for the two LinearLayouts. The first one has a weight of 1 (it can occupy 1/4 th of the screen) and the second one 3 (it can occupy 3/4 th of the screen).
Just use this exact same concept for your fragments and maintain nay proportion as you wish.
Hope I could make myself clear.
Use weight parameter
<LinearLayout android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent">
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
<LinearLayout android:layout_weight="3" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
</LinearLayout>
set Linear layout weight to achieve this...
<?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="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>

android layout image fill width

I need to strech a background image for a layout in my app,
please note, the yellow background in my layout is not streched
how to accomplish this [yellow bar image filling parent]?
also please note that the blue layout is not the whole width of the screen, how to?
code:
<?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"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:id="#+id/myfragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#0000FF">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/titlebar" />
</LinearLayout>
<ListView android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
</LinearLayout>
Thanks a lot!
This is the reason why your linearlayout (blue) is not fitting the whole screenwidth
android:paddingLeft="8dp"
android:paddingRight="8dp"
You need to change this. Put a margin (left and right) for the inner layout instead.
Instead of the image view you could set the background of the 2nd linearlyout directly
android:background="#+id/imageView1"
Incase you want to use the image view instead
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:scaleType="fitXY"
android:src="#drawable/titlebar" />

Using layout_weight with ImageView in LinearLayout

I am trying to place an ImageView in the middle of the screen, with the aim of putting other views above and below it so I have decided to use a LinearLayout (vertical) and a LinearLayout (horizontal). However, when I use layout_weight for the ImageView, the image disappears completely (a blank screen is shown). The ImageView's image is set in onCreate(). I would like the ImageView to take up 50% of the width of the screen, hence my use of weights.
<?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="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="horizontal"
android:layout_weight="2">
<View android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<ImageView android:layout_weight="2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/albumArtImageView"></ImageView>
<View android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
For layout_weight to be useful for anything, there needs to be left-over space. Your first view under the top LinearLayout has layout_height="fill_parent". That takes up all the room. Try setting layout_height="0dp" everywhere that you want the dimension determined by the layout_weight and I think your results will be better.
try to change the orientation of second linearlayout to vertical

Categories

Resources