I have some ImageViews inside a ViewFlipper. I want to respect the aspect ratio of the images, so the layout won't use all the screen. I have set up a simple "slide" animation, but the ViewFlipper will always be a bit bigger than the images inside. This makes an undesired black space appear between two sliding images. I can't make the ViewFlipper wrap around the ImageViews correctly.
Everything is inside a FrameLayout, so there I can have a floating button there too. This is the main layout XML:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerInside"
>
<ViewFlipper
android:id="#+id/flipper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerInside"
>
<ImageView
android:id="#+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/bg0"
/>
<ImageView
android:id="#+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/bg1"
/>
</ViewFlipper>
<ImageButton
android:id="#+id/menuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/btn_menu"
android:background="#null"
/>
</FrameLayout>
If I set the scaleType of the ImageViews to "fitXY" the black margin disappears, but the ratio of the images is not respected. I have already tried "fitCenter", "fillParent" in the ImageViews, and a padding of 0px.
Any help is very much appreciated as I have been struggling with this for hours.
Adding this to the ImageView did it:
android:adjustViewBounds="true"
Related
I am trying to use LinearLayout to achieve a layout with several images whose horizontal position are evenly distributed in a certain container of width [A]. As the width of the container shrinks, the images are supposed to overlap each-other.
<LinearLayout
android:orientation="horizontal"
android:layout_width="128dp" <--- [A]
android:layout_height="64dp"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content" <---- [B]
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#drawable/ic_star_black_24dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:srcCompat="#drawable/ic_star_black_24dp"
/>
</RelativeLayout>
</LinearLayout>
The layout above evenly distributes the images in the container width [A]:
However when changing [A] to some small value that should make the images overlap, they are scaled down to make them fit the width of their parent RelativeLayout. Which is odd, because I explicitly asked a width of wrap_content at [B]. I don't want the images to be scaled.
Any ideas how I could make this work?
(The reason why I want the images to overlap is because it's part of the intended choreography during a transition. Their final position will be a non-overlapping one.)
Just found the solution myself. I found android:scaleType, which controls the way how images are scaled with respect to their size. However, using android:scaleType did not have any effect at all until I also changed app:srcCompat to android:src. I have no clue why this is so, but the following works now as expected:
<LinearLayout
android:orientation="horizontal"
android:layout_width="128dp"
android:layout_height="64dp"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_star_black_24dp" <--- !!
android:scaleType="center" <--- !!
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_star_black_24dp" <--- !!
android:scaleType="center" <--- !!
/>
</RelativeLayout>
</LinearLayout>
I'm trying to make a simple clock/stopwatch app. In my overall vertical linear layout, I have a relative layout followed by a button. The relative layout has several imageviews stacked on each other in order to produce the clock.
I noticed, however, that the relative layout, as well as the imageviews themselves, take up way too much space in the linear layout. The clock pieces are SQUARE, so why is Eclipse insisting that it is a long vertical rectangle? My button at the bottom doesn't even show if I don't use weights. (But strangely enough, it shows if it is above the relative layout.)
I've tried everything I could: Set the height of items in relative layout to wrap_content, as well as the relative layout itself. I tried using weights, by giving the relativelayout a weight of 0 and the button 1, and then setting their layout_heights respectively to 0dp as needed. Still no go. There is a lot of room left for other things, and I'd like for the clock's parent layout to wrap itself around just the content.
What is going on here? Please see attached image for details. Code is attached below.
<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:background="#drawable/tiling_rules"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Test" />
It turns out that all I needed was to add:
android:adjustViewBounds="true"
to every ImageView! Now the clock pieces' bounds are "wrapped" around the content, even though setting wrap_content in its layout didn't work. Thanks for the suggestions though!
Try using a RelativeLayout as your main layout. This way you can make the button show at the bottom of the screen. Then if you need, use a separate layout for the clock pieces within the main layout
Kinda like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
I'm trying to build a gui for my app. It is comprised of two images, one on top of the other. The bottom image needs to be scrollable, the top image needs to be fixed.
This is the current layout xml for the 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:gravity="right"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/button_load"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load" />
<Button
android:id="#+id/button_save"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
</LinearLayout>
<uk.co.test.EditorView
android:id="#+id/EditorView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
</LinearLayout>
Using this layout, the bottom image does not scroll, it is compressed to the width of the screen. If I remove the EditorView, it does scroll. How can I make the gui act as I want?
Any help gratefully received. Thanks
I'm actually not sure why removing the EditorView makes it work. Also, I only see one image view in your layout. But to make that ImageView scroll horizontally, I would change the layout_width of the scroll view to "match_parent" and add a scale type to your image view.
(see: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html )
I would try either "center" or "matrix," although usually I have to play around with these a bit to get it to work just how I want it.
so:
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
In generally, with scroll views, you want to match_parent for the size of the scroll view, but wrap_content for the view being scrolled. The scroll view will allow the wrapped view to grow bigger than its own bounds, but if the scroll view grows bigger than the screen bounds, it won't scroll because it thinks it's showing everything already.
I'm creating a simple android project that utilizes a ViewPager and a PagerTabStrip. Each fragment of the ViewPager consists of an ImageView and a ProgressBar. Right now, the ImageView of the fragment does not underlay the PagerTabStrip as I guess the PagerTabStrip has reserved space at the top.
Ideally, I want the ImageView to go underneath the strip as if I had changed the visibility of PagerTabStrip to View.GONE, but with the strip still there to overlay it.
I've tried to adjust the margins of the ImageView and fiddled with the XML parameters by scaling it to "FitXY" but it still doesn't go under the PagerTabStrip. Any help would be greatly appreciated! Here's the XML code I have below:
MainActivity.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.support.v4.view.ViewPager
android:id="#+id/home_screen_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_tab_strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#000000"
android:paddingBottom="0dp"
android:paddingTop="0dp"
android:textAppearance="#style/PagerTabStripText"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
<ImageButton
android:id="#+id/fbButton"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/fb_button_left_margin"
android:layout_marginBottom="#dimen/download_button_bottom_margin"
android:background="#drawable/facebookbutton" />
<ImageButton
android:id="#+id/miscButton"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/button_margin"
android:layout_marginBottom="#dimen/download_button_bottom_margin"
android:layout_toRightOf="#+id/fbButton"
android:background="#drawable/button" />
<ImageButton
android:id="#+id/downloadButton"
android:layout_width="#dimen/button_size"
android:layout_height="#dimen/button_size"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/button_margin"
android:layout_marginBottom="#dimen/download_button_bottom_margin"
android:layout_toRightOf="#+id/miscButton"
android:background="#drawable/button" />
<ImageView
android:id="#+id/bottomBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:adjustViewBounds="true"
android:baselineAlignBottom="true"
android:cropToPadding="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/bottombar" />
</RelativeLayout>
MainActivityFragment.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/imageview_description"
android:scaleType="fitXY" />
</RelativeLayout>
Here's a Screenshot of what it's like now:
With PagerTabStrip: http://i.imgur.com/w1WaF9P
Without PagerTabStrip: http://i.imgur.com/Nr2Ny3v
The second image was achieved by using a translation animating to move the PagerTabStrip upwards.
Ideally, the ImageView starts from 0,0 in the upper left hand corner and is overlapped by the PagerTabStrip so that when it translates, there isn't a blank white space.
It will be helpful if you can show MainActivity.xml in full form, I believe there are more View(s) configuration in there.
With the information you have provided, the only reason that could cause this is because you are using RelativeLayout in your MainActivityFragment.xml layout.
Read the RelativeLayout document:
"A Layout where the positions of the children can be described in relation to each other or to the parent."
"Note that you cannot have a circular dependency between the size of the RelativeLayout and the position of its children. For example, you cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a child set to ALIGN_PARENT_BOTTOM."
I will suggest you use LinearLayout for your fragment that manages its own view without dependency.
I'm quite new to android programming and I stumbled upon a problem with my layout.
At first, I had a Linearlayout with a textview, 2 buttons and a imageview scaled to fit the screen.
Now I wanted to put this under a scrollview, so the imageview could be scaled larger (to the width of the screen).
Without the scrollview everything just went fine, but with the scrollview, my imageview is not scaled anymore.
What am I doing wrong? I tried numerous solutions on StackOverflow but I can't get it to work with a ScrollView. Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/pageno" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/texta" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/textb" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/page1" />
</LinearLayout>
</ScrollView>
Make LinearLayout/RelativeLayout as parent view. In that make a scroll view and set alignparentTop=true. This scrollView will contain a single layout in which all other views will be placed.