I'm using a viewpager to show fragments on my app, but I'm having some issues with the XML, I would like to fix my code because when I run the fragments, the viewpager doesn't show the the last part of the design, I'm using a listview on each fragment, and the last row is being cut. What do I need to change on my code to fix that?
Code:
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#c42542">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="8dp"
android:background="#d12240"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:text="Live rooms"
android:textColor="#ffffff"
android:textSize="18dp" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="23dp"
android:src="#mipmap/ic_share" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:src="#mipmap/ic_search" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<!-- Scrollable View -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Thank you.
Hey it seems this can occur when using ListView within the CoordinatorLayout, but you can fix it by simply changing it to a RecycleView. There's also a solution for Android 5.0+. Check out Sha's answer here for more info.
Assign bottom margin to Listview.
<ListView
android:paddingBottom= "20dp"/>
Related
Problem 1:
I have made my toolbar transparent but There is some sort of overlay effect which I don't want. How can I remove that effect? I have marked that place(1) in a sample image.
code for ToolBar:
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
ToolBarLayOut:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:background="#color/transparent"
android:minHeight="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/location_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location"
/>
<TextView
android:layout_toRightOf="#id/location_ic"
android:id="#+id/toolbar_title"
android:padding="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/custom_font"
android:text="서울 서초구 강남역 주변"
android:textColor="#color/colorWhite" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_arrow_drop_down"
android:layout_toRightOf="#id/toolbar_title"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Problem 2: I am using a scroll view with a child list view in my app. but the problem is when I am taping any white space(marked 2) o list item parent scroll is not working but when taping on images then the parent scroll works (Marked 3). only the child list view scroll is working which I don't want I want the parent scroll to work here.
AppBarLayout has StateListAnimator by default try setting it to null using below code
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
android:stateListAnimator="#null"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
I have a tablayout with 6 tabs. Tabs are fixed in the display but their text does not show completely. I do the solutions in here so that I can summarize them in these lines:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
But it did not solve my problem. I also use custom TabLayout in here and still I have the same problem.
Here are my codes:
I use a custom tablayout with this custom_tab.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:layout_centerHorizontal="true"
android:id="#+id/tabIcon"/>
<CustomViews.CustomTextView
android:id="#+id/basket_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:background="#drawable/notification_circle"
android:padding="2dp"
android:textColor="#ffffff"
android:textSize="8sp" />
<CustomViews.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/tab_inactive"
android:textSize="8sp"
android:layout_centerHorizontal="true"
android:layout_below="#id/tabIcon"
android:layout_marginBottom="2dp"
android:maxLines="1"
android:id="#+id/tabTitle"/>
</RelativeLayout>
The first ImageView shows the tab icon. The next ImageView is used for the badge and the CustomTextView is used for showing the tab title.
Here is my layout file include tablayout:
<?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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabMaxWidth="0dp"
android:layoutDirection="rtl"
android:id="#+id/avatar_tabLayout"
app:tabIndicatorColor="#null"
/>
</LinearLayout>
Is there a way to set up tab width with Maximum existence tab size? Or any other solutions?
Try to get rid off
app:tabGravity="fill"
app:tabMode="fixed"
in your <android.support.design.widget.TabLayout
Replace it with app:tabMode="scrollable"
I have take custom layout inside the toolbar and perform action according to it.
but in some case i want make toolbar transparent so when i have set app:elevation="0dp" than it will hide my custom layout but still action will performed when click on that area.
I have used following layout inside toolbar.
Edited
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="#null"
android:padding="#dimen/activity_vertical_margin"
android:src="#drawable/ic_menu" />
<FrameLayout
android:id="#+id/frmNotification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/iv_menu"
android:layout_toRightOf="#+id/iv_menu"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:padding="#dimen/padding_5">
<ImageView
android:id="#+id/iv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#null"
android:padding="#dimen/padding_5"
android:src="#drawable/ic_notification" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="#dimen/padding_5"
android:background="#drawable/bg_bage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/eight"
android:textColor="#android:color/white"
android:textSize="#dimen/font_8" />
</FrameLayout>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/frmNotification"
android:contentDescription="#null"
android:src="#drawable/logo_header" />
<ImageView
android:id="#+id/ivElasticSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingLeft="#dimen/padding_10"
android:paddingRight="#dimen/padding_15"
android:src="#drawable/ic_search" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
How to overcome this issue because in some scenario we want transparent toolbar but icon inside it should be display.
Here I have attached image how actually look like.
Your idea of app:elevation="someValue" is wrong, it does not hide the toolbar.The attribute app:elevation is used to show how much you want to make the toolbar or any other view that supports that attribute raised above the surface. Consider the surface as the floor on which the views are placed, now if you want to show some view like toolbar raised to other views you use that attribute.
if you want to make it transparent do it like this.
According to Material Design Guidelines, the elevation for appbar should be 4dp. So you should not set it to 0dp.
Use android:background="#null" instead of app:elevation="0dp".
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null">
EDIT
You want to remove the shadow of the toolbar. To do that use app:elevation="0dp" only for appbar layout. Your code before revision shows you used for both toolbar and appbar. Remove it for toolbar.
UPDATE
I tested the code and the following code seemed to do the work.
<?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:background="#drawable/testbg">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<!-- Rest of the code -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
OUTPUT IMAGE
I have the following code inside a CoordinatorLayout. What this code basically does is that it has two toolbars on top of one another See Image Here. What I plan to achieve is that when users scroll down, only the second toolbar collapses.
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_home_appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
app:theme = "#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar_filters"
android:background="#color/colorAccent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/category"
android:textSize="12dp"
style="#style/FlatButton"
android:id="#+id/toolbar_category_btn"
android:textColor="#android:color/white"
android:layout_height="wrap_content" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/filter"
android:id="#+id/toolbar_filter_btn"
android:textSize="12dp"
android:textColor="#android:color/white"
style="#style/FlatButton"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
You can use CollapsingToolbar layout to achieve this. Its one of the material design UI component they have released when you want to collapse any view over scroll. Follow the below link to understand how it works,
https://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
use toolbar instead of imageview in the example.
I have a view with some fragments and I created a snackbar with a slide animation on it. The animation works fine, but before it comes up a white window appears where the snackbar is going to appear.
It is happening because I am using setTranslationY on the view. I tried to put the background transparent but it did not work.
How can I solve it?
<RelativeLayout
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="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:id="#+id/pager_activity_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent">
<FrameLayout
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:layout_weight="1"
/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/black"
android:id="#+id/snackbar_container"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="normal"
android:id="#+id/snackbar_text"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyCustomTabLayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/bpBlue"
app:tabTextColor="#929292"
/>
</LinearLayout>
</RelativeLayout>
Did you build your own "snackbar"? Try to use this:
http://www.androidhive.info/2015/09/android-material-design-snackbar-example/
But your problem:
I think the problem is, that your add your "snackbar" in your linear layout! You set the visibility to "gone" and your bar will not use any space. On your animation you set the visibility to "visible". The linear layout will give you the space, which you need for you bar. You need to add the bar above your layout(also the tablayout)