How would I add rectangular boxes on top of my google maps? - java

I would like to add 3 boxes on top of the Google Map to hold some text starting from the bottom stacked on top of each other.
Note: <Button> is what I'm using to test out if anything will appear on the google maps. It turns out that nothing appears.
Am I on the right track to achieving what I want? What should I change?
Here's activity_maps.xml:
<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="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:id="#+id/searchBar"
android:layout_width="289dp"
android:layout_height="wrap_content" />
<Button
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:onClick="onSearch"
android:text="SEARCH" />
</LinearLayout>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.mancj.example.MapsActivity">
</fragment>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_marginBottom="20dp"
/>
</LinearLayout>


Alright, try this
<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">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.mancj.example.MapsActivity">
</fragment>
<LinearLayout
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<EditText
android:hint="Search"
android:id="#+id/searchBar"
android:layout_width="289dp"
android:layout_height="wrap_content" />
<Button
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:onClick="onSearch"
android:text="SEARCH" />
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/button2"/>
</RelativeLayout>

Related

My XML code keeps crashing my app, what is wrong with it?

I dont know what wrong with it but it's just crashing my app, if you need i will post my java code later cause stack isnt letting me to do it now.When i comment EditTexts it working fine but not as needed so i believe something is wrong with it
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
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=".MainActivity">
<EditText
android:id="#+id/A"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="number"/>
<EditText
android:id="#+id/B"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="number"/>
<EditText
android:id="#+id/C"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="number"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/calculate"
android:text="calculate"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/output"
/>
</androidx.core.widget.NestedScrollView>

(Nested)ScrollView can have only one direct child. Basically, ScrollView takes care of scrolling but needs just one element to scroll.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
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=".MainActivity">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/A"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="number"/>
<EditText
android:id="#+id/B"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="number"/>
<EditText
android:id="#+id/C"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="number"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/calculate"
android:text="calculate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/output" />
</LinearLayout >
</androidx.core.widget.NestedScrollView>

How can I make a layout with multiple fixed views with two of them getting fixed at top with scrolling in Android

<?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"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/lnrUpper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/lnrUpSide"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/purple_200"
android:orientation="vertical" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/lnrUpSide"
android:background="#color/white">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:fitsSystemWindows="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="225dp"
android:background="#FFF000" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/fixedHeader"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/black"
android:clickable="false"
android:focusable="false">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="FIXED HEADER VIEW"
android:textColor="#color/white"
android:textSize="24sp" />
</LinearLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fixedHeader">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp"
android:background="#F0FE">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FF0E">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/black">
</LinearLayout>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="125dp"
android:background="#color/purple_700">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="SECOND FIXED HEADER VIEW"
android:textColor="#color/white"
android:textSize="24sp" />
</LinearLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="1200dp"
android:background="#color/teal_700">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
</RelativeLayout>
This is my layout xml file and this is how it looks.
This is how my layout look in the first place
When I scroll the layout becomes like this.
Scrolled Layout
However, that is not what I want.
This is the layout I want when I scroll it completely
I was only able to take a screenshot from Android Studio because when I start this at phone the SECOND FIXED HEADER VIEW not got fixed at top. I have tried so many ways but I could not find a solution for this issue. Does anyone know how to make this view ?

Display 2 or more textviews in one row

I saw some same questions, but
I'm using android:orientation="vertical"
so I can't use orientation as horizontal.
How can I display 2 or more textviews on 1 row?
(Sorry for my english skills)
<?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=".MainActivity"
android:orientation="vertical"
android:background="#drawable/background"
android:weightSum="1">
<TextView
android:layout_width="62dp"
android:layout_height="28dp"
android:layout_gravity="right"
android:text="Sign in"
android:textColor="#7041EE"
android:textSize="20dp" />
<TextView
android:id="#+id/nwah"
android:layout_width="162dp"
android:layout_height="28dp"
android:layout_gravity="left"
android:text="New around here?"
android:textColor="#ACACAC"
android:textSize="20dp" />
</LinearLayout>
enter image description here

<?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=".MainActivity"
android:orientation="vertical"
android:background="#drawable/background"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Sign in"
android:textColor="#7041EE"
android:textSize="20dp" />
<TextView
android:id="#+id/nwah"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="1"
android:layout_gravity="left"
android:text="New around here?"
android:textColor="#ACACAC"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>

You can add another view for textView
<LinearLayout // vertical
<LinearLayout // hotizontal
<TextView/>
<TextView/>
<LinearLayout/>
<LinearLayout/>
or you can use Constraint layout

How to make imageView cross over out of layout?

Haii.... i need help to design my imageView from this screen shoot to be like this i need the imageView crossed from layout, i am using some of library in this activity like SlidingUpPanel and imageview from CircleImageView if i want to search in google what the keyword or anyone can give me any solution?
here is my layout.xml :
<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="100dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoShadowHeight="20dp"
sothree:umanoDragView="#+id/dragView"
tools:context="com.idiots_international.jajan.activities.nearby.NearbyActivity"
sothree:umanoOverlay="true">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_gravity="top"
android:layout_height="wrap_content"
android:orientation="vertical">
<fragment 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:id="#+id/map"
tools:context="com.idiots_international.jajan.activities.nearby.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment"/>
</LinearLayout>
<!--map/top view-->
<RelativeLayout android:id="#+id/nearbyRelLayout1" android:layout_width="match_parent" android:layout_height="wrap_content">
<!---->
<LinearLayout android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center"
android:src="#drawable/jajan_logo_3"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
<TextView
android:id="#+id/ShowAddressTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Click on Marker to view Address "
android:textColor="#000"
android:textSize="15dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"/>
<ScrollView android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</android.support.v7.widget.RecyclerView>
</ScrollView>
</LinearLayout>
<include layout="#layout/layout_bottom_navigation"/>
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
Working but need to remove the outline in here :

Try this,
<!--map/top view-->
<RelativeLayout
android:background="#android:color/transparent"
android:id="#+id/nearbyRelLayout1" android:layout_width="match_parent" android:layout_height="wrap_content">
<!---->
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/ShowAddressTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Click on Marker to view Address "
android:textColor="#000"
android:textSize="15dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"/>
<ScrollView android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</android.support.v7.widget.RecyclerView>
</ScrollView>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:src="#drawable/jajan_logo_3"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
</RelativeLayout>

Don't use white background for the parent of Circle image view, this will not let see background map.
You can implement this with following layout idea. Feel free to ask if you cant reach requirement
<?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:layout_width="match_parent"
android:layout_height="200dp"
// margin top half of circle image view height
android:layout_marginTop="40dp"
>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>

Try this way:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:background="#643122"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!--Your Top view (the map) goes here-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!--Your Bottom view (the text) goes here-->
</LinearLayout>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center"
android:src="#drawable/bg"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
</FrameLayout>
OUTPUT IMAGE

Android left side swipe menu with Toggle button

i'm trying to implement a toggle button with my side swipe menu but it isn't working I"m using tabhost and android.support.v4 widget.drawerlayout.
Don't really know where to start...
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<AnalogClock
android:id="#+id/circles"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.learning.Activities.MapsActivity" />
</FrameLayout>
</LinearLayout>
<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" />
</android.support.v4.widget.DrawerLayout>
Any help or guidance is much appreciated

#HawraaKalil Sorry I re-read and it isn't clear to me anymore haha so I see where you have gotten confused as well. What I was asking for was i could add the "Switch" to the side menu to replace the "Spinner" area from that Tutorial. But every time I try to use the actual side menu it crashes.
`<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/spinnerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:orientation="vertical">
<!--<Spinner-->
<!--android:id="#+id/drawerSpinner"-->
<!--android:layout_width="fill_parent"-->
<!--android:layout_height="0dp"-->
<!--android:layout_weight="1" />-->
<Switch
android:id="#+id/switchBitches"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bitches" />
</LinearLayout>
<LinearLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="vertical">
<TextView
android:id="#+id/drawerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp"
android:background="#DADADC"></View>
</LinearLayout>
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="0dp"
android:background="?android:attr/activatedBackgroundIndicator"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="50dp">
<ImageView
android:id="#+id/drawer_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/drawer_itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="0dp"
android:background="#DADADC"></View>
</LinearLayout>
</RelativeLayout>`

Categories

Resources