Unwanted Margin in Layout with TabHost - android-layout

I'm relativity new to Android development, but I do like to think I catch on fast. I've been re-working an app I made for my softball team. Previously I've used Google's App Inventor, but have run into many shortcomings with it, so I am now attempting to re-work it using Eclipse.
Anyway, to the point. I seem to be having some excess padding being added to my LinearLayout, which I'm not sure where it is coming from.
I am using the TabHost to create the tabs on top (a modified version of Google's Tabs example).
Layout XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_linlay_parent"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
>
<!-- Allow the "Tabs" to scroll horizontally -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none"
>
<!-- The "Tabs" widget -->
<TabWidget
android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
/>
</HorizontalScrollView>
<!-- Provide the "Content" the ability to vertically scroll -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="65dp"
>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="#+id/tabdata"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</LinearLayout>
</FrameLayout>
</ScrollView>
</RelativeLayout>
</TabHost>
</LinearLayout>
I believe the issue has to with the android:layout_marginTop="65dp" in the ScrollView, but if I remove it, my Tabs disappear (I'm assuming my tabcontent is just being overlayed over the top of it).
Lastly, here's a screen shot showing an example of what I'm experiencing (Disreguard the XML string, I still need to massage that part. I just wanted to show an example with data.).
http://kahunaball.com/android/screenshot_0.jpg

After starting the XML over from scratch and taking small steps forward, I was able to re-work the XML and resolve the excess padding from my layout.
I'm not 100% sure which change made the difference, but my suspicions are that changing the RelativeLayout to LinearLayout and moving the LinearLayout and TableLayout outside of the FrameLayout were what had done the trick.
For others that may stumble across this and would like to see my new XML which resolved the issue, here it is:
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000" />
</HorizontalScrollView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/tabdata"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal" />
<TableLayout
android:id="#+id/myTableLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#33B5E5" />
</FrameLayout>
</HorizontalScrollView>
</ScrollView>
</LinearLayout>
</TabHost>

Related

Two vertical Linear Layouts and want one wider than the other

I have a layout that is a relativeLayout that contains 2 vertical Linear layouts. Each of the linear layouts is using equal width. The orientation is landscape and I would like to make the first Linear layout to use 2/3 of the layout and the second linearlayout use the other 1/3.
I am not well versed in XML. My background has been in Visual Basic and now moving to Java using Android Studio.
Here is the XML for the layout of activity.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:layout_weight="3"
android:background="#color/colorBackgroundGray"
tools:layout="#layout/fragment_select_item"
tools:context="com.myCompany.myProduct.activities.ReturnAreaActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<FrameLayout
android:id="#+id/FragmentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<include
android:id="#+id/include2"
layout="#layout/frm1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="left"
android:layout_weight="1.7" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:orientation="vertical">
<include
android:id="#+id/include"
layout="#layout/layout_numpad5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="220dp"
android:layout_weight="1.3"
android:layout_gravity="right"
/>
</LinearLayout>
</RelativeLayout>
The weight is something I just tried. Any ideas?
Try Below basic logic it will work fine in your case
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="First Linear Layout"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Second Linear Layout"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
Output :
To change orientation (If you wan't layouts side by side) just change value or android:orientation="vertical" to android:orientation="horizontal".
OUTPUT :

In Android Programming,what is the point of layout_width if it does nothing?

Changing android:layout_width in the below xml to any value (like 99999dp for eg) does not seem to do anything when i run the emulator via android studio.
<?xml version="1.0" encoding="utf-8"?>
<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="horizontal">
<EditText android:id="#+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send" />
</LinearLayout>
Your EditText has android:layout_weight="1". When using weights the width is not taken in account and should be set to 0. If you remove the weight you should be able to set the width as desired.

Android Material Design Toolbar and FAB Button crossing over

In the Google's Material Design specs they often shown the Floating Action Button lying over half the toolbar and have over the content.
http://www.google.com/design/spec/components/buttons-floating-action-button.html
But I have tried a few variations and there is still a gap between the toolbar and content, caused by the button.
<LinearLayout>
<include layout="#layout/toolbar" />
<include layout="#layout/fab_button" />
<ScrollView>
Content
</ScrollView>
</LinearLayout>
I have also tried placing both toolbar and FAB button in a FrameLayout and it also had the gap.
The FAB button code was taken from Google's samples, and I haven't had issues with having it overlap at the bottom of over a RecyclerView.
Is there a way to achieve this look shown in the Material Design Specs.
Add layout_anchor property in FAB and set it to Top View.
Make CoordinatorLayout as your root view, this would be best layout practice.
You can set FAB gravity using layout_anchorGravity attribute in FAB.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#android:color/holo_blue_bright"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#android:color/holo_green_light"
android:orientation="horizontal"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_done"
app:layout_anchor="#id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Check this out.
Hope this could help you.
Using Relative layout is the easiest to position a FAB in between 2 views. You can use elevation parameter for the fab to get it over the toolbar. Set the elevation of the FAB more that that of the toolbar.
<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"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<ListView
android:id="#+id/listview"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/favorite"
android:layout_alignBottom="#+id/toolbar"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:elevation="8dp"
android:layout_marginBottom="-32dp"
fab:fab_icon="#drawable/ic_favorite_outline_white_24dp"
fab:fab_colorNormal="#color/accent"
fab:fab_size="mini"
/>
</RelativeLayout>

GridView elements horizontal spacing not working at all

So here's how my grid view looks like:
a http://imageshack.com/a/img41/7857/roir.png
I use some online JSON parsing and get the image thumbnail links and then pass it on as an array to the custom adapter and it sets images for which I again use some 3rd party library etc. But the 3rd party library is just used to set the image to the imageview. That's it.
So I have a main FragmentActivity. It has 2 fragments inside of it. The textbox u see there is inside one fragment(search fragment) and on top of it, the gridview is held by the second fragment. (results fragment)
Code for the results fragment:
<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:background="#f0f0f0"
tools:context="com.example.wikipicsearch.MainActivity" >
<GridView
android:id="#+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:gravity="center"
android:numColumns="auto_fit"
android:verticalSpacing="5dp"
android:drawSelectorOnTop="true"
android:stretchMode="columnWidth" >
</GridView>
</RelativeLayout>
Code for the layout that I pass onto the custom Adapter:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp"
android:clickable="true"
android:background="#drawable/grid_color_selector"
android:focusable="true">
<ImageView
android:id="#+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="0dp"
android:layout_gravity="center" >
</ImageView>
</LinearLayout>
Now, I have no clue why on earth is there no horizontal spacing between each of that linear layout. I tried using android:layout_marginLeft etc etc... nothing works at all! I made the fragment holding the gridview look grey so that the each element in the grid will leave some spacing and it should look good. Please help me out with this. TIA!
Android:horizontalSpacing="20dp" this doesn't work, if you have a fixed size in the root element (ex- card) of the item layout that you are setting for the grid
Set the width like this - android:layout_width="match_parent"
Activiy layout
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".views.legacy_grid_view.LegacyGridActivity">
<GridView
android:layout_height="match_parent"
android:id="#+id/legacyGrid"
android:background="#color/teal_700"
android:layout_width="match_parent"
android:numColumns="2"
android:horizontalSpacing="20dp"
android:verticalSpacing="20dp"/>
</LinearLayout>
Item layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="200dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="60dp"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/presence_away" />
<TextView
android:id="#+id/legacyGridEmail"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:text="Email"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Result

How do I load two fragments vertically in the same layout?

I am making an app for my university's SafeWalk program and I am trying to make an activity that will display a map fragment with a button bar below it with emergency call buttons. The problem I am running in to is that when I load the following layout file, only the map fragment is displayed, and not the buttons along the bottom.
Note: I am also using a navigation drawer in this layout so I have included that code in case it is conflicting.
I have tried changing the layout_width and layout_height values of the two parent FrameLayouts
and I only can obtain one of two results, a full page of map, or a full page of my buttons (stretched to the top). I can attach the layout for the CallButtonFragment if necessary, but it is a horizontal linear layout with the button bar style containing two buttons.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/content_frame" >
<fragment
android:id="#+id/titles"
android:name="edu.purdue.SafeWalk.CallButtonFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
Following the suggestion of Android-er-naut below, I have this result:
(It is an improvement, but the buttons need to be a bit larger and fit the width of the screen.)
How about this -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/titles"
android:name="edu.purdue.SafeWalk.CallButtonFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>

Resources