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" />
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've been trying to recreate this layout in Android Studio (API 19) without success.
I added at the top part of the image what I need without texts on it, the part below has some explanations.
Every time I tried (no matter LinearLayout or GridLayout), the text in the middle broke the design if it is long or if I do not set real DP size (like using wrap_content), if the text has a fixed size I must adapt it to every screen size on both, vertical and horizontal, which I don't want, because I must update a lot of files it every time I make changes on layouts, and if it has wrap_content and the text is long the switch goes off of the screen.
I made this "design" with Photoshop of what I need to recreate on Android Studio on a layout (xml only, not programmatically), if possible I'd like LinearLayout or GridLayout or both, I don't care how much sub-layouts are needed.
Additional: If someone knows how to get that switch style for older versions of Android, it'd be really good to get the same style on that too, but is not necessary.
Please help me, I really can't make it, thanks a lot.
With a Relative Layout this kind of design wont be a problem.
You will need to use the properties android:layout_alignParentRight and android:layout_alignParentLeft.
Your center textview will use android:layout_toRightOf and ndroid:layout_toLeftOf.
More informations : Relative layout documentation
Use following XML as your layout codes, this is exactly what you want on your designs
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/icon_paypal"
android:layout_margin="16dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/switchlayout"
android:layout_toRightOf="#+id/image"
android:layout_marginTop="16dp"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text 1"
android:textColor="#000"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text 2"
android:textColor="#ccc"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/switchlayout"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:paddingLeft="16dp"
android:gravity="center"
android:layout_height="72dp">
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Use Follow XML code. it will fit in any screen
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/app_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".6">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:gravity="center">
<Switch
android:layout_width="40dp"
android:layout_height="wrap_content" />
</LinearLayout>
I must be doing this all wrong, and layouts confuse me, so I hope someone might guide me in the right direction. This whole thing is a mess because I've been fiddling with it non-stop since I created it a month ago, trying to fix little issues here and there, so I apologise quite a lot in advance for this disaster.
Literally all that I want is a LinearLayout where everything is centred horizontally and vertically.
This is how it shows up in my Design page.
Before I dump in my layout, allow me to explain what's going on.
I have a TextView that shows status messages above the ImageButton. Below the ImageButton, I have a TextSwitcher and finally a circular ProgressBar.
I've had to put android:adjustViewBounds="true" and android:scaleType="fitCenter" on my ImageButton because the image is much bigger than would fit, otherwise.
Anyway, here's the dump. Hoping someone might be able to make suggestions.
<LinearLayout 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:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:orientation="vertical"
android:layout_gravity="fill_vertical|center"
android:configChanges="keyboardHidden|orientation|screenSize"
android:screenOrientation="nosensor"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.gesslar.threshvote.MainActivity"
android:background="#color/colorFaded"
tools:showIn="#layout/activity_main">
<TextView android:id="#+id/textStatusMessage"
android:textColor="#color/colorText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
<ImageButton android:id="#+id/buttonVote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="#drawable/ic_vote_button_image"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:onClick="onVotePressed"
android:layout_gravity="center_horizontal|center_vertical"
android:adjustViewBounds="true" />
<TextSwitcher android:id="#+id/textCountdown"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:textColor="#color/colorText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/countdown"
android:includeFontPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar android:id="#+id/loadingBar"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_gravity="end"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
android:indeterminate="true"/>
</LinearLayout>
If you still like using LinearLayout, you can order your layout like this to have a layout center both horizontally and vertically
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0ff"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button Center Vertical/ Horizontal" />
</LinearLayout>
</LinearLayout>
Or simple use RelativeLayout with android:layout_centerInParent="true" to have a layout center both orientation
Hope this help
First of all, LinearLayout can either store everything horizontally or vertically but not both at the same time. So you have to choose specially what do you want. If you want everything to appear in vertical fashion but still some components, say TextView needed to be in a horizontal layout, you may wish to use another LinearLayout (nested inside the main LinearLayout and give it an orientation : Horizontal ).
Apart from this, I don't think there is any problem with that Layout or I did not understand your problem properly, either one.
I have a hard time pointing out what UI elements are used here? Is it buttons or listviews?
This view is not seems as a list view. They are either Buttons or ImageButtons fitted in some layout.
If you want to make this in a ListView, you are gonna have a hard time. The best would be to make it in a GridLayout, if you are not that confident in working with that then the easiest solution would be a LinearLayout in the root with vertical orientation, and then add a LinearLayout with horizontal orientation where the childs have `weight="1"
Something like this (Just for the first two buttons):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
<FrameLayout
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:clickable="true"
android:layout_marginRight="10dp"
android:onClick="onChildOneClick">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button 1"
android:background="android:color/green" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:clickable="true"
android:layout_marginLeft="10dp"
android:onClick="onChildTwoClick" />
</LinearLayout>
</LinearLayout>
Inside your framelayout you can put a ImageView + TextView to make it look like the sketch
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.