Overlaying slider element on top of CardView - java

I am trying to build a slider that slides on top of my current view in Android. I built the slider using the SlideUp library found here https://github.com/mancj/SlideUp-Android. The slider is taking the inner RelativeLayout as a view source. When I pull up the slider it ends up behind the CardView. I've looked through all the methods in the library and there isn't one that allows you to move the slider to the foreground. I've also tried to bring the slider view to foreground with .bringToFront() method. Moving the slider view before the CardView in the .xml file does nothing either. Is there a good way to bring the slider to foreground... or the CardView in the background? (without hiding the CardView)
JAVA
//code to build slider
View slideView = findViewById(R.id.slider);
//tried putting slideView.bringToFront() here before passing it to the object but that did nothing
SlideUp slideUp = new SlideUpBuilder(slideView)
.withStartState(SlideUp.State.HIDDEN)
.withStartGravity(Gravity.BOTTOM)
.build();
//code to bring up slider. View "share" exists, it's just irrelevant so I didn't include in the .xml file
buttonView.findViewById(R.id.share).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//tried putting slideView.bringToFront() here as well
slideUp.toggle(); //toggles slider up/down
}
});
XML
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:background="#color/background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp">
</android.support.v7.widget.CardView>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/slider"
android:background="#color/primary">
</RelativeLayout>
</RelativeLayout>

I figured it out. I found out I can add android:elevation="2dp" for the slider and 0dp for the CardView

Related

Android Studio - How to programmatically add layout_below param to CardViews inside a PercentRelativeLayout

I am here because I am trying to set programmatically the layout_below parameter of some cardViews without success.
These cardViews are located inside a PercentRelativeLayout (I do not know if it is relevant but these cardviews have been added programmatically too).
I show you the code to make it clear.
...
<android.support.percent.PercentRelativeLayout
android:id="#+id/prl"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv0"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv1"
// here I would like to add android:layout_below="#+id/cv0"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:percent="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv2"
// here I would like to add android:layout_below="#+id/cv1"
android:layout_width="match_parent"
percent:layout_heightPercent="65%"
percent:layout_marginTopPercent="2%"
percent:layout_marginLeftPercent="2%"
percent:layout_marginRightPercent="2%"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="4dp">
</android.support.v7.widget.CardView>
</android.support.percent.PercentRelativeLayout>
...
I tried to do something like this in my Java code but without success.
PercentRelativeLayout prl = (PercentRelativeLayout) view.findViewById(R.id.prl);
CardView cv = (CardView) LayoutInflater.from(getActivity()).inflate(R.layout.cv_block, prl, false);
cv.setId(currentId++);
prl.addView(cv);
cv = (CardView) LayoutInflater.from(getActivity()).inflate(R.layout.cv_block, prl, false);
cv.setId(currentId++);
RelativeLayout.LayoutParams cv_lp = (RelativeLayout.LayoutParams) cv.getLayoutParams();
cv_lp.addRule(RelativeLayout.BELOW,currentId-2);
/* I have also tried to call cv.requestLayout() but nothing changed */
prl.addView(cv);
As you can see, I am trying to generate cardviews and insert them one below the other.
Thanks in advance for your help.
PercentRelativeLayout is depreciated, so you are encouraged to use other type of layout.
This class was deprecated in API level 26.1.0.
consider using ConstraintLayout and associated layouts instead. The following shows how to replicate the functionality of percentage layouts with a ConstraintLayout. The Guidelines are used to define each percentage break point, and then a Button view is stretched to fill the gap:
ConstraintLayout gives lots of opportunities.
More about PercentRelativeLayout deprecation here.
More about ConstraintLayout and how to use it here or video tutorial.

Animate EditText out of a window

I have a RelativeLayout with a "search bar" (EditText) and a ListView under it:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/etSearch"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:inputType="text" >
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="0dp"
android:clipToPadding="false"
android:listSelector="#drawable/listview_selector" >
</ListView>
</LinearLayout>
After the user "searches" I want the EditText to animate out of the screen and the ListView to push to the top. I put together a very rough GIF of what I need:
Does anyone have an idea on how I can accomplish this? thanks
UPDATE
I found out how to make the EditText animate out of the screen with this:
slide_out_top.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="-100%" android:duration="600"/>
</set>
and then using it on the EditText like this:
mSlideOutTop = AnimationUtils.loadAnimation(this, R.anim.slide_out_top);
et.startAnimation(mSlideOutTop);
but then the ListView stays at its current height. What I want is for the ListView to extend to the top as the EditText animates out.
You can add TranslateAnimation to the ViewGroup( which is LinearLayout for you), the y-axis moving distance is the hight of the editText View. Then trigger this animation when you need. (update: just thought this way may create a blank bar at bottom, bad idea)
I have an another tricky idea.
set the EditText view in the ListView with position 0 , then simply call the smoothScrollToPostion(1) method to scroll.
see this may help you
smoothScrollToPositionFromTop() is not always working like it should

Inflated layout's children not showing

I am using a DraggableGridView from here.
What I did before was add a simple programmatically built ImageViews to the grid. That works perfectly fine.
I am now trying to add a Layout instead. I tried RelativeLayout, Framelayout, FrameLayout inside of a RelativeLayout.
Here is my code as of now:
/**
* Rebuild the grid view, e.g. after the adapter has been filled or a backup is restored
*/
private void renewGrid()
{
dgv.removeAllViews();
for(int i = 0; i < adapter.getCount(); i++)
{
LayoutInflater inflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
dgv = (DraggableGridView) inflater.inflate(R.layout.grid_item_layout, dgv);
FrameLayout fl = (FrameLayout) dgv.findViewById(R.id.grid_images);
ImageView icon = (ImageView) fl.findViewById(R.id.qstile);
icon.setImageDrawable(res.getDrawable(res.getIdentifier("qstile_" + adapter.getItem(i), "drawable", packagename)));
}
}
Following the grid_item_layout:
<?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:gravity="center_vertical"
android:orientation="horizontal" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/grid_images">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/icon_delete"/>
<ImageView
android:id="#+id/qstile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
<TextView
android:id="#+id/invisible_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:visibility="gone" />
</RelativeLayout>
The RelativeLayout gets inflated into the grid nicely. I can observe this via DDMS and the "Dump view hierachy" function. The tree shows all RelativeLayouts inside the grid, but each of it doesn't have any children.
BUT... That is not true. If I step through the code and observe the inflated layouts I can see the children. So they are set up, get added just like told in the XML, but don't get drawn.
The OnItemClick listener on the children of the grid also works...
Any hint about what I'm missing here? I already tried several ways, even creating the complete layout programmatically and then adding it to the grid as children. Still no luck. None of the children get added.
Is that maybe an issue with the used DraggableGridView?
After searching for another few hours I found a fix in this SO thread
Basically I now extend DraggableGridView from FrameLayout rather than ViewGroup. This hasn't had any noticeable side effects to me.

Show Button or Image on top of screen

I am working on a Android Project in which I need to show a Button or ImageView on header of my activity(Screen). Below is my XML layout of my activity.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_margin="2px"
android:orientation="vertical"
android:padding="2px" >
<LinearLayout
android:id="#+id/tabBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/BtnSlide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:padding="0px"
android:src="#drawable/button" />
</LinearLayout>
</LinearLayout>
With the above layout, I can see my black button image just below the Proximity title. Is it possible to show my button image to left of Proximity instead of getting shown one line below Proximity?
Or
Is there any way, I can make the image which is left to Proximity title clickable? if I can do that, then I don't need to show Black Button image at the top.
That image is coming from AndroidManifest.xml file. I am not sure how to make that clickable.
With the above layout, I can see my black button image just below the
Proximity title. Is it possible to show my button image to left of
Proximity instead of getting shown one line below Proximity?
Since Proximity is in titlebar you need to create your own custom titlebar to be able to place button to titlebar. Here is example how to achieve it.
Also try to think an usage of ActionBar.
Try this
Button b=new Button(context);
View v = findViewById (android.R.id.title); // Getting the title bar view
v.addView(b); // setting Button
v.setClickable(true);
v.setOnClickListener(new OnClickListener() {
#Override public void onClick(View v) {
Toast.makeText(context, "You have clicked on Title", Toast.LENGTH_SHORT).show();
}
});
How ever I'll suggest you to use ActionBar
Note: I haven't tried that. Let me know if it work for you

android:animateLayoutChanges won't work in parent layout

Suppose I have a layout file structured like this:
<LinearLayout android:id="#+id/main" android:orientation="vertical" android:animateLayoutChanges="true">
<EditText>
<TextView android:id="#+id/header1">
<LinearLayout android:id="#+id/insertionPoint" android:orientation="vertical" android:animateLayoutChanges="true">
</LinearLayout>
<TextView android:id="#+id/header2">
</LinearLayout>
I want to dynamically add text fields to the Layout insertionPoint and I would like to see an animation of the elements below it (in this case, header2) sliding down.
Using android:animateLayoutChanges only animates the elements in the layout insertionPoint, so there is no animation for header2. What should I do?
Just to be more clear: what I would like to do here is something like the animations that we can see in the People app in ICS when we add more fields, like telephone numbers, to a contact.
Thank you!
API 16 added the LayoutTransition.CHANGING animation type, however it is disabled by default.
To enable:
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.main);
linearLayout.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);
Nice DevBytes video: https://www.youtube.com/watch?v=55wLsaWpQ4g

Categories

Resources