ImageButtons being squished when my drag and drop ImageButton is moved - java

So I have 4 normal imagebuttons that I have set up and then a 5th imagebutton that is a drag and drop. I want the 4 non drag and drop imagebuttons to stay in a particular spot no matter what happens with the imagebutton that is drag and drop. When I move my drag and drop imagebutton, the other imagebuttons get moved and are being squished also.
Any idea how I can move this drag and drop imagebutton without affecting the other imagebuttons in any way?
Here is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gllayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mars" >
<TextView
android:id="#+id/scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/mainHut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mainhut" />
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:layout_marginTop="-70dp"
android:layout_marginLeft="575dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/spaceRockButton1"
android:layout_marginTop="100dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/spacerock" />
<ImageButton
android:id="#+id/spaceRockButton2"
android:layout_marginTop="-140dp"
android:layout_marginLeft="520dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/spacerock" />
<ImageButton
android:id="#+id/meteor"
android:visibility="invisible"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/meteor"
android:layout_marginTop="-100dp"
android:layout_marginLeft="400dp" />
</LinearLayout>
Here is the code for my drag and drop imagebutton:
mainHut = (ImageButton) findViewById(R.id.mainHut);
mainHut.setOnTouchListener(new OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
mainHutSelected = true;
}//end if
if (event.getAction() == MotionEvent.ACTION_UP)
{
if (mainHutSelected == true)
{
mainHutSelected = false;
}//end if
}//end if
else if (event.getAction() == MotionEvent.ACTION_MOVE)
{
if (mainHutSelected == true)
{
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(v.getWidth(), v.getHeight());
params.setMargins((int)(event.getRawX() - event.getRawY() / 2), (int) (event.getRawY() - v.getHeight() * 1.5), (int) (event.getRawX() - v.getWidth() / 2), (int) (event.getRawY() - v.getHeight() * 1.5));
v.setLayoutParams(params);
}//end if
}//end else
return false;
}//end onTouch function
});//end setOnClickListener
Thanks in advance for the help.

I suggest you use a FrameLayout. This will make your imageviews stackable.
<FrameLayout>
<ImageButton/>
<ImageButton/>
<ImageButton/>
<ImageButton/>
<ImageButton/>
</FrameLayout>
You will need to set them all to have a static position on the screen based on its parents origin. The 5th ImageButton, you can use it to set the onTouch listener like you did.
Edit: OR you can do something like this (If you wanna keep the linear layout):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gllayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/mars"
android:orientation="vertical" >
<TextView
android:id="#+id/scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/polarCapButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/polarcap"
android:orientation="vertical" />
<ImageButton
android:id="#+id/polarCapButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="575dp"
android:layout_marginTop="-70dp"
android:background="#drawable/polarcap"
android:orientation="vertical" />
<ImageButton
android:id="#+id/spaceRockButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/spacerock"
android:orientation="vertical" />
<ImageButton
android:id="#+id/spaceRockButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="520dp"
android:layout_marginTop="-140dp"
android:background="#drawable/spacerock"
android:orientation="vertical" />
<ImageButton
android:id="#+id/meteor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="400dp"
android:layout_marginTop="-100dp"
android:background="#drawable/meteor"
android:orientation="vertical"
android:visibility="invisible" />
</LinearLayout>
<ImageButton
android:id="#+id/mainHut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="put offset here"
android:background="#drawable/mainhut" />
</FrameLayout>
Just change the marginTop on mainHut to the offset you want to set it at!

Without looking at your XML file, it is probably due to the use of a relative layout - the 4 static buttons may be positioned relative to the button that is being moved, and will move in real-time when dragging and dropping. Try using absolute positioning (e.g., android:layout_marginTop="30dp") instead of relative, or using another type of layout. If you could post both your Activity where this happens and your XML file for that layout, that will better help provide some information for more appropriate answers.

I'm not sure if this is what you want.
But you could use a floating imageButton, using the Window Manager. But this way the button would be a standalone overlay and no longer be part of the 4-buttons View. See this post: What APIs in Android is Facebook using to create Chat Heads?

Related

Minimize bottom navigation bar with animation when bottom sheet is expanded

I have a bottom navigation bar and a bottom sheet above it. The bottom sheet can be expanded to fill the entire screen and I would like to add an animation that hides the bottom navigation bar as the bottom sheet is expanded. Below are screenshots of my layout, the expanded image shows what it currently looks like and the desired image shows what I want it to look like. I have looked in the bottom sheet documentation but I could not find anything useful.
Collapsed: https://i.imgur.com/B4rVGzn.png
Expanded: https://i.imgur.com/Z25I2h0.png
Desired: https://i.imgur.com/PsE06gQ.png
Below is my layout
<androidx.constraintlayout.widget.ConstraintLayout 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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="?attr/colorSurface"
android:elevation="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:cameraZoom="13.8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MainActivity" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/navigation_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:elevation="16dp" >
<include layout="#layout/bottom_sheet" />
<LinearLayout
android:id="#+id/floating_action_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:clipToPadding="false"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp"
app:layout_behavior="jonathan.gpsapp.FloatingButtonBehavior">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/center_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:clickable="true"
android:src="#drawable/ic_center"
app:backgroundTint="?attr/colorSurface"
app:fabSize="mini"
app:tint="?attr/colorPrimary" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/record"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/ic_record"
app:backgroundTint="?attr/colorPrimary"
app:fabSize="auto"
app:tint="#f2f2f2" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>```
You need to use the addBottomSheetCallback to listen the slide position of your BotomSheet and with this value you can hide the BottomNavigation smoothly :
private int navigationHeight;
bottomSheet.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
#Override
public void onStateChanged(#NonNull View bottomSheet, int newState) {
}
#Override
public void onSlide(#NonNull View bottomSheet, float slideOffset) {
if (navigationHeight == 0)
navigationHeight = navigation.getHeight(); //the height of the navigationView
float slideY = navigationHeight - navigationHeight * (1 - slideOffset);
navigation.setTranslationY(slideY);//Translate the navigatinView
}
});
Note: for a good result you must move the bottom Navigation on the coordinatorlayout

Show/Hide BottomNavigationView for specific fragment

In my android application, I want the bottom menu bar to disappear when the user focuses the SearchView (this also pops the soft keyboard up). When the SearchView loses focus, I want to show the bottom navigation bar again.
I have tried using setVisibility() and the view does hide or show, but it always retains its height for some reason.Below is the code for my BottomNavigationView:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
app:menu="#menu/bottom_navigation_menu"
app:elevation="80dp"
app:labelVisibilityMode="labeled"
app:itemTextColor="#color/bottom_nav_color"
app:itemIconTint="#color/bottom_nav_color"
android:background="?attr/backgroundColor">
Code that handles hiding/showing of the navigation bar:
// Needed to close the SearchView when pressing back (instead of just losing focus)
mSearchView.setOnQueryTextFocusChangeListener(
(v, hasFocus) -> {
if (!hasFocus) {
adapter.isSearchMode = false;
bottomNavigationView.setVisibility(View.VISIBLE);
searchMenuItem.collapseActionView();
adapter.notifyDataSetChanged();
} else {
adapter.isSearchMode = true;
bottomNavigationView.setVisibility(View.GONE);
searchMenuItem.collapseActionView();
adapter.notifyDataSetChanged();
}
});
The BottomNavigationView is held by a LinearLayout like so:
<LinearLayout
android:id="#+id/footer"
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#drawable/bottom_bar_top_shadow"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
app:menu="#menu/bottom_navigation_menu"
app:elevation="80dp"
app:labelVisibilityMode="labeled"
app:itemTextColor="#color/bottom_nav_color"
app:itemIconTint="#color/bottom_nav_color"
android:background="?attr/backgroundColor">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:layout_marginTop="6dp"
android:weightSum="5"
android:elevation="16dp">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top">
<TextView
android:id="#+id/missed_calls"
style="#style/unread_count_font"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/unread_message_count_bg"
android:layout_marginStart="20dp"
android:gravity="center"
android:visibility="gone"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top">
<TextView
android:id="#+id/missed_chats"
style="#style/unread_count_font"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/unread_message_count_bg"
android:layout_marginStart="20dp"
android:gravity="center"
android:visibility="gone"/>
</RelativeLayout>
</LinearLayout>
</com.google.android.material.bottomnavigation.BottomNavigationView>
</LinearLayout>
On your BottomNavigation use this code snippet:
setVisibility(View.GONE)
View.Gone = No Space lefts for view.

Scale gifs to fit a horizontal ListView

I have a bunch of gifs of different sizes and I want to align then in a horizontal ListView so that they're all the same height, obviously not necessarily the same width.
We are using https://github.com/koral--/android-gif-drawable
Example:
Gif display xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:paddingLeft="10dp"
android:id="#+id/holder"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<pl.droidsonroids.gif.GifTextureView
android:layout_width="100dp"
android:id="#+id/gif_rec_view"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
</RelativeLayout>
Container
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/title1"
android:layout_marginTop="5dp"
android:background="#android:color/transparent"
android:id="#+id/xD">
<com.devsmart.android.ui.HorizontalListView
android:id="#+id/gif_search_1"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#e3e3e3"
/>
</RelativeLayout>
Load gif into view:
final GifTextureView textureView = (GifTextureView) convertView.findViewById(R.id.gif_rec_view);
LoadGif gLoad = new LoadGif(_objects.get(position).url, textureView);
gLoad.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, (Void[])null);
How would I best solve this?
Tried bunch of stuff.
//textureView.setLayoutParams(new RelativeLayout.LayoutParams(_objects.get(position).width, _objects.get(position).height));
//RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
//params.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
//textureView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
Edit 1:
So looking at this thread: How to scale an Image in ImageView to keep the aspect ratio
using
android:adjustViewBounds="true"
android:scaleType="centerCrop"
worked wonders, however the images cropped like so:
and
android:adjustViewBounds="true"
android:layout_centerInParent="true"
did not work at all.
Okay so this is how I managed to solve it:
Gif display xml
<pl.droidsonroids.gif.GifTextureView
android:layout_width="150dp"
android:layout_height="match_parent"
android:id="#+id/gif_rec_view"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
Adapter
/*Absolutely fucking ridiculous*/
textureView.setLayoutParams(new RelativeLayout.LayoutParams(Utils.pxToDp(_objects.get(position).width), Utils.pxToDp(_objects.get(position).height)));
Utils ...
public static int pxToDp(int px)
{
//return (int) (px / Resources.getSystem().getDisplayMetrics().density);
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, px, Resources.getSystem().getDisplayMetrics());
}
Hope this may help some lone wanderer in the future.

The image background of my LinearLyout, containing a webview, doesn't appear

I have a fragment containing a LinearLayout containing a webview, when a change the html string in my webview, sometimes the background of my LinearLayout doesn't appear.
My fragment:
`
<ScrollView 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"
android:scrollbarStyle="outsideOverlay"
tools:context=".NewsFragment" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/bg_item_single"
android:orientation="vertical"
android:padding="#dimen/list_margin" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:textColor="#000"
android:textSize="20sp" />
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/transparent" />
</LinearLayout>
</LinearLayout>
</ScrollView>
`
If I have a linearLayout in a other linearLayout is just to have a space on the bottom of my scrollView, isn't the problem.
My code:
`
private void populate() {
textView.setText(grant.getName());
// Configure w`enter code here`ebview
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webview.getSettings().setJavaScriptEnabled(false);
webview.setBackgroundColor(Color.argb(1, 0, 0, 0));
webview.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return (event.getAction() == MotionEvent.ACTION_MOVE);
}
});
webview.loadDataWithBaseURL("file:///android_asset/", createFullHtmlPage("styles.css", grant.getGrantDescription(), 0), "text/html", "UTF-8", null);
}
`
I don't see were is the problem.
Try setting android:layout_height="wrap_content", and remove the transparent background of this view.
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/transparent" />
I fixed my problem. I used a shape as background of my LinearLayout, but if the webview is too big, for unknown reason, the shape don't work and don't appear. Therefore now I use a color background and 2 imageview for creat a bottom corner and top corner.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay"
tools:context=".NewsFragment" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_item_top" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg_item_default"
android:orientation="vertical" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:textColor="#000"
android:textSize="20sp" />
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/list_margin" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_item_bottom" />
</LinearLayout>
</LinearLayout>
</ScrollView>
How I undestud problem is in this line
webview.setBackgroundColor(Color.argb(1, 0, 0, 0));
try this
webview.setBackgroundResource(color.blue);

Android tablelayout click listener for cell content

I have a 3x3 gridview with custom linearlayouts within. But I want something like this
layout and as I search on the internet it's not possible with gridview because of the column span. I used gridview because of the onClickListener method: when the user click on one of the grid cell, a new activity starts(not the same activity, so it's like a main menu). Is it possible to do in a TableLayout? So if I click on a cell even if it spanned can I call an onClick method? I've searched the web for some solutions, but all of what I've found is clicking on a tablerow(which is not good for me if there is 3 custom layouts in one row).
My layout for the TableLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/background_light"
android:orientation="vertical" >
<ImageView
android:id="#+id/headerPicture"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imageString"
android:src="#drawable/bicaj" />
<TableLayout
android:id="#+id/mainGrid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numColumns="3" >
<TableRow
android:id="#+id/mainFirstRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dip" >
<LinearLayout
android:id="#+id/mainOnline"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/mainIconOnline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/main_page_icon_descp" />
<TextView
android:id="#+id/mainTextOnline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp" />
</LinearLayout>
</TableRow>
.
.
.
.
</TableLayout>
</LinearLayout>
You can add clickListeners to the ImageView
.....
<LinearLayout
android:id="#+id/mainOnline"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/mainIconOnline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/main_page_icon_descp" />
......
And in your Activity
ImageView butt1 = (ImageView) findViewById(R.id.mainIconOnline);
butt1.setOnClickListener(this);
#Override
public void onClick(View v) {
if (v.getId() == R.id.mainIconOnline) {
Intent i = new Intent(this, SecondActivityclass);
startActivity(i);
}
}
This should work

Categories