How to swap 2 or more ImageView when button clicked - java

It has been 2 months since I was trying to implement this design and the animation but non of the Android development group or Anyone can't able to help me. I badly need help.
I have seen this but won't understandAnimated swap position of two buttons
This is what I actually want to do.
This is what I did:
Here XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="250dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:backgroundTint="#color/white"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:backgroundTint="#color/white"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:layout_marginTop="200dp"
android:background="#color/black"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
</LinearLayout>
What I did:
I tried using an MPAndroidChart for bar which will be handled. Shortly, I'm trying to create an algorithm visualizer project but I didn't find any good resource so that bar could be created and handled efficiently and easily. Badly I didn't even find any resource except customview on how he implemented It's completely hard to understand.
What I expect:
I want to know how to design that bar and how I can swap those bar or bars when the button clicks.
Thank you in advance.

Related

statusbar has a white line?

Here is my layout, Why is there a white line between the status bar and the title? How do I remove this white line。
I made an album, but found white lines in the nested layout. I didn't search for relevant content on Google, so I posted a post for you to look at. Here are my code and screenshots.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/image_display_color">
<FrameLayout
android:id="#+id/surface_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/big_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<!-- toolbar -->
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="30dp"
android:visibility="visible"
android:background="#80000000">
<ImageView
android:id="#+id/back"
android:layout_width="48dp"
android:layout_height="48dp"
android:contentDescription="TODO"
android:paddingLeft="10dp"
android:src="#drawable/video_back" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:paddingLeft="10dp"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
<!-- 播放进度-->
<LinearLayout
android:background="#80000000"
android:id="#+id/layout_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:alpha="0.9"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="5"
android:visibility="visible">
<Button
android:id="#+id/btn_share"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:text="分享"
android:textColor="#color/white"
android:drawableTop="#drawable/ic_baseline_share_24"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_favaite"
android:background="#android:color/transparent"
android:layout_weight="1"
android:text="收藏"
android:textColor="#color/white"
android:drawableTop="#drawable/ic_baseline_favorite_24"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_copy"
android:background="#android:color/transparent"
android:layout_weight="1"
android:textColor="#color/white"
android:text="复制"
android:drawableTop="#drawable/ic_copy_white"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_delete"
android:textColor="#color/white"
android:background="#android:color/transparent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:text="删除"
android:drawableTop="#drawable/ic_baseline_delete_24"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_more"
android:background="#android:color/transparent"
android:layout_weight="1"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:drawableTop="#drawable/ic_baseline_more_vert_24"
android:text="更多"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Here is my screenshot。
image1
image2
The "line" is because your dark overlay doesn't exactly line up with the top of your content/bottom of the status bar. There's a gap where the content shows through:
You can see the photos through that gap. I'm assuming this layout is overlaid on the entire screen, and you're using layout_marginTop="30dp" to try and move it below the status bar? That's going to have problems - the size of the bar depends on the device. On stock Android (following Material Design guidelines) the status bar is 24dp. On your device, it's obviously close to 30dp - but not exactly! That's why it doesn't line up.
I think making this work perfectly is going to be difficult. If I were you, I wouldn't try to overlay the entire screen. If you use a NoActionBar theme, and add a Toolbar into your layout instead, then you can add your overlay in the same layout. You can cover the Toolbar if you like, and the top of the Activity/Fragment will be below the status bar.
But it looks like you're making some kind of overlay over other apps - in that case, have a look at this thread for some ideas about getting the current device's status bar height (if any): Height of status bar in Android

How to make the following Android activity scrollable when ScrollView isn't working?

I have the following activity.
I tried encapsulating the whole RelativeLayout with a ScrollView. But, it doesn't work, and only the last 2 images were displayed. So, I removed it and posting the RelativeLayout in question. Please help. I have 2 dummy views that mark an imaginary vertical and horizontal line at the center of the screen, and all images are aligned relative to those.
<?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:id="#+id/content_front"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:fillViewport="true"
android:gravity="center_vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".FrontActivity"
tools:showIn="#layout/activity_front"
>
<View
android:id="#+id/dummy"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<View
android:id="#+id/dummy2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/all1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/part2"
android:layout_margin="20dp"
android:layout_toLeftOf="#+id/dummy"
android:layout_toStartOf="#+id/dummy"
android:adjustViewBounds="false"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/all" />
<ImageView
android:id="#+id/part1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/part3"
android:layout_margin="20dp"
android:layout_toEndOf="#+id/dummy"
android:layout_toRightOf="#+id/dummy"
android:adjustViewBounds="false"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/part1" />
<ImageView
android:id="#+id/part2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/dummy2"
android:layout_marginBottom="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_toLeftOf="#+id/dummy"
android:layout_toStartOf="#+id/dummy"
android:adjustViewBounds="false"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/part2" />
<ImageView
android:id="#+id/part3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/dummy2"
android:layout_marginBottom="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_toEndOf="#+id/dummy"
android:layout_toRightOf="#+id/dummy"
android:adjustViewBounds="false"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/part3" />
<ImageView
android:id="#+id/part4"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#+id/dummy2"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="40dp"
android:layout_toLeftOf="#+id/dummy"
android:layout_toStartOf="#+id/dummy"
android:adjustViewBounds="false"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/part4" />
<ImageView
android:id="#+id/part5"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#+id/dummy2"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="40dp"
android:layout_toEndOf="#+id/dummy"
android:layout_toRightOf="#+id/dummy"
android:adjustViewBounds="false"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/part5" />
</RelativeLayout>
Any tips on how to make this more efficient would also be appreciated, thanks.
First tip: whenever you want dummy views that are nothing but spaces in your layouts, use the Space view.
Second tip: if you're supporting API 17 and above, include support for Start and End qualifiers, not (just, depending on your minSdk) Left and Right.
That said, what you're doing can be accomplished with either a TableLayout or GridLayout without using fake anchor views. It can still use a RelativeLayout without them, just aligning the position of [0,1] relative to [0,0], [1,0] according to [0,0], [1,1] to [1,0] and [0,1] and so on.
You did not fully specified your requirements, so I'll take the liberty to use a GridLayout because of code simplicity and flexibility to adapt to different configurations/needs in the future (I also suspect it will be less expensive than aligning positions relative to other views, but you'd have to check that yourself). Here I don't include Left and Right qualifiers because I'd probably be setting minSdk to 17 anyway:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingStart="#dimen/activity_horizontal_margin"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:columnCount="2"
android:layout_gravity="center_horizontal">
<!-- Set columnCount according to your needs. -->
<ImageView
android:id="#+id/image_1"
android:layout_width="100dp"
android:layout_height="100dp"
android:adjustViewBounds="false"
android:layout_margin="20dp"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/icon_1" />
<ImageView
android:id="#+id/image_2"
android:layout_width="100dp"
android:layout_height="100dp"
android:adjustViewBounds="false"
android:layout_margin="20dp"
android:contentDescription="#string/app_name"
android:scaleType="fitCenter"
android:src="#mipmap/icon_2" />
<!-- Rinse and repeat. -->
</GridLayout>

Create Spacing with Percentage Relative Layout

My problem is that I have four Buttons on the screen, I used a PercentageRelativeLayout to place them where I want them and everything was working great.
They even resize!
However, when they do resize, the Buttons start touching each other, and when I make it so they do not touch each other on a tablet, when I go back to a phone the space is too far apart.
Does anyone have any idea on how I could create a spacing that could work on all devices?
Because I thought that PercentageRelativeLayouts were the perfect solution to get things to resize, without using any LinearLayout and it is not working out the way I thought.
Below is my code
<android.support.percent.PercentRelativeLayout 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:background="#696969">
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/opt1"
android:scaleType="fitCenter"
android:id="#+id/purpleButton"
android:layout_align="#+id/option1"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt2"
android:scaleType="fitStart"
android:id="#+id/option2"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt3"
android:scaleType="fitStart"
android:id="#+id/option3"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/option4"
android:scaleType="fitCenter"
android:id="#+id/opt4"
android:longClickable="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Pick an Answer"
android:id="#+id/pickLabel"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
app:layout_widthPercent="100%"
app:layout_heightPercent="7%"
app:layout_marginTopPercent="15%"
android:textColor="#ffffff"
android:textAlignment="center"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_widthPercent="100%"
app:layout_heightPercent="12%"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="00"
android:id="#+id/timeLabel"
android:textAlignment="gravity"
android:textSize="72sp"
android:gravity="center|center_vertical|center_horizontal" />
You can set android:weightSum="1" on the outside layout and android:layout_weight="0.25" for the inside layouts.

Android Textview settext issue in Samsung J5

I have a "problem" with my application and I don't know what has happened.
I have this interface:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/white"
android:gravity="center"
android:textColor="#color/black" />
<TextView
android:id="#+id/detailServiceTxtPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="-35dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="50"
android:singleLine="true"
android:textColor="#color/black" />
</LinearLayout>
I get the field value from a web service and set text in java code:
m_txtPhone.setText(m_currentService.PassengerPhone);
In all the devices where I check it this is the result:
But I have a problem in with Samsung J5 (5.1.1). When I try to set text in that TextView (and similars) I have this result:
It seems that I have some problem setting the text or I don't know. Any idea?
NOTE:
I implement the interface in this way because in other cases I do something like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<Button
android:id="#+id/detailServiceBtnClient"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/white"
android:drawableRight="#drawable/icon_detail"
android:gravity="left|center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#string/detailServiceBtnClient"
android:textColor="#color/black" />
<TextView
android:id="#+id/detailServiceTxtClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="25dp"
android:layout_marginTop="-35dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="50"
android:singleLine="true"
android:textColor="#color/black" />
</LinearLayout>
You are using LinearLayout. In this layout items are added after each element. Your orientation is vertical, hence, it is below the button. Use RelativeLayout and then use alignTop and alignBottom properties of TextView.
android:alignTop="#+id/button"
android:alignBottom="#+id/button"
android:gravity="center"

Android Layout 2 images horizontally

I need to layout 2 images (longImg and shortImg) horizontally.
The longImg is too long to fit on screen, so really wanting to display a window of it, linked to a SeekBar where the user can scroll the part of the longImg. The container around the longImg must be at a fixed size so the shortImg is not nudged off screen.
What is the best way to do this?
So far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
</RelativeLayout>
It seems OK in Eclipse graphical layout, but when testing on device, I only get the long image.
How do you force the smallImg to be always present?
Thanks
Actually you using 'RelativeLayout' in that android:layout_weight="0.7" won't work unless its parent is Linear Layout. I have changed your xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
use This :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/short_image"
android:layout_weight="0.7"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</RelativeLayout>

Categories