My xml works just fine on the android studios nexus 7 and nexus 10 emulators and the xml looks fine running on my nexus 4. But when I run it on a 7 inch tablet it stretches my image in the y direction only (in landscape activity) and doesn't keep the aspect ratio. I've tried 2 different 7 inch tablets with the same result.I think I've tried changing layoutwidth and layoutheight to just about every possible combination. I also have the same scaling issue if I try it with a imageview instead of an imagebutton. I googled and googled and tried everything but haven't found a solution that works for me. Please help me...
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/horizontalScrollView"
android:scrollbars="none"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:measureWithLargestChild="false">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton2"
android:src="#drawable/mainmenu1"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:onClick="goToLab101" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton3"
android:src="#drawable/mainmenu2"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:onClick="goToPeriodicTable" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton4"
android:src="#drawable/mainmenu3"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:onClick="goToLab102"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton5"
android:src="#drawable/fountainselector"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton6"
android:src="#drawable/mainmenu5comingsoon"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:onClick="goToLab103"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton7"
android:src="#drawable/mainmenu6"
android:background="#android:color/transparent"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</LinearLayout>
</HorizontalScrollView>
Add your same image drawables in drawable-large-xhdpi for 7 inch tablet support
Related
I have a little problem with ImageView on differents screens with different dpi like this:
On second screen there are original dimensions of imageviews. But on first screen images are bigger and moved out. How i can set proportional dimensions and margins to ImageView.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/textLayoutIntro">
<ImageView
android:id="#+id/first_slide_second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_second_image"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/firstSlideTelephone"
android:layout_marginTop="100dp"
android:layout_marginStart="20dp"/>
<ImageView
android:id="#+id/first_slide_third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_third_image"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true"
android:layout_alignEnd="#+id/firstSlideTelephone"
android:layout_marginEnd="30dp"
android:layout_marginTop="100dp"/>
<ImageView
android:id="#+id/firstSlideTelephone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_telephone"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:id="#+id/first_slide_first_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_first_image"
android:layout_marginStart="-30dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:maxWidth="138dp"
android:maxHeight="138dp"/>
<ImageView
android:id="#+id/first_slide_fourth_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_fourth_image"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"/>
</RelativeLayout>
Thanks in advance)
Instead of RelativeLayout, use constraintlayout with vertical and horizontal guidelines. That way, the content sizes up or down to whatever device screen size. Like the sample below.
<android.support.constraint.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:clickable="true"
tools:context="com.example.example.Fragments.ExampleFragment">
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<ImageView
android:id="#+id/imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/none"
app:layout_constraintStart_toEndOf="#+id/fragment_guideline_h_1"
app:layout_constraintEnd_toStartOf="#+id/fragment_guideline_h_2"
app:layout_constraintTop_toBottomOf="#+id/fragment_guideline_v_1"
app:layout_constraintBottom_toTopOf="#+id/fragment_guideline_v_2"
app:srcCompat="#drawable/forgot_password_arrow_back" />
</android.support.constraint.ConstraintLayout>
I've had same problem but I've found this: https://github.com/intuit/sdp
It's a library with dimensions represented by sdp. It just library with dp but scaled for different screen sizes.
You can use percentage for ImageView width and height. For example, use ConstraintLayout and for ImageView:
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />
It's possible to solve many ways. The above bros already said possible to solve by Constraint layout.
It's also possible to solve by Linear layout. Just use weight_sum. Add 2 View add the top and bottom and at the middle add your image. Weight perfectly work dynamically (may you know).
But if I was in this situation, I would be solved it using sdp & ssp library. The library most of the time works perfectly.
only for font/text size: ssp. &
For any others except font: sdp
I just replaced png drawables in my app with vector drawables and this seems to work fine on most devices, but for some reasons I experience some weird display on some random icons on a Samsung S8 running Android 8.
Some icons are displayed with the outline kind of pixelated and I have no clue why as I tested the exact same APK one maybe 10 other device without any issue.
For example with the following layout, the first icon (previous track) has this issue, but none if the other ones
If I change the vector drawable for this icon it still shows the issue.
Any idea what could be causing this?
<LinearLayout
android:id="#+id/streamControlsLayout"
android:layout_width="match_parent"
android:layout_height="62dp"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/previousTrack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/previousTrackButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/previous_track_button" >
</ImageButton>
<ImageButton
android:id="#+id/rewind"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/fastRewindTrackButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/rewind_button" />
<ImageButton
android:id="#+id/playButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/playPauseButtonContentDescription"
android:scaleType="fitCenter"
android:src="#drawable/play_button" >
</ImageButton>
<ImageButton
android:id="#+id/fastForward"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/fastForwardButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_fast_forward" />
<ImageButton
android:id="#+id/nextTrack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/nextTrackButtonContentDescription"
android:padding="6dp"
android:scaleType="fitCenter"
android:src="#drawable/next_track_button" >
</ImageButton>
</LinearLayout>
Example of the issue
I am new to android development and am trying to build my gui using the layout xml file as follows:
<?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:padding="0dp"
tools:context="com.fotovaultencryption.fraser.fotovault.MainActivity"
android:background="#drawable/main_background"
android:id="#+id/main_relative_layout">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_margin="0dp"
android:padding="0dp"
android:id="#+id/main_vertical_layout">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header_iv"
android:src="#drawable/header_btn"
android:adjustViewBounds="true"
android:layout_margin="0dp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/slogan_iv"
android:src="#drawable/header_slogan"
android:adjustViewBounds="true"
android:layout_margin="0dp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/options_iv"
android:src="#drawable/options_heading"
android:adjustViewBounds="true"
android:layout_margin="0dp" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/buttons_scroll_view" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_buttons_vertical_layout">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/take_photo_btn"
android:src="#drawable/take_photo_btn"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#null"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="10dp" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/open_photo_btn"
android:src="#drawable/open_photo_btn"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#null"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/decrypt_and_view_btn"
android:src="#drawable/decrypt_and_view_btn"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#null"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/decrypt_and_save_btn"
android:src="#drawable/decrypt_and_save_btn"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#null"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>
None of the images are huge (the largest being the image used for the background of relative layout which is 800x1280 and 619kb) and there are only 8 on screen but I am using too much memory loading and scaling these images
Am I going about adding the buttons in the correct was or should I be doing it through code in my onCreate()? I have read alot about scaling my drawables and only saving the scaled versions to memory, but surely this then means I cannot create my ui through the xml layout file?
A 800x1280 image when rendered is 800 * 1280 * 4(bytes per pixel), just over 4 MB, not 619kb. That times 8 images is 32MB.
619KB many be the compressed size on disk but when rendered it must be the full size.
(BTW, "b" is bits, "B" is bytes)
An image of 800x1280 is not small!! And having 8 only add to the problem. As your images are in pre-set, you should scale them to their respectful sizes using and put them in their respectful drawable folders ir mdpi, hdpi, xhdpi and so on.
I'm facing an issue on nexus 9.
I have a "basic layout" for my view:
<RelativeLayout android:id="#+id/micContainer" android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#99ffffff" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp" >
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true">
<TextView android:id="#+id/main_ment_0" style="#style/ment_txt" android:text="" android:layout_margin="5dp" />
<TextView android:id="#+id/main_ment_1" style="#style/ment_txt" android:text="" android:layout_margin="10dp" android:layout_marginLeft="10dp" android:visibility="gone" />
<TextView android:id="#+id/main_ment_2" style="#style/ment_txt" android:text="" android:layout_margin="10dp" android:layout_marginLeft="10dp" android:visibility="gone" />
</LinearLayout>
<ImageView android:id="#+id/main_mic" android:layout_width="70dp" android:layout_height="70dp" android:background="#drawable/mic_0" android:layout_margin="3dp" android:layout_centerVertical="true" />
</RelativeLayout>
This works well on a nexus 5:
However on a nexus 9, a grey area is visible and I can't figure why:
Do you have any idea why this grey area is visible (and if yes why it doesn't show on nexus 5) ?
Thank you in advance for your help.
Edit: the background you see behind the relativeLayout is a videoView.
I also tried on other phones (Samsung S*, Pantech Vega) and it's working well.
Here is the complete screenshot of what I have (and what I want) on my nexus 5:
your base RelativeLayout height is wrap_content, change to
android:layout_height="match_parent"
I have made an app that shows 6 images, 3 per row. It looks perfect in the layout designer of android studio but not on physical device that has an other screen resolution. I wasn't surprised about that but I don't know how to make the app compatible to all screen sizes.
Layout designer Android Studio:(1:4)
Physical Device:(1:2)
Source code:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.test.testing.app.MainActivity">
<ImageView
android:id="#+id/Image1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:contentDescription="Image1"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/Image2"
android:layout_marginRight="5dp"
android:contentDescription="Image3"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignTop="#+id/Image1"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#id/Image3"
android:layout_toRightOf="#id/Image1"
android:contentDescription="Image2"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image4"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/Image1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:contentDescription="Image4"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image5"
android:layout_width="100dp"
android:layout_height="100dp"
android:contentDescription="Image5"
android:src="#drawable/_5221802"
android:layout_alignTop="#+id/Image6"
android:layout_alignRight="#+id/Image2"
android:layout_alignEnd="#+id/Image2"
android:layout_alignLeft="#+id/Image2"
android:layout_alignStart="#+id/Image2" />
<ImageView
android:id="#+id/Image6"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_below="#id/Image3"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:contentDescription="Image6"
android:src="#drawable/_5221802" />
Why not use Linear Layout and set equal weights for all three images in a row.
Look at this code, I have trimmed it a bit, but the main parts are:
Changed RelativeLayout to LinearLayout (with 'horizontal' orientation), then changed the width of all three images to 0dp - android:layout:width="0dp", and added equal weight layout_weight = "1" for all three of them'
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/Image1"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:contentDescription="Image1"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image3"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:contentDescription="Image3"
android:src="#drawable/_5221802" />
<ImageView
android:id="#+id/Image2"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:contentDescription="Image2"
android:src="#drawable/_5221802" />
</LinearLayout>
This would work on any device of any screen size.
Actually, you need not have to run the app to see how your app's layout will look on particular device, you can check that in Eclipse - layout editor. There are many dropdowns at the top bar for you to select the type of device where you want your app to run and find out, how it will look there.
To answer your question, ideally, you should define Gridview and add your images there.