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.
Related
How i can remove this white space at the bottom of the screen. I have also tried android:adjustviewbounds and android:scaletype. But still failed to remove the white space at the bottom of the screen. Please help me to optimize my layout so that i can remove that ugly white space from the bottom.
Here is the screenshot below of my layout screen.
Here is my XML code of the layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="wrap_content"
android:layout_width="match_parent"
tools:context="com.example.zohai.v360.Fragments.Home">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="190dp"
android:layout_marginTop="-15dp">
<ImageView
android:id="#+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#drawable/intro"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="190dp"
android:layout_marginTop="-15dp"
>
<ImageView
android:id="#+id/photog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/photographers"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="190dp"
android:layout_marginTop="-14dp">
<ImageView
android:id="#+id/model"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/model_bg"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
In your xml code you have mentioned
android:layout_height="190dp"
Which usually does not help in android:scaletype
Please your constrain layout or linear layout with weight to distribute 3 linear layout to the screen height. Like this,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="-15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="-15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="-15dp">
and then use android:scaletype to fit the LinearLayout
Note : Different screen size matters, I think in your case the screen height is high, which cause the layout to have blank space in bottom. In small size screen it may not be like that. Try doing above will help in all screen size
Your layout's height is set to wrap_content. The whitespace is there because you don't have enough size of the content to fill the screen completely. If you set the height to match_parent you could make the whitespace go away by setting android:background on the root view.
Otherwise you have to find out what you want there. Changing the size of the images is a bad idea because they will look stretched.
And because android is a big platform, you will see that on some devices the whitespace won't be there and on others it will be bigger. Don't set the size of the images to a fixed size.
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" />
Hi I want to draw my ScrollView on whole screen and ScrollView content should be display on the whole screen
But I also want to show my ad on bottom of the screen. I have confusion here I just want to give ScrollView a
Height something like (Fill parent - 20 px) and my ads should be display at (20 PX) at the bottom of the screen
Note that whatever in the scroll view it should be display on whole screen except (20 px ) of the bottom.
You can try this:
<?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:orientation="vertical" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="20dip"
android:id="#+id/adView"
android:layout_alignParentBottom="true"
>
</LinearLayout>
<ScrollView
android:layout_alignTop="#id/adView"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Page content -->
</ScrollView>
</RelativeLayout>
So adView will take fixed 20 dip portion and remaining part will be taken by ScrollView.
Hope this helps.
use this layout:
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/your_ad_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:text="sample button" />
</LinearLayout>
<ScrollView
android:id="#+id/myscroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/your_ad_layout"
>
</>
</RelativeLayout>
All 3 current answers use a RelativeLayout as the root element of the layout, this is bad for performance.
Use a FrameLayout instead, then to make your ScrollView fill_parent - 20px, set its height to fill_parent and its layout_marginBottom to 20px. Set the Ad View to layout_gravity="bottom" and its height to 20px.
In addition, you should make this 20px 20dp, move it into a values/dimens.xml file, and use this same value for the two parameter mentioned above. It's then easy to define different sizes per screen size/density.
// try this
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ScrollView>
<com.google.ads.AdView
android:id="#+id/adView1"
android:layout_width="match_parent"
android:layout_height="20dp"
app:adSize="SMART_BANNER"
app:adUnitId="ca-app-pub-9766031373541061/3761995838"
app:loadAdOnCreate="true"
app:testDevices="TEST_EMULATOR, TEST_DEVICE_ID" >
</com.google.ads.AdView>
</LinearLayout>
I have an issue with my app where the button layout is not evenly spaced when used on different devices.
As shown, the first screenshot shows the layout evenally spaced out on an older, smaller screened android smartphone.
The second screenshot from a Nexus 4, shows the large white space under the bottom button that is uneven.
I thought I had set my layout to be even but it seems it isnt.
UPDATE:
How to set a scroll view with the two linear layouts in it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="84dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgLink"
android:layout_width="78dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/appointmentmanimenuicon" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="75dp"
android:gravity="center"
android:text="Appointments"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30sp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnaddAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointmentmenu"
android:src="#drawable/appointmentmenu"
android:text="Add Appointment"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnviewAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointviewicon"
android:src="#drawable/appointviewicon"
android:text="View Appointments"
android:layout_weight="1" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Your nested linear layout with the buttons has a fixed height of 400dp. On the small device this leaves a smaller amount of space at the bottom then it does on the larger nexus4.
If you change your linear layout with the buttons to use a height value of fill_parent it should place the buttons evenly in the space remaining in the parent layout underneath the header ( contacts).
Your second LinearLayout has a fixed height of 400dp. The bottom edge of that layout will always be at 484dp (taking into account the first LinearLayout), and will leave extra space after it on any screen larger than 484dp tall.
I'm not entirely clear on what your desired layout is, but believe what you want is to center the second LinearLayout within the parent LinearLayout.
To do so, add android:layout_gravity="center_vertical" like so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
You should also consider removing the ScrollView, as that content should never need to scroll.
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" />