I have a weird issue where my design does not render correctly in my emulator? I have tried editting activity_main.xml and it only lets me place items in specific areas and no free move. content_main.xml allows me to free move items but they render completely different.
I am new to Android Studio and want to spend time learning it but I have met this hurdle.
Here is an example of what it looks like...
(Left - Android Studio, Right - Emulator)
Image Example
<?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="com.nathankent.design2.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
<include layout="#layout/content_main"
android:id="#+id/include" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="Sign In"
app:layout_anchor="#+id/include"
app:layout_anchorGravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="Button"
app:layout_anchor="#+id/include"
app:layout_anchorGravity="center_vertical|center_horizontal" />
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress" />
</android.support.design.widget.CoordinatorLayout>
From your questions i can understand you're using new Android studio. So maybe it using constraints layout make sure you're giving constraints for both horizontal and vertical. Otherwise it'll display like this Constraints layout
Related
Im totally new to android studio and tried creating a simple app. When creating the project, I chose "Tabbed Activity" which is working as intended.
But when I go to the Design manager and add a button, it is not possible to move it using the mouse because it disappears as soon as I try to move it.
As said, Im totally new to this and written/youtube guides didn't help me either.
Feel free to ask for any information if you need it.
Thanks in advance.
EDIT:
This is my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.RiseUpdates.AppBarOverlay"
android:background="#color/light_gray">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabSelectedTextColor="#color/rise_orange"
app:tabTextColor="#color/white"
app:tabBackground="#color/light_gray" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dark_gray"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Your ViewPager have attributes:
android:layout_width="match_parent"
android:layout_height="match_parent"
It means, that it takes all space in your CoordinatorLayout. And as the result, you button is hided under the ViewPager.
I'm pretty new with Android. I'm trying the understand the look that is shown from the auto-generated xml code when creating Basic Activity project.
The files that are auto generated:
1.activity_main:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
2.content_main:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The way i understand xml, i expected not to see the FloatingActionButton widget at all, because when including content_main , the root of the content_main xml has attributes android:layout_width="match_parent" and android:layout_height="match_parent", so this xml should take all the place that is left in the main_activity xml (after placing his first child: the Toolbar). Instead according to android designer it seems that the content_activity contains the FloatingActionButton, how is it possible? isn't it brother of content_activity and son of the root CoordinatorLayout?
attached a screen shot to emphasize the situation:
You should read about how 'CoordinatorLayout' View Work and the same concept of it is FrameLayout is support 'z-index' position .
so when the auto generate layout is overload is accept because the reason i mention it .
Try switch between :
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
to be show as :
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
<include layout="#layout/content_main" />
if floationButton not show , that's mean it'w work in z-index .
I am getting this error log since I changed a few things at my floating action button (and added another one) :
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_assets_overview" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp"
app:tint="#color/white"
app:backgroundTint="#color/colorFABadd"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabRemove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_remove_white_24dp"
app:tint="#color/white"
app:backgroundTint="#color/colorFABremove"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabHint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="124dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_lightbulb_outline_white_24dp"
app:tint="#color/white"
app:backgroundTint="#color/colorFABhint"/>
Can somebody please tell me what I did wrong? I guess it has something to do with the color change. Thanks.
This fixed it for me:
1) Declare the XML namespace's at the top of the XML file:
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
2) Declare your Floating Action Button as so:
<android.support.design.widget.FloatingActionButton
android:id="#+id/myID"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:backgroundTint="#color/myColour"
android:src="#drawable/myIcon"
I hope that this helps.
I'd like to have a content area below my Toolbar. Its behavior should be to scroll while scrolling up and to enter immediately while scrolling down. Toolbar should stay on its place without any scrolling.
My layout is like that:
<?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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<RelativeLayout
android:id="#+id/box_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/text_search_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Line 1"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_filter"
android:text="Line 2"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_category"
android:text="Line 3"
android:textColor="#FFF" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
If I put content area above Toolbar I am able to get the desired effect, but obviously it's in the wrong position.
If I put content area below Toolbar nothing scrolls...
If I put content area above Toolbar I am able to get the desired
effect, but obviously it's in the wrong position.
Of course it is in the wrong position since: http://www.google.com/design/spec/layout/structure.html#structure-app-bar
The app bar, formerly known as the action bar in Android, is a special
kind of toolbar that’s used for branding, navigation, search, and
actions.
So, you need to add a CollapsingToolbarLayout and the contents on it.
And:
I'd like to have a content area below my Toolbar. Its behavior should
be to scroll while scrolling up and to enter immediately while
scrolling down, Toolbar should stay on its place without any
scrolling.
To not to scrolling the Toolbar after adding that CollapsingToolbarLayout, you may want to add app:layout_collapseMode="pin" to that Toolbar.
Update:
Since my original suggestion did not work, another method to achieve the desired outcome would be to break out the Toolbar from the CoordinatorLayout. You can structure your layout XML as follows:
<?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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<RelativeLayout
android:id="#+id/box_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/text_search_filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Line 1"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_filter"
android:text="Line 2"
android:textColor="#FFF" />
<TextView
android:id="#+id/text_search_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_search_category"
android:text="Line 3"
android:textColor="#FFF" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
If it's still not working, you should consider not using the include statement as this might be the source of the issues. Rather, bring in the layout definition directly into this layout and place under a NestedScrollView (apply app:layout_behavior="#string/appbar_scrolling_view_behavior" to this NestedScrollView). If you need additional help, post the contents of your content_main layout XML in your OP.
Original Response:
Make sure you define the app:layout_behavior for your main content, which defines that the scrolling of the main content should affect the AppBarLayout. Specifically, try this:
<include layout="#layout/content_main"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I'm very new to Android and I intended to post this to the Android Developers - Google Groups but they seem to say that newbies need to post to Stack Overflow. So I'm here.
I downloaded the most recent version of Android Studio 1.4.1 yesterday, and I followed the instructions on Building Your First App. I did everything up to Starting Another Activity. It seems these instructions are a bit old i.e. for a previous version of the SDK, because they do not reference CoordinatorLayout and AppBarLayout though they appear in the code if you follow the steps. Obviously, I did make minor changes in the code to get this app to work, but not completely.
My Problem: If you look at the images at the bottom of Starting Another Activity you will see that both of them have the title My First App. In my modifications of the code, I could not get this title on both the images/screens. (I should mention that I want to use the more recent version of AppBarLayout and CoordinatorLayout)
Let's focus on the first screen, the activity_my.xml is
<?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"
android:fitsSystemWindows="true"
tools:context=".MyActivity">
<include layout="#layout/content_my" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
As mentioned at the bottom of Building a Simple User Interface the content_my.xml looks like:
<?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"
android:onClick="sendMessage"/>
</LinearLayout>
Is there anyway, I can add the AppBarLayout to the activity_my.xml. I have tried something like:
<?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"
android:fitsSystemWindows="true"
tools:context=".MyActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_my" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
The problem with this is that the content in content_my.xml goes behind the Toolbar of AppBarLayout rather than below it. Any ideas how to fix this issue?
Layouts in a CoordinatorLayout need to define a layout_behavior. Change your content to 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<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"
android:onClick="sendMessage"/>
</LinearLayout>