• 8
name

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 191

Backtrace:

File: /home/prodcxja/public_html/questions/application/views/question.php
Line: 191
Function: _error_handler

File: /home/prodcxja/public_html/questions/application/controllers/Questions.php
Line: 433
Function: view

File: /home/prodcxja/public_html/questions/index.php
Line: 315
Function: require_once

name Punditsdkoslkdosdkoskdo

View from the bottom to half screen

I'd like to have a View that come from bottom with Animation to fill half screen. In that View I would have lots of ImageButtons. I could program the animation from bottom to half screen but after that my view is filling all screen.

What I want:

enter image description here

What I have:

enter image description here

xml code:

<android.support.v4.widget.DrawerLayout
        android:id="@+id/screen_dashboard" style="@style/drawer"
        tools:openDrawer="start">
(...)
<TableLayout
            android:id="@+id/hidden_panel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:visibility="gone" >

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <ImageButton
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:onClick="slideUpDown" />
                <ImageButton
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:onClick="slideUpDown" />
            </TableRow>
        </TableLayout>
    </android.support.v4.widget.DrawerLayout>

Java Code:

public void slideUpDown(final View view) {

        if (!isPanelShown()) {
            // Show the panel
            Animation bottomUp = AnimationUtils.loadAnimation(this, R.animator.bottom_up);
            hiddenPanel.startAnimation(bottomUp);

            hiddenPanel.setVisibility(View.VISIBLE);
        }
        else {
            // Hide the Panel
            Animation bottomDown = AnimationUtils.loadAnimation(this, R.animator.bottom_down);

            hiddenPanel.startAnimation(bottomDown);
            hiddenPanel.setVisibility(View.GONE);
        }
    }

    private boolean isPanelShown() {
        return hiddenPanel.getVisibility() == View.VISIBLE;
    }

Does anyone know what can I do for my view just fill half screen?

This kind of implementation can easily be achieved using BottomSheet Android component.

There are two types of BottomSheets, Persistent and Modal Bottom Sheet.

1. Persistent Bottom Sheet

The Persistent bottom sheet displays in-app content. It will be displayed at the bottom of the screen making some portion of the content visible. When activated it opens the full content. The elevation of the persistent bottom sheet is same as app making it part of the app. Below is the example of persistent bottom sheet of Google Maps app.

enter image description here

2. Modal Bottom Sheet

Modal bottom sheets have higher elevation than the app. These usually replaces menus or dialogs. Generally modal bottom sheets used to show deep-linked content from other apps. Below are the examples of modal bottom sheet of Google Drive app.

enter image description here

Sample code snippet for BottomSheet:

View bottomSheet = findViewById(R.id.bottom_sheet);
        behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                // React to state change
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                // React to dragging events
            }
        });

To expand the BottomSheet:

behavior.setState(BottomSheetBehavior.STATE_EXPANDED);

To collapse the BottomSheet:

behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

Based on your need you can choose anyone type of above BottomSheet. Hope this helps solving your problem.

  • 1
Reply Report

There are 2 quick solutions that can fit your needs:

1) BottomSheet. You can configure the height of this view in expanded state by using app:behavior_peekHeight.

2) MotionLayout. In this case you will be able to configure beautifull transition between states. Moreover view that above bottom view could be animated to transit with bottom view. But it is still in alpha. So it can contain bugs and api can be changed significantly in future releases.

  • 0
Reply Report