I am trying to create a layout with an embedded google map fragment and some information about selected markers below the map. I want the information below the map to only take up the space that it needs and give the rest of the space to the map.
As far as I understand it, layout_weight assigns extra space to the different widgets proportional to value given. So if I have a widget with layout_weight = 1, and another widget with layout_weight = 0 the first widget will take up all the extra space, and the second will only take what it needs. So if I give the second widget layout_height = wrap_content, then I should get what I want. However, this doesn't seem to be the case in practice. I have changed a lot of the values, and either one of the widgets take up all the space, or neither take up any. The only way I have been able to get them to show up normally is by setting the layout_height of the second widget to a specific value.
This may be part of the issue, but I am populating the widgets map_frag_event_icon, map_frag_person, and map_frag_event_details dynamically.
layout.xml
<?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="0dp"
android:layout_margin="#dimen/fragment_margins"
android:orientation="vertical">
<fragment
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map_frag_google_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingBottom="#dimen/fragment_margins"
tools:context=".fragment.MapFragment"/>
<LinearLayout
android:id="#+id/map_frag_event_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/map_frag_event_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/icon_padding"
android:layout_weight="0" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/map_frag_event_person"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size"/>
<TextView
android:id="#+id/map_frag_event_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
strings.xml
<resources>
<string name="app_name">Family Map</string>
<string name="title_activity_maps">Map</string>
<dimen name="fragment_margins">8dp</dimen>
<dimen name="horizontal_layout_padding">8dp</dimen>
<dimen name="vertical_layout_padding">4dp</dimen>
<dimen name="icon_size">48sp</dimen>
<dimen name="icon_padding">8dp</dimen>
<dimen name="text_size">20sp</dimen>
<dimen name="small_text_size">14sp</dimen>
<dimen name="large_text_size">24sp</dimen>
<dimen name="map_event_layout_height">120sp</dimen>
<dimen name="map_event_icon_size">40sp</dimen>
</resources>
EDIT
Here is the general design I am looking for, but I want the white space with the text to be as small as possible, and I want to create a setting to change the text size, so the the bottom white space should be dynamic.
Please give an explanation of what is going on along with a solution if you can.
In the fragment keep the android:layout_weight="1" but in the LinearLayout apply, for example, android:layout_weight="0.5". Check the outcome and then change the values according to your needs. Look at it a bit as relational percentages, so 1 to 0.5 would be 66% to 33%
Try with below layout :
<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map_frag_google_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/map_frag_event_layout"
android:paddingBottom="#dimen/fragment_margins"
tools:context=".fragment.MapFragment" />
<LinearLayout
android:id="#+id/map_frag_event_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/map_frag_event_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="#dimen/icon_padding" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/map_frag_event_person"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size" />
<TextView
android:id="#+id/map_frag_event_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Try below code:
<?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:layout_margin="#dimen/fragment_margins"
android:orientation="vertical">
<fragment
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map_frag_google_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:id="#+id/map_frag_google_map"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingBottom="#dimen/fragment_margins"
tools:context=".fragment.MapFragment" />
<LinearLayout
android:id="#+id/map_frag_event_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/map_frag_event_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/icon_padding"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/map_frag_event_person"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size" />
<TextView
android:id="#+id/map_frag_event_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Replace your xml code with this,
<?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="0dp"
android:layout_margin="#dimen/fragment_margins"
android:orientation="vertical">
<fragment
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map_frag_google_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:paddingBottom="#dimen/fragment_margins"
tools:context=".fragment.MapFragment"/>
<LinearLayout
android:id="#+id/map_frag_event_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/map_frag_event_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/icon_padding"
android:layout_weight="0" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/map_frag_event_person"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size"/>
<TextView
android:id="#+id/map_frag_event_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size"/>
</LinearLayout>
</LinearLayout>
Your are setting weight to 1 for both the views. So
I found two issues with my original code that I posted. I don't know when I added that during my original testing, but there were two fatal errors. In the root LinearLayout I had layout_height = "0dp" and it should have been layout_height = "match_parent". And in the LinearLayout that contained the two TextViews, I had layout_height = "match_parent" and it should have been layout_height = "wrap_content".
With those two errors fixed, #MuhammadMuzammilSharif's original comment about removing layout_weight = "0" worked.
layout.xml
<?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:layout_margin="#dimen/fragment_margins"
android:orientation="vertical">
<fragment
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map_frag_google_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingBottom="#dimen/fragment_margins"
tools:context=".fragment.MapFragment"/>
<LinearLayout
android:id="#+id/map_frag_event_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/map_frag_event_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/icon_padding"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/map_frag_event_person"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size"/>
<TextView
android:id="#+id/map_frag_event_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Related
This is the code of the XML file of the 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"
tools:context="com.example.barda.wikirace.MainActivity"
android:background="#drawable/backgroundmain"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/activity_main"
>
<ImageView
android:id="#+id/wikiRaceTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
app:srcCompat="#drawable/wikiracetop" />
<TextView
android:id="#+id/emptyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/twoPlayersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/twoplayersbutton"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/singlePlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/playbutton"
android:onClick="startSinglePlayerMenuActivity"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
</LinearLayout>
</LinearLayout>
This is how it looks in the preview:
And this is how it appears on the device (LG G4):
What can cause the problem?
As you can see, I want the buttons to be on the right color for them.
why don't just use the constraint layout?
if you want to do it in the way you're doing it, you will have to setup the width with a fixed value or match_parent why? because when you say wrap_content and the image is big is going to be over the other views as is happening also you can setup a android:layout_weight for the button if you want to use the weight as "control" for your layout, be coherent with the method that you use to adapt the views.
I want a layout like this
Layout where an image at the bottom and two text block at right
It's a very simple layout with an image at left and two text blocks at right. I know how to do this in html and CSS but no idea how to do this in XML. What are the properties to float elements left or right? Right now if I add an image and two text blocks, the second text block is not shown.
Try this code, I've tested it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"/>
</LinearLayout>
<?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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
</LinearLayout>
Edit it on your own :)
You can use a relative layout for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView android:id="#+id/img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_clear"/>
<TextView android:id="#+id/text1"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/img"
android:layout_toRightOf="#+id/img"
android:layout_width="match_parent"
android:text="text 1"/>
<TextView android:layout_below="#+id/text1"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/img"
android:layout_toRightOf="#+id/img"
android:layout_width="match_parent"
android:text="text 2"/>
</RelativeLayout>
Is there any way to Design In Android Studio, to Design edittext with multipleScreen support without using padding and margin in .xml?
My code is not supporting the multiple screen(it exceed the screen). Please help me to design a code which support multiple screen inside screen.
mostly desin should not be designed using padding and margine.
<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"
android:layout_gravity="center_horizontal|center"
android:gravity="center_horizontal|center_vertical"
android:weightSum="3"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="MOBILE"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_weight="1"
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"></LinearLayout>
Create your interface by code and set its elements size on px, so you will never have any hardcoded dimension and it will look OK in all screens.
Take a look at this
Hope this helps.
Whenever you are using weights with VERTICAL LinearLayout, give the height of child 0dp.
Try this code:
<?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"
android:weightSum="3">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile"
android:layout_centerInParent="true"/>
</RelativeLayout>
Hope it helps.
Thank you
I want to have the following layout :
But when I run the code the first linear layout which contains a relative layout and an image is shown correctly.
Then there is the "view pager" but it is not on the screen.
and then there is a text box and a button which are there too.
So why my view pager is missing?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
tools:ignore="NestedWeights,ContentDescription" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:src="#drawable/sp_page_name"
tools:ignore="ContentDescription" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:padding="#dimen/product_views_horizontal_padding"
tools:ignore="NestedWeights" >
</RelativeLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_sharepoint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/TODO"/>
<TextView
android:id="#+id/sharepoint_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sharepoint_description"
tools:ignore="SelectableText" />
<ImageButton
android:id="#+id/sp_more_info"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/more_info_icon"
android:layout_gravity="left"
android:onClick="sp_more"/>
</LinearLayout>
</ScrollView>
The height of your ViewPager is android:layout_height="wrap_content".
So if your ViewPager doesn't contain other views, it won't be visible.
Well, I found out that scrolling views do not work very good together.
For my layout I solve the problem by changing the height and width of the viewpager to static sizes. Actually I defined some different sizes in my dimen.xml files for different screen sizes and use them for the height and width of my view pager.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
tools:ignore="NestedWeights,ContentDescription" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:src="#drawable/sp_page_name"
tools:ignore="ContentDescription" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:padding="#dimen/product_views_horizontal_padding"
tools:ignore="NestedWeights" >
</RelativeLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_sharepoint"
android:layout_width="#dimen/viewpager_width"
android:layout_height="#dimen/viewpager_height"
android:contentDescription="#string/TODO"/>
<TextView
android:id="#+id/sharepoint_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sharepoint_description"
tools:ignore="SelectableText" />
<ImageButton
android:id="#+id/sp_more_info"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/more_info_icon"
android:layout_gravity="left"
android:onClick="sp_more"/>
</LinearLayout>
</ScrollView>
I am currently trying to work out how to align certain elements within my Android app's GUI.
Please see the image link below, the first layout is the current one, and the second is what I am aiming for.
Currently, I am using two linear Layouts. I have tried to use relative and table layouts for the right hand buttons and EditText, but always the EditText is shrunk, or overflows the tablet's screen size.
Thanks for your help!
Image Link: (http://postimage.org/image/pptkdkomx/)
Try this:
<?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" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5" android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5" android:text="Button2"/>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
Why don't you use RelativeLayout and on your EditText use android:layout_alignBottom="myImage"
Just brought together a quick template, you may need to fix + add your own attributes since I used only notepad:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>