Vertical LinearLayout with ImageButton: Problems with different screens - android

I have 2 vertical linear layouts in one horizontal parent linear layout like this:
<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:textAllCaps="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
<android.support.design.widget.AppBarLayout ...
<android.support.v7.widget.Toolbar... />
</android.support.design.widget.AppBarLayout>
<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="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<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="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:orientation="vertical"
android:id="#+id/imagebtn_layout">
</LinearLayout>
<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="0dp"
android:layout_height="match_parent"
android:layout_weight="0.9"
android:layout_marginRight="1dp"
android:orientation="vertical"
android:id="#+id/button_layout">
</LinearLayout>
</LinearLayout>
</LinearLayout>
Now I add 2 buttons programmatically to their views:
One into imagebtn_layout and the other one into button_layout with the parameters: (LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT). The text of the button is set to 20.6f. The picture for the image button has 44x44 pixels.
The result looks fine on my Pixel 2 (1920x1080), but horrible e.g. on 2560x1440:
I'm not sure what's wrong. The result should be that the ImageButton and the normal button are on all screens at the same line.
Edit: Solved after using the solution from gmetax and setting android:layout_height in the parent view to "wrap_content" and adapting font size of text button.

you have to specify the width of the image that you know and then let the other fill the empty space.
<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="16dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:orientation="vertical"
android:id="#+id/imagebtn_layout">
</LinearLayout>
<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="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="1dp"
android:orientation="vertical"
android:id="#+id/button_layout">
</LinearLayout>

Related

ListView not utilizing full space in FrameLayout

I have an activity layout with 2 FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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="match_parent"
android:layout_height="match_parent"
tools:context="de.sioned.multivoc.AddWordActivity"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/toolbar_layout"/>
<ScrollView
android:id="#+id/scLeft"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/paneLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftTop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftBottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/paneLeftTop"/>
</RelativeLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
The 2nd FrameLayout paneLeftBottom will at some point contain the following fragment:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/lyTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...some static fields...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/lyTop">
<ListView
android:id="#+id/lvResult"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"/>
</RelativeLayout>
In this configuration the ListView is only shown with a height of one of it's rows instead several rows utilizing the available space. The ListView works fine but only one row at a time is displayed.
The same ListView fragment works fine when I put it into a 2-pane landscape layout. How can I make the ListView use the available space ?
Edit:
Found a partial solution by switching to a LinearLayout within the ScrollView. Only problem left is, that the bottom Framelayout overlays a bit of the top FrameLayout when I load the said fragment into it. But that is acceptable in this case as it is only temporary to select some data.
<ScrollView
android:id="#+id/scLeft"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<LinearLayout
android:id="#+id/paneLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftTop"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paneLeftBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</ScrollView>
This right here
android:layout_width="match_parent"
android:layout_height="match_parent"
Should be
android:layout_width="match_parent"
android:layout_height="wrap_content"

LinearLayout child pushes other views

My activity's main layout is a LinearLayout. It has two children as an example. A RelativeLayout and a Button. The width and height of RelativeLayout are set to match_parent and the Button, match_parent and wrap_content. Unfortunately, RelativeLayout pushes the button below until it is not visible.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Why is this happening? I tried a tweak for the RelativeLayout which is changing the height to 0dp and weight to 1. It does make the Button visible but I am not sure if this is advisable as I only changed the height and weight of RelativeLayout.
Try this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
OR
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#+id/btn"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:src="#drawable/disha"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:text="NIlu"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>
</ScrollView>
LinearLayout is either Vertical or Horizontal. Your first child which is RelativeLayout is matchParent then it will cover whole Outer layout .
Solution can be multiple its depends upon where exactly you want to place your Button . One way is .
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#+id/btn"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>
Change your Code Like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:text="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Worked Foe me..
you should Give android:layout_weight="1" to relative Layout
//try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
this seems to work just fine.
I tried a tweak for the RelativeLayout which is changing the height to
0dp and weight to 1
the code look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
In your layout, RelativeLayout is the first child of your LinearLayout. Since, you have set the height and width to match_parent it takes up all available space pushing the button out of the view.
When you set the RelativeLayout height to 0dp and weight to 1, LinearLayout first lays out all children based on the dimensions specified, and then distributes the remaining space based on the weight. In this case, the relative layout is 0dp, so it takes no space in first pass, and the button takes up space based on its onMeasure (lets say 100dp). The remaining space is now given to RelativeLayout because its weight is set to 1. Refer to the LinearLayout documentation for more details here.
You should consider using a RelativeLayout/ConstraintLayout as your root element.

Android Scroll View space in the bottom

I want a help for design a screen.. I want to make a details screen, with a picture and a text (scrollabe).. But when i test, the text doesnt fill all the space...Its puts a empty space at the bottom of the text... How can i fill all the layout with the text?
<?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout 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="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rs.app.paginas.antena_detalhe">
<LinearLayout
android:layout_width="368dp"
android:layout_height="495dp"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_weight="0.05"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:id="#+id/imgAntena"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
app:srcCompat="#mipmap/baloon" />
</LinearLayout>
<TextView
android:id="#+id/txtTitulo"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Nome" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:adjustViewBounds="true"
android:fillViewport="true"
>
<TextView
android:id="#+id/txtDetalhes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollbars="vertical" />
</ScrollView>
</LinearLayout>
</android.widget.RelativeLayout>
and the screen:
You need to change to "match_parent" in your first LinearLayout´s height and widht parameters to fill all the screen, cause the parent in this case is your phone' screen, but if you define values in dp as shown in your code (495dp) then it´ll fill just that dimensions, and the screen dimensions change with every phone and his own screen size, that´s why it works in some little screen devices, and with bigger screens probably wont do it, the best solution to make it work with every screen size is changing your code like this:
<?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout 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="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rs.app.paginas.antena_detalhe">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
...
Hope it helps,
You should change from:
<?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout 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="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rs.app.paginas.antena_detalhe">
<LinearLayout
android:layout_width="368dp"
android:layout_height="495dp"
android:orientation="vertical"
android:weightSum="1"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
to:
<?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout 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="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rs.app.paginas.antena_detalhe">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
In your layout you have defined fixed dimensions for your linear layout which contains your scroll view and other widgets. I would suggest changing your root layout to Linear Layout with maximum width and height :
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp"
tools:context="com.example.rs.app.paginas.antena_detalhe">
And remove the child linear layout.
Reason you were getting extra space was because of fixed height,which may be not present on phone with lesser height.

set LinearLayout on center android

I have one LinearLayout in which there are two components one is SquareLayout and second one is RecyclerView, i want SquareLayout in center of the screen and RecyclerView in bottom of the screen , don't know why but gravity not work for set it. i am new in android i hope my question is clear. Here is my .xml file..
<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:orientation="vertical" >
<com.example.layouts.SquareLayout
android:id="#+id/llSelectedLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
></com.example.layouts.SquareLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rvImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
Use RelativeLayout instead of LinearLayout for do that.
<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:orientation="vertical">
<com.example.gridcollagelayouts.SquareLayout
android:id="#+id/llSelectedLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:centerInParent="true" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:below="#+id/llSelectedLayout" />
</RelativeLayout>

how to have 2 relative layouts divided by half in activity?

i want to divide my screen in half vertically, and do a different color in each half,
i was trying to use this solution mentioned in here>
Android: 2 relative layout divided in half screen
but it doesn't work for me.
this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activities.alignmentActivities.Add_New_Project_Activity"
tools:showIn="#layout/app_bar_add__new__project_">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#f00000"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:background="#00b0f0"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
how can i achieve the desired effect of 2 layouts each takes half the screen vertical \ what am i doing wrong then the example mentioned in the link ?
You may Try to use this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#f00000"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:background="#00b0f0"
android:layout_height="match_parent"
android:layout_weight="1">
</RelativeLayout>
Output :
Add the following attribute in your LinearLayout
android:weightSum="2"
After adding this your code will work.
WeightSum attribute defines the total number of equal divisions you want it to be divided.If you want it to be divided into 3 parts, change its value as 3.
<?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="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/red">
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/white">
</RelativeLayout>
</LinearLayout>
**Preview Image Link**
[1]: http://i.stack.imgur.com/6JKTP.png
If you want to divide screen vertically than you need to use android:orientation="vertical" and in child layout use android:layout_width="match_parent"
check below xml,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical"
android:weightSum="2"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#f00000" >
</RelativeLayout >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00b0f0" >
</RelativeLayout >
</LinearLayout >

Categories

Resources