I do not want the (black) space between the imageview and the following textview. what am I doing wrong? Thanks for your help.
<RelativeLayout
android:id="#+id/layout_contentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/club_banner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/condition_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#id/club_banner"
android:background="#drawable/overview_cell_header_bg"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:text="#string/Condition_1"
android:textColor="#ffffff"
android:textSize="13sp"
android:textStyle="normal" />
The problem is that firStart uses the START constant from the Matrix.ScaleToFit that will only chooses to scale the image either x or y axis
documentation:
Compute a scale that will maintain the original src aspect ratio,
but will also ensure that src fits entirely inside dst. At least one
axis (X or Y) will fit exactly.
solution:
You need to use the fitXY instead to scale the image from x and y axis
Problem:
android:scaleType="fitStart"
This makes the picture fit at the start (top) of the ImageView.
Change the scaleType to something else that matches your needs.
I tried your code and I get the expected result.
The problem must be in your image I guess. Is that part below the pic actually transparent?
for whom is interested in this i solved the issue by simply adding
android:adjustViewBounds="true"
Related
I am trying to create a custom top view using anImageView where buttons stays always at the same position and scale in proportion of the resolution of the device. I have been trying to put my elements inside a RelativeLayout using margins without any success the button always move from it position and its not scaling.
How could achieve this?
This is the example I am trying to get for all resolutions:
and here my XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
app:srcCompat="#drawable/settings_red_btn"
android:id="#+id/settings_btn"
android:contentDescription="settings btn"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="9dp"
android:layout_marginTop="11dp"
android:layout_width="43dp"
android:layout_height="43dp" />
<ImageView
android:layout_width="match_parent"
app:srcCompat="#drawable/top"
android:id="#+id/imageView17"
android:scaleType="fitCenter"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:adjustViewBounds="true" />
</RelativeLayout>
You have 2 options here :
You need to have the same padding right in the images themselves resources settings_red_btn & top. That way, you set to them alignParentRight = true, and they will align with the same padding.
You need to specify padding right for imageView17, according to screen resolutions. This is done by defining dimens.xml file on all resolutions. There are many blogs and stackoverflow hits on this. You can start with : http://android4beginners.com/2013/07/appendix-c-everything-about-sizes-and-dimensions-in-android/
Here is a small gif of my current situation. I guess many images are better than many words.
As you notice, when I switch for the smaller image, the seekbar size changes. I know this is because of the seekbar's width being set to match_parentand the image's width to wrap_content.
What I don't know is how to overcome this problem, as I can't really hardcode width value otherwise it'll probably get messed up on various screensizes.
So my question is :
Is there a way to prevent this behaviour that is clean? I could simply get the width at runtime and set it as minimal width and it would probably work (heck, I could try it now to make sure), but that is just a horrible thing to do code-wise.
Ideally, I'm guessing there is a way to prevent this in the .xml file, but I couldn't figure it out, playing with the different paddings, margins, scaling and layout sizes.
Here is what you're looking at :
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageButton
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:id="#+id/playButton"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:layout_centerVertical="true"
android:src="#drawable/play"
android:onClick="PlayButtonClicked" />
<SeekBar
android:max="100"
android:id="#+id/volumeSeekBar"
android:layout_centerVertical="true"
android:layout_margin="15dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_toRightOf="#+id/playButton"
android:layout_toLeftOf="#+id/muteButton" />
<ImageButton
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:id="#+id/muteButton"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_centerVertical="true"
android:onClick="MuteButtonClicked"
android:src="#drawable/sound" />
</RelativeLayout>
Ideally it would be nice for the volume icons to be of the same size.
If that is not an option, try replacing android:layout_toLeftOf="#+id/muteButton" with android:layout_marginRight="15dp+30dp+largest_icon_width_in_dp"
where 15dp is your seekbar right margin, 30dp is the mute button right margin.
The third option would be to set a fixed width for the mute button equal to the width of the largest image.
I am trying to create a sort of progress bar for my Android app, however, I would like it to be an image moving from right to left. The image itself needs to preserve its original size.
Basically, what I am looking for is this (don't have enough rep to post image):
http://postimg.org/image/5e7w5vd7h/
The problem is that the image, which is 2000px wide, will not load when run on my device (Sony Xperia S). If I use an image with width <= device width, it works.
I have tried using HorizontalScrollView and ScrollView inside a RelativeLayout, as well as setting scaleType to center, centerCrop, fitXY and all the others, adjustViewBounds true/false etc., basically every combination there is.
First and foremost, I would just like the image to appear on my device - the animation in itself is not prioritized right now, but I am thinking of a solution where I increment the ImageView's paddingRight regularly.
Below is a snippet of my XML thus far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/horizontalScrollView"
android:layout_marginLeft="12.5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/rolling_bar"
android:scaleType="center" />
</HorizontalScrollView>
<TextView
android:id="#+id/countdown_time_text"
android:text="01:22:58"
android:textColor="#color/countdown_color"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:textSize="28sp"
android:typeface="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginLeft="10dp" />
I apologize for any syntactical / semantic errors, I am quite new to Android. Thanks in advance!
I'd like to have a simple player view with image, name and status. The image will be loaded via Google+.
The Problem I have is that with big images my ImageView get's far too wide and pushes my texts out of sight.
Here is an example to show how it looks like:
https://dl.dropboxusercontent.com/u/11037539/unwanted_padding.png
Layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/playerPane"
android:background="#color/player2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/playerName"
android:layout_alignBottom="#+id/playerStatus"
android:id="#+id/playerImage"
android:src="#drawable/ic_contact_picture"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/playerImage"
android:id="#+id/playerName"
android:text="Player"
android:textColor="#android:color/black"
android:singleLine="true"
android:textStyle="bold"
android:paddingTop="#dimen/player_padding"
android:paddingBottom="#dimen/player_padding"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/playerName"
android:layout_alignLeft="#+id/playerName"
android:id="#+id/playerStatus"
android:text="status"
android:singleLine="true"
android:paddingBottom="#dimen/player_padding" />
</RelativeLayout>
I've tried all ImageView.scaleTypes, but so far nothing works..
Thanks a lot for your help!
You just need to define your width. It should fix it. So change this line
to something like:
<ImageView
android:layout_width="75dp" //OR WHATEVER LOOKS BEST
ScaleType is only really useful when the imageview's size is smaller than the image. As previously mentioned, set the size and then you can use the scaleType to fix how the image should be scaled within the now smaller area.
im sorry this is a noob question but i suck at layouting. How would i make a layout that positions the flashlight_button so it would preserve the ratio between imageviews on top and bottom.
It looks okay on nexus s (800x480), thats what i want
...image ...
but obviously when i switch to galaxy nexus (1280 x 720), it moves the middle button a bit to the top, like this (so it doesnt preserve the ratio between top and bottom margins as designed on nexus s)
...image...
The layout is here:
<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="#drawable/background"
android:padding="20dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:contentDescription="#string/application_logo_description"
android:src="#drawable/mylight" />
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#null"
android:contentDescription="#string/settings_button_description"
android:src="#drawable/settings_button" />
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/flashlight_button_selector" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/ad_button"
android:layout_centerHorizontal="true"
android:contentDescription="#string/powered_by_description"
android:src="#drawable/powered_by" />
<ImageButton
android:id="#+id/ad_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/ad_button_description"
android:src="#drawable/freeml" />
so it just anchors the top and bottom imageviews to parent edges, and the middle button is just pushed down using layout_maginBottom. I am providing scaled images for different densities and obviously density pixels to express size, so as it seems it just not enough on a bigger screen.
Whats the correct way to do this? Different .xml files or .. ?
//Sorry i cant still post images, hope you can imagine it.
Have you considered placing your flashlight image according to the parent's center?
So for now you are pushing flashlight image down (according to the top image position). Would it be more accurate to make flashlight image center-aligned and give it some bottom margin (to push it a bit higher according to your design).