I'm trying tot display 3 images:
- play button on the center
- two icons on the right
it's like: [___x__xx]
I added two black images on the left so that the playbutton while centered.
The problem now is that the two icons are not the original sizes, but fetched.
How can i solve this?
my code:
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/relativeLayoutText1"
android:layout_below="#id/relativeLayout3"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/spacex"
android:layout_weight="1" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/spacex"
android:layout_weight="1" />
<ToggleButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/btnPlayPause"
android:background="#drawable/togglebutton_playpause"
android:layout_centerVertical="true"
android:textOff=" "
android:textOn=" "
android:layout_toLeftOf="#+id/netwerkImg"
android:layout_marginBottom="#dimen/abc_button_inset_vertical_material"
android:layout_weight="1" />
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/netwerkImg"
android:paddingRight="10px"
android:layout_centerVertical="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="center" />
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:id="#+id/exitImg"
android:scaleType="centerInside"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_weight="1" />
If I understood the question correctly, you should be able to find the answer here: How to display an image full size with ImageView?
However, since there are many different device sizes, I would advise against that.
Fix the android:layout_width and android:layout_height to a value, when you set wrap_content be sure that your images will not appear in the same way using different devices, the design will be deformed.
for example :
android:layout_width="40dp"
android:layout_height="40dp"
Also to modify :
android:scaleType="centerInside" to android:scaleType="fitXY"
Also add :
android:adjustViewBounds="true"
Use scaletype attribute of imageview.
android:scaleType="centerCrop"
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 need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?
For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best
If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.
Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.
I have 5 images that I want to place in image buttons inside a horizontal LinearLayout. The images are saved in different sizes on the disk, but when placed in the layout, I want them to be of the same height, but in different weights of 0.5,1,1,1,0.5 (meaning the weight sum of the layout is 4). I tryed using this code and it didn't work:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4" >
<ImageButton
android:id="#+id/scrollLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/left"
android:layout_weight="0.5" />
<ImageButton
android:id="#+id/dog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dog"
android:layout_weight="1" />
<ImageButton
android:id="#+id/fish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fish"
android:layout_weight="1" />
<ImageButton
android:id="#+id/cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cat"
android:layout_weight="1" />
<ImageButton
android:id="#+id/scrollRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/right"
android:layout_weight="0.5" />
</LinearLayout>
Are there any parameters of layout_width and layout_height that I can change that will get this to work, or do I need to create a scaled bitmap from java code for each one of the buttons?
Thanks!
try defining the same height and then you scaling to keep the ratio
<ImageView
....
android:layout_height="match_parent"
android:scaleType="centerInside"
.... />
EDIT using a match_parentfor the height will make the ImageButtons have the same height and keep the scale ratio using scaleType
I'm creating an App Widget, and I'm having a strange issue. In the Eclipse graphical layout editor, my widget's layout looks like this:
However, when I install it on an emulator/my phone, it looks like this:
And here is the layout code in question:
<?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="fill_parent"
android:layout_gravity="center_horizontal" android:gravity="center_horizontal">
<RelativeLayout android:background="#drawable/blackbg"
android:layout_width="290dp" android:layout_height="145dp">
<ImageView android:layout_width="wrap_content" android:src="#drawable/clock_colon"
android:layout_height="107dp" android:layout_marginRight="10dp"
android:layout_marginLeft="10dp" android:layout_marginTop="5dp"
android:layout_centerInParent="true" android:id="#+id/colon" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_0"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/hour2"
android:layout_toLeftOf="#id/colon" android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_1"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/hour1"
android:layout_marginTop="5dp" android:layout_toLeftOf="#id/hour2"
android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_3"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/minute1"
android:layout_marginTop="5dp" android:layout_toRightOf="#id/colon"
android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/num_2"
android:layout_height="107dp" android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" android:id="#+id/minute2"
android:layout_marginTop="5dp" android:layout_toRightOf="#id/minute1"
android:layout_centerVertical="true" />
<ImageView android:layout_width="wrap_content" android:src="#drawable/clock_pm"
android:layout_height="wrap_content" android:id="#+id/clock_ampm"
android:layout_below="#id/minute2" android:layout_alignParentRight="true"
android:layout_marginRight="15dp" android:layout_marginBottom="5dp" />
</RelativeLayout>
</LinearLayout>
So what do you think? How come the numbers are getting cut off and spaced strangely like this. Thanks!
You are setting manually the height of your RelativeLayout and the height of your ImageViews to 107dp and your images may not fit properly inside your ImageView. So you should consider the following:
Supporting Multiple Screens Resources
Setting the scale of your ImageView to android:scaleType:centerInside
You should also consider using wrap_content for your layout height and width instead of manually setting the dimensions in dp
You can also try the attribute android:adjustViewBounds="true" for your ImageViews if they still don't get displayed correctly
The problem ended up being that I had set the size for the container RelativeLayout. Apparently you can't do that.
Is there any way to do this? I have tried padding the image and setting the width/height of the view, but neither seems to work. Here is an example:
<ImageButton
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/search_small"
android:paddingTop="4sp"
android:paddingBottom="4sp"
android:paddingLeft="6sp"
android:paddingRight="6sp"
android:layout_marginRight="10sp"
android:layout_marginTop="6sp"
android:layout_marginBottom="6sp"
android:layout_alignParentRight="true"
/>
I want the button to be wider than it is tall, but it is coming out the other way round.
Just had a play to try and understand your problem.
Seems ImageButton is a composite view which has a few pre-set values. Such as some sort of margin which you cannot override with the XML. If you cannot change your image to match what you want to happen then you are better to create your own composite view.
Here is my example of a composite view you can make yourself:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/saveSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_save"
android:layout_gravity="center"/>
</FrameLayout>
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/clearSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_gravity="center"/>
</FrameLayout>
And the original buttons:
<ImageButton android:id="#+id/imageButton1"
android:src="#drawable/ic_menu_save"
android:layout_height="45dp" android:layout_width="45dp"/>
<ImageButton android:id="#+id/imageButton2"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_height="45dp"
android:layout_width="45dp"/>
Here we can see custom image/button composite followed by the build in ImageButton as part of the SDK:
Set android:background instead of android:src to set the image on the button. This will adjust the image to your button's size. Then adjust the padding after.
You shouldn't use sp as a size dimension - dp should be used as it will help your view scale directly with different screen density and resolutions. See Here for dimensions.
padding will push other elements away from your view boundary. margin will push the contents of your view inward from the your boundary (ie would squash the available space for your picture) . The boundary is specified by height and width. Without more information I would guess you are being confused by your margins - delete them and experiment.
Also useful to you: android:scaleType="fitXY" makes the image stretch to match both the X and Y dimensions that are available to it. It helps you to see the canvas available to your image. Once you feel the area is large enough for a correctly scaled image change the scale type to centerInside. See Here for all scale types.
I use minWidth and minHeight attributes, combined with a fitXY scale type and wrapping its content to modulate the shape of my button.
<ImageButton
android:id="#+id/fooButton"
android:background="#drawable/play_button"
android:backgroundTint="#00000000"
android:minWidth="200"
android:minHeight="100"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="playStuff"
/>
Can you explain your question more widely so that we can more understood.
As per my understanding You want to set your ImageButton Height/Width. But it doesn't work is it? I want to ask you that, if you write any specific height/width then also it doesn't work?
I copied your code in my files and I changed the height/width manually then it will work.
Please explain your question.
Thanks.
I finished the layout following Graeme's answer. Four "imageButton" fix the bottom, same width, changeable image size. thanks!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#color/#000"
android:weightSum="100" >
<FrameLayout
android:id="#+id/flBottom1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_home_48_48"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
/>
<TextView
android:id="#+id/tvBottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_home"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_compose_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_comment"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_search_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_search"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_barcode_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_scan_again"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
</LinearLayout>