I am having trouble getting the Toolbar and TabLayout to hide when I scroll up. I have 3 different xml files: 1) Toolbar, 2) TabLayoutFragment (here I have the TabLayout and ViewPager, and I include the toolbar here, and 3) HomeFragment (contains the RecyclerView). I need for the Toolbar to hide when I scroll up, and I have seen in many other posts that most people use a CoordinatorLayout instead of a Relative Layout or Linear Layout, and then they have to add app:layout_scrollFlags="scroll|enterAlways" which I have done, but I still can't get the Toolbar to hide when scrolling the RecyclerView up.
I've also added this to the RecyclerView, but still nothing... app:layout_behavior="#string/appbar_scrolling_view_behavior"
Could someone point out what is missing here?
Toolbar
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_events"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:fontFamily="#font/scriptbl"
android:text="Events"
android:textColor="#color/colorBlack"
android:textSize="60sp" />
<ImageView
android:id="#+id/search"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:contentDescription="#string/camera"
android:padding="10dp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/filter"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/search"
android:contentDescription="#string/camera"
android:padding="10dp"
android:src="#drawable/icon10_sort" />
<ImageView
android:id="#+id/options"
style="#style/SelectableIconThemeBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:contentDescription="#string/options"
android:padding="10dp"
android:src="#drawable/icon_short_text" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
TabLayoutFragment
<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:id="#+id/fragment_home_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:tag="Home"
tools:context=".Fragment.TabLayoutFragment">
<include
android:id="#+id/toolbar_events"
layout="#layout/toolbar_events" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#fff"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorColor="#000"
app:tabIndicatorFullWidth="false"
app:tabRippleColor="#android:color/transparent"
app:tabSelectedTextColor="#color/colorBlack"
app:tabTextColor="#color/colorBlack" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
HomeFragment
<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:id="#+id/fragment_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:tag="fragment_home"
tools:context=".Fragment.HomeFragment">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<TextView
android:id="#+id/welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:gravity="center"
android:text="Welcome to Events!"
android:textColor="#d9d9d9"
android:textSize="36sp"
android:visibility="gone" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:gravity="center_horizontal"
android:padding="8dp"
app:drawableStartCompat="#drawable/icon_loc" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view_following"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</RelativeLayout>
You can make it programmatically by adding the addOnScrollListener method.
On the RecyclerView.SCROLL_STATE_DRAGGING method hide the toolbar and TabLayout and on RecyclerView.SCROLL_STATE_IDLE method you can show it again if you want to show them again.
You can try it in such way:
recyclerview.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
// Show your view again.. If you want to show them..
} else if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
// Hide your view..
}
super.onScrollStateChanged(recyclerView, newState);
}});
Or You can use recycler view's addOnScrollListener method:
Refer: addOnScrollListener
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
if (dy > 0) {
//Scrolling down
// Show your controllers from here
} else if (dy < 0) {
//Scrolling up
// Hide your controllers from here
}
}});
Also, you can add some animations there to show and hide your toolbar and tab layouts.
Place the toolbar and the tablayout within the ScrollView group to get the scrolling part.
<ScrollView>
<Toolbar></Toolbar>
<Tablayout></Tablayout>
</ScrollView>
Related
I know this is common to ask but I really confused about how can I apply onClickListener to my navigationDrawer items, I have two items which is edit profile and Logout I just want to Toast or print if one of them is selected, Is there anyone can help me with this, I've already search on the internet , yet there's no OnClickListener I've found, need help
I think there's missing on my MainActivity which is the onCreate()
OnCreate() MainActivity
setContentView(R.layout.dashboard_main);
DrawerLayout drawerLayout = findViewById(R.id.drawerlayout);
NavigationView navigationView = (NavigationView) findViewById(R.id.navigationview);
sidemenu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior = "single">
<item android:id="#+id/editProfile"
android:icon="#drawable/history"
android:title="Edit Profile"/>
<item android:id="#+id/logout_menu"
android:icon="#drawable/logout"
android:title="Logout"/>
</group>
sidebar_header
<?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="180dp"
android:background="#color/dashboard_item_1"
android:orientation="vertical"
android:gravity="center"
android:padding="20dp"
>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/user_logo"
app:civ_border_width="2dp"
app:civ_border_color="#FFFFFF"/>
<TextView
android:id="#+id/fullName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/idNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Id no."
android:textColor="#FFFFFF"
android:textSize="12sp"/>
</LinearLayout>
dashboard_main.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
android:id="#+id/drawerlayout"
tools:context=".MainActivity">
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/navigationview"
app:headerLayout="#layout/sidebar_header"
app:menu="#menu/sidemenu"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_gravity="start"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Toolbars"
app:titleTextColor="#FFFFFF"
app:titleMarginStart = "10dp"
android:layout_marginBottom="5dp"
tools:ignore="MissingConstraints"/>
<View
android:id="#+id/viewHeaderBackground"
android:layout_width="match_parent"
android:layout_height="#dimen/_125sdp"
android:background="#color/primary"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_16sdp"
android:layout_marginLeft="#dimen/_16sdp"
android:layout_marginTop="#dimen/_16sdp"
android:text="Dashboard"
android:textColor="#color/white"
android:textSize="#dimen/_20ssp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_26sdp"
android:layout_height="#dimen/_26sdp"
android:layout_marginEnd="#dimen/_16sdp"
android:layout_marginRight="#dimen/_16sdp"
android:src="#drawable/user_logo"
app:layout_constraintBottom_toBottomOf="#id/textTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/textTitle"
/>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_16sdp"
app:cardBackgroundColor="#color/card_background"
app:cardCornerRadius="#dimen/_16sdp"
app:layout_constraintBottom_toBottomOf="#id/viewHeaderBackground"
app:layout_constraintTop_toBottomOf="#id/viewHeaderBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/_14sdp">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overview"
android:textColor="#color/primary_text"
android:textSize="#dimen/_14ssp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/textViews"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#android:color/transparent"
android:layout_marginTop="#dimen/_8sdp"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/layoutClients"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_8sdp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="#id/layoutImpacted"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textViews">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_28sdp"
android:layout_height="#dimen/_28sdp"
android:src="#drawable/ic_clients"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_4sdp"
android:text="Pending"
android:textColor="#color/secondary_text"
android:textSize="#dimen/_10ssp"/>
<TextView
android:id="#+id/txtPending"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_4sdp"
android:text="0"
android:textColor="#color/primary_text"
android:textSize="#dimen/_16ssp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layoutImpacted"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_8sdp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="#id/layoutFollowing"
app:layout_constraintStart_toEndOf="#id/layoutClients"
app:layout_constraintTop_toBottomOf="#id/textViews">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_28sdp"
android:layout_height="#dimen/_28sdp"
android:src="#drawable/ic_impacted"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_4sdp"
android:text="Approved"
android:textColor="#color/secondary_text"
android:textSize="#dimen/_10ssp"/>
<TextView
android:id="#+id/txtApproved"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_4sdp"
android:text="0"
android:textColor="#color/primary_text"
android:textSize="#dimen/_16ssp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layoutFollowing"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_8sdp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/layoutImpacted"
app:layout_constraintTop_toBottomOf="#id/textViews">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_28sdp"
android:layout_height="#dimen/_28sdp"
android:src="#drawable/ic_following"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_4sdp"
android:text="Records"
android:textColor="#color/secondary_text"
android:textSize="#dimen/_10ssp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_4sdp"
android:text="0"
android:textColor="#color/primary_text"
android:textSize="#dimen/_16ssp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:padding="#dimen/_16sdp"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/cardHeader">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/dashboard_item_1"/>
<include layout="#layout/dashboard_item_2"/>
<include layout="#layout/dashboard_item_3"/>
<include layout="#layout/dashboard_item_4"/>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout >
Updated I tried the code below but when I click the items it will automatically hide back the sidebar and there are no Toast pops
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem item) {
if (item.getItemId() == R.id.editProfile)
{
Toast.makeText(getApplicationContext(),"profile",Toast.LENGTH_SHORT).show();
}
else if (item.getItemId() == R.id.logout_menu)
{
Toast.makeText(getApplicationContext(),"logout",Toast.LENGTH_SHORT).show();
}
return false;
}
});
First you need to implement NavigationView.OnNavigationItemSelectedListener interface on your Activity.
then on your onCreate() method type
navigationView.setNavigationItemSelectedListener(this); after this override the method onNavigationItemSelected.
here you can use this sample code.
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
if (item.getItemId() == R.id.editProfile)
{
//edit your profile
}
else if (item.getItemId() == R.id.logout)
{
//log out
}
return false;
}
Here is my MainActivity:
public class MainActivity extends AppCompatActivity {
private LinearLayout mStatusBarAllContents;
private FrameLayout mStatusBar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mStatusBar = findViewById(R.id.status_bar);
mStatusBarAllContents = findViewById(R.id.status_bar_all_contents);
mStatusBar.setOnClickListener(v -> {
Log.d("TAG", "status");
});
mStatusBarAllContents.setOnClickListener(v -> {
Log.d("TAG", "statusall");
});
}
My Layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/status_bar"
android:layout_width="match_parent"
android:layout_height="60px"
android:background="#drawable/sysheader_bg"
android:descendantFocusability="afterDescendants"
android:orientation="vertical">
<ImageView
android:id="#+id/notification_lights_out"
android:layout_width="22dip"
android:layout_height="match_parent"
android:paddingStart="6dp"
android:paddingBottom="2dip"
android:scaleType="center"
android:visibility="gone"
tools:ignore="RtlCompat" />
<LinearLayout
android:id="#+id/status_bar_all_contents"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<FrameLayout
android:layout_width="174px"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/clock_relativelayout"
android:layout_width="174px"
android:layout_height="match_parent"
android:clickable="true"
android:visibility="visible">
<TextView
android:id="#+id/clock_hour"
android:layout_width="60px"
android:layout_height="54px"
android:gravity="center"
android:includeFontPadding="false"
android:text="05"
android:textColor="#color/white"
android:textSize="52px"
android:textStyle="bold" />
<ImageView
android:id="#+id/clock_coron"
android:layout_width="12px"
android:layout_height="48px"
android:layout_marginTop="9px"
android:layout_toRightOf="#+id/clock_hour"
android:scaleType="fitCenter"
android:src="#drawable/num_12x48_colon" />
<TextView
android:layout_width="60px"
android:layout_height="54px"
android:layout_toRightOf="#+id/clock_coron"
android:gravity="center"
android:includeFontPadding="false"
android:text="30"
android:textColor="#color/white"
android:textSize="52px"
android:textStyle="bold">
</TextView>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/status_bar_info_layout"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:visibility="visible">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/audio_area"
android:layout_width="786px"
android:layout_height="match_parent"
android:background="#drawable/da_header_sections_background_click_over_info"
android:clickable="true"
android:orientation="horizontal"
android:splitMotionEvents="false">
<FrameLayout
android:id="#+id/audio_info_area"
android:layout_width="708px"
android:layout_height="match_parent"
android:clickable="false">
<TextView
android:id="#+id/audio_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="18px"
android:layout_marginLeft="18px"
android:ellipsize="end"
android:gravity="left"
android:singleLine="true"
android:text="ALOLO"
android:textSize="20sp"
android:visibility="visible" />
<LinearLayout
android:id="#+id/audio_off"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="24px"
android:paddingLeft="24px"
android:paddingEnd="56px"
android:paddingRight="56px"
android:visibility="gone">
<TextView
android:id="#+id/audio_off_text"
android:layout_width="648px"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="6px"
android:layout_marginLeft="6px"
android:ellipsize="end"
android:gravity="left"
android:singleLine="true"
android:text="PowerOFF"
android:textColor="#color/white"
android:textSize="30px">
</TextView>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
I set onclick on FrameLayout and LinearLayout, i wanna show log is status but when i touch it, nothing happen.
And then, i set android:layout_width="1dp", android:layout_height="1dp" of id: status_bar_all_contents, it show log: status, but status_bar_all_contents will gone, so i dont want that.
So how to fix when i touch it and show log status?
Ps: Sorry for my english is not good.
Layouts typically pass-through clicks to their children.
You can try this solution here disabling all children onclicks and enabling the FrameLaoyuts onclicks. But I don't think that will work with the LinearLayout on top of that.
Android frame layout click listener not working
My advice wrap the entire view in a ConstraintLayout, and position 2 basic <View>s
One <View> that is constrained to match the FrameLayout
One <View> that is constrained to match the LinearLayout
These <View>s will act as overlays.
<View
android:id="#+id/status_bar_overlay"
app:layout_constraintEnd_toEndOf="#id/status_bar"
app:layout_constraintStart_toStartOf="#id/status_bar"
app:layout_constraintTop_toTopOf="#id/status_bar"
app:layout_constraintBottom_toBottomOf="#id/status_bar" />
<View
android:id="#+id/status_bar_all_contents_overlay"
app:layout_constraintEnd_toEndOf="#id/status_bar_all_contents"
app:layout_constraintStart_toStartOf="#id/status_bar_all_contents"
app:layout_constraintTop_toTopOf="#id/status_bar_all_contents"
app:layout_constraintBottom_toBottomOf="#id/status_bar_all_contents" />
Set the two View's onClickListener in the Activity and there you go.
I just created an Activity to show some product informations and this Activity has a Collapsing Toolbar. I wanted to load an image by Picasso as soon as the Activity opens.
Here is the current code :
public class ProductActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product);
Product p = (Product) getIntent().getExtras().getSerializable("product");
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle(p.getProductName());
TextView name = (TextView) findViewById(R.id.product_name);
TextView type = (TextView) findViewById(R.id.product_type);
TextView description = (TextView) findViewById(R.id.product_description);
TextView ingredients = (TextView) findViewById(R.id.product_ingredients);
TextView price = (TextView) findViewById(R.id.product_price);
ImageView thumbnail = (ImageView) findViewById(R.id.product_thumbnail);
name.setText(p.getProductName());
type.setText(p.getProductType().getDisplayName());
description.setText(p.getProductDescription());
ingredients.setText("Non disponible");
price.setText(p.getProductPrice().length>1 ? "À partir de "+p.getProductPrice()[0].toString()+"€" : p.getProductPrice()[0].toString()+"€");
Picasso.with(this).load(p.getProductThumbnailURL()).fit().into(thumbnail);
Picasso.with(this).load(p.getProductThumbnailURL()).fit().into((ImageView)findViewById(R.id.test), new Callback() {
#Override
public void onSuccess() {
}
#Override
public void onError() {
Toast.makeText(ProductActivity.this, "Impossible de charger l'image !", Toast.LENGTH_SHORT).show();
}
});
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getItemId()==android.R.id.home)finish();
return super.onOptionsItemSelected(item);
}
}
And here is a screen of the Activity (don't take care of the design xD)
ProductActivity
Any idea ? :p
Here is the XML file of the ProductActivity :
<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.slama.hotpizza77.ProductActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/product_thumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:contentDescription="#string/product_thumbnail_string" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layoutManager="LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="0dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="#+id/product_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="product_name"
style="#style/TextAppearance.AppCompat.Large"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/product_type"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="product_type"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
tools:ignore="HardcodedText" />
<TextView
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Description :"
android:textSize="18sp"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/product_description"
style="#style/TextAppearance.AppCompat.Small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="product_description"
android:textSize="16sp"
tools:ignore="HardcodedText" />
<TextView
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Ingrédients :"
android:textSize="18sp"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/product_ingredients"
style="#style/TextAppearance.AppCompat.Small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="product_ingredients"
android:textSize="16sp"
tools:ignore="HardcodedText" />
<LinearLayout
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_product_pork"/>
<TextView
android:layout_marginLeft="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contient de la viande issue de porc !"
style="#style/TextAppearance.AppCompat.Body2"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_product_notforkid"/>
<TextView
android:layout_marginLeft="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ne convient pas aux enfants !"
style="#style/TextAppearance.AppCompat.Body2"/>
</LinearLayout>
<TextView
android:id="#+id/product_price"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="product_price"
style="#style/Widget.AppCompat.Button.Colored"
tools:ignore="HardcodedText" />
<ImageView
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="200dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Instead of wrap_content for your product_thumbnail ImageView height use match_parent or a fixed size.
Hope this helps
I have an ImageView inside a CollapsingToolbarLayout and the ImageView takes up the whole screen with some info at the bottom. When user clicks on the ImageView i'd like the height of the CollapsingToolBarLayout to become 150dp. How do I set the height of the CollapsingToolBarLayout to have a smooth animation to be set to height of 150dp. I'd like the height to smoothly and slowly get to 150dp not quick, to have a nice animation.
How can i achieve this?
activity_scrolling.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"
tools:context="com.myapplication.foodapp.ScrollingActivity"
android:id="#+id/coordinator_layout"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.PopupOverlay"
android:animateLayoutChanges="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:animateLayoutChanges="true">
<ImageView
android:id="#+id/chipotle_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_gravity="fill_vertical"
android:src="#mipmap/food1"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chipotle Chicken Fajitas"
android:textSize="27sp"
android:layout_gravity="bottom"
android:layout_marginBottom="40dp"
android:layout_marginLeft="5dp"
android:textColor="#fff"
android:id="#+id/first_food_title"/>
<me.grantland.widget.AutofitTextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="16 ingredients | 284 Calories | 1 hour"
android:singleLine="true"
android:textAlignment="center"
android:textColor="#fff"
android:layout_gravity="bottom"
android:textSize="20sp"
android:id="#+id/spec_text"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_collapseMode="pin"
android:animateLayoutChanges="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:src="#mipmap/arrow"
android:id="#id/back_Arrow"
android:layout_marginTop="5dp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- ** CONTENT SCROLLING LAYOUT ** -->
<include layout="#layout/content_scrolling">
</include>
</android.support.design.widget.CoordinatorLayout>
You can achieve this with ValueAnimator.
ValueAnimator anim = ValueAnimator.ofInt(viewToIncreaseHeight.getMeasuredHeight(), finalValue);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = viewGroup.getLayoutParams();
layoutParams.height = val;
viewGroup.setLayoutParams(layoutParams);
}
});
anim.start();
I am currently coding a small app, and I trying to integrate the "material design" of Google.
I use in my app to github's floating Action menu button library and I have some worries.
Unlike the single button, the menu generates a larger view. I put my menu down the fab header. But the code does not seem good.
I wish to bring up the menu fab down my header properly (I use the CollapsingToolbarLayout). And the menu follows the scroll. But i'm stuck here.
My question is how to put the menu fab between my header and my cardviews, and how to scroll the fab menu with my collapsing toolbar.
Thank you in advance.
My layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/drawerlayout1">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="70dp">
<android.support.design.widget.AppBarLayout
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="fill_parent"
android:id="#+id/appbarlayout"
android:layout_height="230dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/CollapsingToolbarLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/console_font"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:title="test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:clickable="true"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_weight=".1" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<LinearLayout
android:layout_alignParentBottom="true"
android:id="#+id/fragmentContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp">
<TextView
android:textColor="#android:color/holo_blue_light"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Console"
android:id="#+id/textView5" />
<Spinner
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_gravity="center_horizontal" />
<View style="#style/Divider"/>
<TextView
android:textColor="#android:color/holo_blue_light"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Etat"
android:id="#+id/textView2" />
<Spinner
android:layout_marginTop="10dp"
android:entries="#array/etat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/spinner2" />
<View style="#style/Divider"/>
<TextView
android:textColor="#android:color/holo_blue_light"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Région"
android:id="#+id/textView6" />
<Spinner
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/localisation"
android:id="#+id/spinner3" />
<View style="#style/Divider"/>
<TextView
android:textColor="#android:color/holo_blue_light"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Contenu"
android:id="#+id/textView3" />
<Spinner
android:layout_marginTop="10dp"
android:entries="#array/contenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner4"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_marginBottom="10dp"
android:layout_weight=".1" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view2"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/fragmentContainer2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp">
<EditText
android:textColor="#android:color/holo_blue_light"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_marginBottom="10dp"
android:hint="Ecrire un commentaire" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu_down"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_alignParentRight="true"
android:layout_marginTop="185dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:elevation="6dp"
fab:menu_labels_ellipsize="end"
fab:menu_labels_singleLine="true"
app:layout_anchor="#id/image"
app:layout_anchorGravity="bottom|right|end"
fab:menu_openDirection="down">
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_size="mini"
fab:fab_label="Menu item 1" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_size="mini"
fab:fab_label="Menu item 2" />
</com.github.clans.fab.FloatingActionMenu>
</android.support.design.widget.CoordinatorLayout>
My code fragment:
public class ConsoleSql extends AppCompatActivity {
private JvAdapter mDbHelper;
TextView Titre;
Spinner spin_console;
Spinner spin_etat;
Spinner spin_region;
Spinner spin_contenu;
EditText commentaire;
String value;
CollapsingToolbarLayout collapsingToolbarLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.customconsole);
Toolbar myToolbar = (Toolbar) findViewById(toolbar);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.CollapsingToolbarLayout1);
myToolbar.setTitle("Ajout console");
setSupportActionBar(myToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close);
spin_console = (Spinner) findViewById(R.id.spinner);
spin_etat = (Spinner) findViewById(R.id.spinner2);
spin_region = (Spinner) findViewById(R.id.spinner3);
spin_contenu = (Spinner) findViewById(R.id.spinner4);
commentaire = (EditText) findViewById(R.id.editText);
Bundle extras = getIntent().getExtras();
if (extras != null) {
value = extras.getString("constructeur");
int arryid = this.getResources().getIdentifier(value, "array", this.getPackageName());
collapsingToolbarLayout.setTitle("Console "+value);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, arryid, android.R.layout.simple_spinner_item); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spin_console.setAdapter(adapter);
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.consolemenu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_save) {
mDbHelper = new JvAdapter(this);
mDbHelper.open();
//do some stuffs...
return true;
}
return super.onOptionsItemSelected(item);
}
Change you layout_anchor to "appbarlayout" instead of "image"
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="6dp"
fab:menu_labels_ellipsize="end"
fab:menu_labels_singleLine="true"
app:layout_anchor="#id/appbarlayout"
app:layout_anchorGravity="bottom|end"
fab:menu_openDirection="down">
</com.github.clans.fab.FloatingActionMenu>