I have a button, a textView and a scrolView on my screen. I need the button and textView to be beside each other on top and the scrolView under them. How to professionally arrange views on the screen?!
this is what I have done:
<LinearLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:textDirection="inherit"
tools:context=".MainActivity" >
<Button
android:id="#+id/btnScanAndDraw"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="#string/btnShoePosition"
android:textSize="12sp"
android:onClick="ScanAndDraw"/>
<TextView
android:id="#+id/txvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="end">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imgViewMap"/>
</LinearLayout>
</ScrollView>
Not sure what you want actually. If you are asking questions related to layout, please post a screenshot too. If I understood your question, solution is below.
You are using a LinearLayout, which has only two orientations (vertical and horizontal). Click here to know about LinearLayout. If you want to arrange your UI in a relative manner use RelativeLayout. RelativeLayout. I have changed your code with some new attributes. It's not tested, but it should give you desired output.
<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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/txvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/btnScanAndDraw"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="#string/btnShoePosition"
android:textSize="12sp"
android:onClick="ScanAndDraw"
android:layout_toRightOf="#+id/txvMain/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below = "#+id/txvMain
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imgViewMap"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
I red a book for android app development. reading the book I realized that it is possible to have several LinearLayout s which will go inside of each other. Using this hierarchy of LinearLayout s I am able to arrange views in the .XML file. For instance I arranged a root LinearLayout which by itself contains 3 more LinearLayouts. For the buttons on top, I wrote:
android:gravity="right"
then the buttons went to right on top. For the ImageView - under the buttons - I implemented another LinearLayout that has this line of code inside to horizontally center the ImageView:
android:gravity="center_horizontal"
In this form - as I said - using inner LinearLayouts and gravity it is possible to arrange views on the screen as intended.
may be useful for someone :)
Related
This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.
You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.
I have looked at a lot of answers and not found one that isn't a work-around. So, excuse me if this has been asked and answered.
I have a RelativeLayout that I want to appear at the bottom of the screen regardless of the size of the stuff outside the RelativeLayout and above it. Can this work as designed (Relative below Relative)? If so, please tell me what I'm doing wrong.
Note: I have removed most of the guts that make it obvious why the first RelativeLayout has to be a RelativeLayout and the 2nd RelativeLayout is usually an <include... that I use in other places and put in explicitly for this example.
Thanks.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/enter_Game_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:hint="Enter Game Name"
android:inputType="text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/d_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#android:string/cancel" />
</RelativeLayout>
Here's what I get...
In your second RelativeLayout you have android:layout_alignParentBottom="true" , this attribute will not work because the parent is a LinearLayout where this attribute doesn't work and has no effect, make you parent layout RelativeLayout instead of LinearLayout and remove the Orientation attribute since it will has no effect, then you will get the button at the bottom of the screen no matter the size of the screen and layout above your Button
You parent layout is a linear layout. Make it a Relative layout. Then Put two Views (Edit Text and Button) in it and set one to align top and one to align bottom.
Your code would look like something like this (not tested)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/enter_Game_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:hint="Enter Game Name"
android:layout_alignParentTop="true"
android:inputType="text" />
<Button
android:id="#+id/d_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/cancel" />
</RelativeLayout>
I have a LinearLayout & i have 2 TextViews inside it. Dynamically i want to hide one TextView or i can add TextViews at runtime. My problem is when TextView disappears from LinearLayout it collapses in no time. I want to animate the LinearLayout(ScaleAnimation) when views get removed from LinearLayout.
activity_main.xml
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#000"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#fff"
android:orientation="vertical"
android:padding="10dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Hello, World" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Hello, World 2" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Remove TextView" />
</RelativeLayout>
Snapshot of layout...
I want to animate LinearLayout when second TextView got removed from LinearLayout & if another TextView got added into LinearLayout. ScaleAnimation is good for the above task but i don't know values required for this type of animation.
Pretty sure that you do not need it anymore, but for future searchers:
For the remove animation, it is possible to make the item invisible using view.setVisibility(View.INVISIBLE) and after the animation (addAnimationListener) effectually remove it from the linear layout. When a view is invisible its parent keeps measuring it.
My main Activity has a number of buttons, that fit below each other on a large Tablet screen, but not on a smaller Phone screen. I added a ScrollView, so that the user can scroll down to the other buttons if the screen size requires it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bg"
android:gravity="center_horizontal">
<TextView
android:id="#+id/trackSelectorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foo" />
<!-- More buttons -->
</LinearLayout>
</ScrollView>
</LinearLayout>
This kinda works, however I have a large blank space below the last button (i.e. the ScrollView can scroll down too far). Both on an actual Tablet and on the emulator with a Phone configuration. If I center the inner LinearLayout (instead of center_horizontal), the space is evenly spread between the top and the bottom, which I don't want neither. How do I fix this layout?
I hope this image makes it more clear, imagine that the ScrollView has been completely scrolled down and showing the last buttons. The blank space I mean is the one below Button 6 on the right image:
Try adding this attribute to your ScrollView element.
android:fillViewport="true"
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true" > ... </ScrollVIew>
Ref: ScrollView Ref
Actually, it wasn't really related to the layout (unless I'm missing something). I tried commenting out the background attributed, and it suddenly worked. The background imaged (#drawable/bg) was simply too big and caused the scrolling. I converted the background into a 9-patch image, so it could be scaled automatically, and voilà, the additional space was gone.
Still, if this would've been achievable without 9-patch, I'd still be interested to hear if this can be done in the XML file.
you can use this attribute in scrollview to avoid extra padding at bottom of view
android:overScrollMode="never"
I have checked with my code..Work perfectly:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg"
android:gravity="center_horizontal">
<TextView
android:id="#+id/trackSelectorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foo" />
<!-- More buttons -->
</LinearLayout>
</ScrollView>
</LinearLayout>
May be Help you.......!!
I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like you want.
<?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">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one