Good Morning
Just want to ask why the layout of my Material Search bar now showing in the layout here is my code
<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=".ProductView">
<com.mancj.materialsearchbar.MaterialSearchBar
style="#style/MaterialSearchBarDark"
app:mt_speechMode="true"
app:mt_hint="Custom hint"
app:mt_maxSuggestionsCount="10"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/searchBar" />
</RelativeLayout>
Here are the screenshots of what the layout looks like:
Its because the third party library used element which is may not present in your project.
In your case it should be constraintlayout
I just added
implementation 'androidx.constraintlayout:constraintlayout:1.1.2'
and the view is visible for me. But its not necessary for your project if you are not using it in other areas.
Related
I'm implementing a Navigation View on my activityHome for the first time. When i run the app and enter the home activity it function well. The problem is at the XML editor on the android studio, the Nav View is above all the other elements and doesn't let me click on them.
I haven't touch anything else but these yet.
Thanks.
XML CODE:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/dl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:fitsSystemWindows="true"
tools:context=".activities.HomeActivity"
tools:openDrawer="start">
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
android:background="#color/colorPrimary"
app:menu="#menu/menu"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/iv_menu"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="?android:selectableItemBackground"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/guideline46"
app:layout_constraintEnd_toStartOf="#+id/guideline139"
app:layout_constraintStart_toStartOf="#+id/guideline135"
app:layout_constraintTop_toTopOf="#+id/guideline45"
android:elevation="10dp"
app:srcCompat="#drawable/menubuttonofthreelines_79781" />
...
and continues with the other elements.
Your layout has nothing wrong..
The reason that Android Studio shows that the drawer layout in the Open state in the design view because you set tools:openDrawer="start" in the DrawerLayout .. if you want to see the main layout in the design mode (i.e. to make the drawer in the close state), then you need to remove this attribute.
This attribute won't affect the looking of your app when you launch it.
Documentation:
You can insert sample data in your layout preview by using the tools: prefix instead of android: with any attribute from the Android framework. This is useful when the attribute's value isn't populated until runtime but you want to see the effect beforehand, in the layout preview.
XML tools namespace is just used to show you some behavior on Android Studio, but not while you run the app. Please check documentation for more info
I want to remove the extra space from the navigation bar to the bottom of my screen.
As you can see below:
My BottomNavigationView leaves some space below it and I have no idea why.
The layout that contains theBottomNavigationView is very simple:
<?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:id="#+id/layout"
tools:context=".NavBarActivity">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/menu"
android:background="#drawable/scroll_background"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#drawable/main_color_background"
app:itemIconTint="#color/secondaryTextColor"
app:itemTextColor="#color/secondaryTextColor"
app:menu="#menu/nav_items" />
</RelativeLayout>
I have checked that the problem is not coming from the custom background of the nav bar (I have checked it with some simple color and I got the same results)
Any ideas on why this is happening and how can I prevent it from happening?
Why your navigation background is circular?
Have you used main_color_background for circular background?
Remove that background which is making it circular and try it again. May be you have added some padding/margin in those background, which are leaving space.
So this is a funny solution:
In my phone, (galaxy j7 pro-2017) by default, there is some kind of black thin frame around every app and well, everything.
So I never had a problem, it just the way the phone is made.
Assuming you did not modify any properties in style.xml, the Layout Editor in Android Studio displays the Action Bar as:
By adjusting the style of the action bar, I can do things like adjust the background color of it.
However, the ActionBar I use is a Toolbar that uses a custom layout that can not be expressed simply by adjusting the properties of the action bar, as shown below.
It is not difficult to apply the above layout to the Action Bar during runtime. (change custom view, or apply AppTheme to NoActionBar, then set SupportActionBar)
What I really want is that the AppBar with these custom layouts will print out all of the xml inside the project I'm working on, but I have not found the right answer for it so far.
Is this an operation not supported by the Android studio?
You can achieve this via ToolBar & FrameLayouts,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
//TextView
//ImageView
// etc
</LinearLayout>
</android.support.v7.widget.Toolbar>
</FrameLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize">
</FrameLayout>
Organize your host activity layout as above and load fragments inside the main_container
I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!
I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>
When I add the RecyclerView to the layout, it shows up as a blank screen. Is there a way, such as through the tools namespace, to show a preview of the content of the RecyclerView?
#oRRs is right !
I'm using Android Studio 1.4 RC2 and you can now specify any custom layout.
I tried a custom CardView and it works.
tools:listitem="#android:layout/simple_list_item_checked"
Android tools and LayoutManager
tools namespace enables design-time features (such as which layout to show in a fragment) or compile-time behaviors (such as which shrinking mode to apply to your XML resources)
It is really powerful feature that is developing and allows you not compile code every time to see changes
AndroidX[About] and GridLayoutManager
implementation 'androidx.recyclerview:recyclerview:1.1.0'
<androidx.recyclerview.widget.RecyclerView
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:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
tools:listitem="#layout/item"
tools:itemCount="10"
tools:orientation="vertical"
tools:scrollbars="vertical"
tools:spanCount="3"/>
Support library and LinearLayoutManager
implementation 'com.android.support:recyclerview-v7:28.0.0'
<android.support.v7.widget.RecyclerView
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"
tools:layoutManager="android.support.v7.widget.LinearLayoutManager"
tools:listitem="#layout/item"
tools:itemCount="3"
tools:orientation="horizontal"
tools:scrollbars="horizontal" />
Another cool feature that was introduced in Android studio 3.0 is predefining a data through the tools attributes, to visualised easily your layout structure using #tools:sample/* resources
item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="100dp"
android:layout_height="150dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="10dp"
android:orientation="vertical"
tools:background="#tools:sample/backgrounds/scenic">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
tools:text="#tools:sample/first_names" />
</FrameLayout>
Simulator results:
First, add the following line in your item XML to made a preview of your list while you edit your item:
tools:showIn="#layout/activity_my_recyclerview_item"
And them, add the following line in your RecyclerView XML to preview how your item will look in your list:
tools:listitem="#layout/adapter_item"
As of Android Studio 1.3.1 it shows default list items in the preview but it doesn't let yout specify your own yet. Hopefully, it will come.
If you have already a custom_item layout:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
...
...
**tools:listitem="#layout/name_of_your_custom_item_view"**
...>
</androidx.recyclerview.widget.RecyclerView>