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.
Related
I have updated my android studio. In my layout preview my design is not showing it says
NOTE: One or more layouts are missing the layout_width and layout_height attributes, required in most layouts.
OR: Automatically add all missing attributes. There is no error in application. It's running well. I have uninstalled my android studio but same issue occurred. In all my projects occurs the same issue.
I have updated SDK as well.
Here is layout.xml
<?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:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinate_layout_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_series"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.NestedScrollView
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.support.v4.widget.NestedScrollView>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<ProgressBar
android:id="#+id/pb_product"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
<TextView
android:id="#+id/tv_no_record"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="No record Found"
android:textSize="18sp"
android:visibility="visible" />
</RelativeLayout>
<!-- <android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EEEEEE"
android:clipToPadding="true"
android:visibility="gone"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:orientation="vertical">
<include layout="#layout/bottomsheet" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>-->
<View
android:layout_width="match_parent"
android:layout_height="60dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btn_add_tocart"
style="#style/Base.Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:backgroundTint="#863029"
android:text="Add To Cart"
android:textAllCaps="false" />
</RelativeLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
This happens to me sometimes. What I do to fix this is to check styles.xml from res folder and check that the style AppTheme is correctly defined.
For example, if I want my app style to be without action bar, I use this as AppTheme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
and add required items such as colorPrimary etc.
Then after rebuilding the gradle I usually can see my layout design again
One of the possibility is that your Theme changes. Try changing it to Material -> Dark in the Preview view.
Link to the similar topic:
android studio preview not displaying? version 1.5.1
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
I have a activity_pic.xml layout which includes content_pic.xml to define the layout of my app. The activity_pic.xml is below:
<?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="com.example.olivia.myapplication.PicActivity">
<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_pic" />
</android.support.design.widget.CoordinatorLayout>
content_pic.xml is
<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
When I include the line <include layout="#layout/content_pic" /> within the AppBarLayout (that is, I move it up two lines) the button appears, and all the functionality of the button works. However when I put it after that, the button does not appear, and all I can see is the 'App Bar' bit of the layout.
Ok so the picture below shows how I would like it to look (and how the design view shows content_pic.xml)
And here is what it actually looks like
However, when I put the <include layout="#layout/content_pic" /> into the AppBarLayout I can see the button, as shown in the image below.
I have tried taking the content of content_pic.xml and including it directly instead of using the include statement, this still does not appear.
I've run out of ideas here - can anyone suggest what might be going wrong?
AppBarLayout works good if you us NestedScrollView or RecyclerView
so I suggest you change your content_pic.xml TO.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
I hope this will Help.
EDIT
You Just need to Change your content_pic.xml to this
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
<!-- Importent -->
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
EDIT: See Using the Master/Detail template in ViewPager Fragments (download link) for full code
I have a toolbar and a recyclerView. When the layout is first inflated the last item of the recyclerView is out of the scroll-able region of the screen and is therefore not visible. After rotating the item appears. It is apparent that the toolbar is pushing the recyclerView outside the boundaries of the screen. If I add padding to the bottom of the recyclerView with the height of the toolbar the issue is resolved BUT only for the initial inflation of the layout. After rotation I am left with a gap on the bottom of the screen. I'm using sdk 23.
A possible workaround would be to programmatically remove the padding after the very first inflation of the layout. I assume I could use:
onCreateView(){ if (onSaveInstanceState != null) removePadding();}
However, I'd rather not have to do a dodgy work-around.
My app is basically exactly the same as the Master/Detail-flow template supplied in Android Studio, except that I use fragments and a single Activity. There is no such issue in the template.
Any ideas?
fragment_item_list.xml
<?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">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/item_list" />
</FrameLayout>
<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>
item_list.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView 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/item_list"
android:name="com.idragonit.scrolltabs.ItemListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layoutManager="LinearLayoutManager"
tools:context="com.idragonit.scrolltabs.ItemListActivity"
tools:listitem="#layout/item_list_content" />
item_list_content.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="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:textAppearance="?attr/textAppearanceListItem" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:textAppearance="?attr/textAppearanceListItem" />
</LinearLayout>
snippet of ItemListFragment.java
Toolbar toolbar = (Toolbar) root.findViewById(R.id.toolbar);
toolbar.setTitle("List");
I added:
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"
to item_list.xml. The issue persists. The first time the layout is inflated it shows the bottom element as expected. After rotating to landscape and back to portrait it leaves a margin the size of the actionBar at the bottom of the screen.
This issue does not happen in the Master/Detail-flow template available in Android Studio and the code for item_list.xml, item_list_twopane.xml and activity_item_list are exactly the same as the code used in item_list.xml, land/item_list.xml and fragment_item_list.xml in my project. Yet, as the attached images show, the preview of the AppBar shows the flexible space in the Android template but not my code.
EDIT: When I click on the reference for "?attr/actionBarSize" in the template it navigates to a different line in android SDK's values.xml, which starts with <declare-styleable name="AppCompatTheme">. The same line of code in my app references a different line starting with<declare-styleable name="Theme">.
Screenshots:
<?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"
android:background="#color/white"
android:orientation="vertical">
<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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/item_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:scrollbars="vertical" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_add"
app:backgroundTint="#color/colorPrimary" />
</android.support.design.widget.CoordinatorLayout>
You must add
android:layout_paddingBottom="?attr/actionBarSize
Instead of
android:layout_marginBottom="?attr/actionBarSize
This works for me
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>