Develop Reference

How do you create a Popup Window that looks like this?

I'd like to create a PopupWindow that looks like the blue one above, meaning it points to a view. How is it done?
The Popup Window I have so far doesn't point to anything and also can't be shaped to something similar to above.
popup_window.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#0D47A1"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is what this button does..."
android:textColor="#ffffff"/>
</LinearLayout>
And in code:
myButton.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View customView = layoutInflater.inflate(R.layout.popup_window,null);
//instantiate popup window
PopupWindow popupWindow = new PopupWindow(customView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//display the popup window
popupWindow.showAsDropDown(v);
return true;
}
});

I've achieved this with this external library that allows to customize it, it's an alternative to the other answer.
https://github.com/kcrimi/ToolTipDialog
Show a default dialog pop up banner
Align the dialog to a certain vertical location on screen
Point to a specific element on-screen
Highlight specific UI elements by letting them "peek through" a
background shade

Children from custom LinearLayout not displaying ripple effect

I'm using a custom LinearLayout (extends LinearLayout), so that and Adapter (BaseAdapter) can be attached to it.
(Thanks to the original author ofc.)
* #author Vincent Mimoun-Prat # MarvinLabs
*/
public class MyLinearLayout extends LinearLayout {
private static final String TAG = "MyLinearLayout";
private Adapter adapter;
....
private void reloadChildViews() {
removeAllViews();
if (adapter == null) return;
int count = adapter.getCount();
for (int position = 0; position < count; ++position) {
View v = adapter.getView(position, null, this);
if (v != null) {
int[] attrs =new int[]{R.attr.selectableItemBackground};
TypedArray typedArray =getContext().obtainStyledAttributes(attrs);
int backgroundResource =typedArray.getResourceId(0, 0);
v.setBackgroundResource(backgroundResource);
typedArray.recycle();
addView(v);
}
}
requestLayout();
}
}
So I'm basically adding each child dynamically via addView() method.
As you can see I've already attempted to place a ripple effect on each child view added programatically.
The child view that is added to this ViewGroup has the according attrs:
<layout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<data>
<variable
name="contentProduct"
type="com.example.flyhigh.data.pojos_entities.content.variations.ContentProduct" />
<variable
name="touchListener"
type="android.view.View.OnTouchListener"/>
</data>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.example.flyhigh.ui.DailyJournalFragment"
android:clickable="true"
android:focusable="true"
setOnTouchListener="#{touchListener}"
android:background="?android:attr/selectableItemBackground"
>
<TextView
.....
/>
</LinearLayout>
</layout>
The touchListener binded is working accordingly.
The LinearLayout:
<layout
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"
tools:context="com.example.flyhigh.adapters.PhaseTypePagerAdapter2"
>
<com.example.flyhigh.custom_artifacts.MyLinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:orientation="vertical"
android:background="?selectableItemBackground" //I've tried with this on and off
android:clickable="true" //I've tried with this on and off
android:focusable="true" //I've tried with this on and off
android:divider="#drawable/divider"
android:dividerPadding="10dp"
android:showDividers="middle"
/>
</layout>
This LinearLayout is inside a ViewPager.
This ViewPager is working without FragmentManager (its Adapter is a PagerAdapter).
How do I know its the LinearLayout obfuscating the children and not the ViewPager obfuscating everything? because when playing around the LinearLayout attributes, the changes become visible, this includes the actual ripple effect of the LinearLayout itself (not its children) when touched outside a children (I've given some room for this to be possible).
In case you want to see the ViewPager:
<com.example.flyhigh.custom_artifacts.MyViewPager
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
>
I'm planning to add a Drag and Drop functionality to each children but I'm afraid that this symptom will reach that functionality also.
I'm 100% sure the solution relies on overriding a Method in the MyLayout class but which one?

I appear to have had some concepts wrong about the order of how views overlap.
It seems that the order will always be that the last nested object is the one on top of everything else (how could I've thought it otherwise...), maybe I was confused by the way the code is written (in a nested way)...
Anyways...
The problem wasn't that the parent ViewGroup was obfuscating its more inner children, BUT the other way around:
It's always the children that obfuscate its parent.
To reprise my initial question, I thought my outer layout (a custom LinearLayout) was preventing the ripple effect from its list items (a ViewGroup also).
So, the solution, without using the android:foreground= that seems to be a popular one, is the next one:
This inside the ViewGroup you want highlighted with ripple effect (my list item):
<LinearLayout
...
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"
android:addStatesFromChildren="true" // this is the important one, but without the other attrs is useless
>
//obfuscating children should have the according:
<TextView
...
android:clickable="true"
android:focusable="true"
...
/>
<TextView
...
android:clickable="true"
android:focusable="true"
...
/>
<TextView
...
android:clickable="true"
android:focusable="true"
...
/>
Etc...etc...etc...
</LinearLayout>

Android Studio: Calling multiple Canvas in ScrollView to display 1 drawing (canvas) after another

I'm writing a code for a school project where one has to load a data file (CSV file, text file, etc) and from the obtained data, the app will pass the data to a custom draw View and the onDraw method will draw/plot a graph based on the data.
My goal is for the app to display 2 graphs, one after the other (stacked). The first set of data is loaded and the 1st graph is drawn. The loaded data is then used for a different calculation in a different method. The custom draw View is then called again with the new data to draw the 2nd graph.
When I run the app, both charts are drawn but because the x and y-axis' of the graph are coded to be drawn at certain fixed pixels, the 2nd graph is drawn over the first one and therefore only the 2nd graph is visible.
Is there any way I can draw the 2 graphs so that it does not overlap and instead appears to be stacked in ScrollView?
My code is shown below but I've gotten rid of calculations that I think aren't very important. Any help and pointers would be very much appreciated!
MainActivity.java:
#Override
protected void onActivityResult(......) {
super.onActivityResult(......);
switch (1) {
case 1:
Graph graph = this.findViewById(R.id.graph1);
graph.setData(data); // the loaded data is passed to Graph View
Graph drawGraph2 = this.findViewById(R.id.graph2);
graph2.setData(this.newCalculate(data));
break;
}
}
Graph.java
public class Graph extends View {
private Paint mPaint = new Paint();
private final int zero = 700; // mark the 0 line of graph at 700 pixels
public void setData(data){
......
}
public Graph(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
}
#Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(widthSize, heightSize);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
plotUnit(canvas); // plot points on graph
axisLabel(canvas); // label axis
axisLine(canvas); // draw axis
xyAxisMarker(canvas); // mark axis
}
private void plotUnit(Canvas canvas) {
......
// Due to data having negative values, the graph is inverted and the 0 starts
// of the graph is defined at 700 pixels （private final int zero)
}
private void axisLabel(Canvas canvas) {
......
}
private void axisLine(Canvas canvas, int inset) {
......
}
private void xyAxisMarker(Canvas canvas) {
......
}
Update
activity_main.xml
<?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="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/loadbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Open Data File" />
<firstapp.drawtwograph.Graph
android:id="#+id/graph1"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<firstapp.drawtwograph.Graph
android:id="#+id/graph2"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
</ScrollView>
</LinearLayout>

You cannot have two views' heights match parent height inside of a LinearLayout with vertical orientation. It is not possible because heights of these views must be equal to the parent height but at the same time, they must be ordered one after the other resulting in double of parent's height.
If you imagine parent's height as 10dp then each of the Graph views must be 10dp as well which means parent's height must be 20dp, not 10dp. That is going to cycle forever so the Android does a simple thing: views that are going below the first child view with android:layout_height="match_parent" will have height 0dp or if their height is fixed they will be drawn outside of the layout and will not be visible.
Example
Screenshot from Design tab of layout editor in Android Studio IDE.
Here you can see:
red view as a parent linear layout;
purple view as a first child with height matching it's parent height;
outlined view that is drawn outside of the layout because it is pushed out by the first child with android:layout_height="match_parent";
there is one more view that is crushed to 0 height and thus not visible. You can see it down in the XML code.
XML code of this sample:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_red_light">
<LinearLayout
android:background="#color/colorPrimary"
android:layout_width="60dp"
android:layout_height="match_parent" <!-- this view's height is a problem -->
android:orientation="vertical"/>
<LinearLayout
android:background="#android:color/holo_green_dark"
android:layout_width="120dp"
android:layout_height="match_parent" <!-- height is not fixed, then it will be 0 -->
android:orientation="vertical"/>
<LinearLayout
android:background="#android:color/holo_green_light"
android:layout_width="120dp"
android:layout_height="40dp" <!-- height is fixed, it is outlined outside of a layout -->
android:orientation="vertical"/>
</LinearLayout>
How to fix the issue?
Set fixed height. As a test try to define a fixed height, e.g. 100dp;
Redesign your layout. Use RelativeLayout or ConstraintLayout to position views relative to each other so that they are always visible no matter what the screen size, ratio, density is.
Example of how to fix
I personally prefer ConstraintLayout as it is very powerful in terms of positioning and adaptation.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<Button
android:id="#+id/loadbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Open Data File"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<firstapp.drawtwograph.Graph
android:id="#+id/graph1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/graph2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/loadbutton" />
<firstapp.drawtwograph.Graph
android:id="#+id/graph2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/graph1" />
</androidx.constraintlayout.widget.ConstraintLayout>
The result is (I used two buttons instead of Graph views):
Hints:
If you want to use ScrollView then setting fixed height or defining height at runtime will be required.
Get rid of private final int zero = 700; // mark the 0 line of graph at 700 pixels. Do not use pixel values directly as it will lead to error-prone UI. It will be the case of "work on my phone, does not work the other". Use view's height as the 0 line.

How to add a one-side border and background into one drawable?

I have an ImageButton and to that in the android:background property I currently have a xml drawable which changes the ImageButton background color when pressed. This is all good but I also want to add a top border to each of these ImageButton's.
Here's a sample image I created to better get my point across.
These buttons will also have an active state which indicates the current active button and I can set that as a drawable using Java code.

You can use multiple drawables to get your work done. You can have drawable icons/images with the top border and the same without the top border and use the setBackgroundResource method to switch image backgrounds. (I believe you want to show the images with top border as currently selected tool icon, right?).
As you're going to construct several such image buttons like a toolbox, you'll have to make sure their selection states are controlled properly. If one image-button is selected all others should show the unselected drawable.
I threw together some codes and built this small example. Hope you'll find it useful.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageButton imButton1 = (ImageButton) findViewById(R.id.imButton1);
final ImageButton imButton2 = (ImageButton) findViewById(R.id.imButton2);
final ImageButton imButton3 = (ImageButton) findViewById(R.id.imButton3);
imButton1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_selected);
imButton2.setBackgroundResource(R.drawable.icon2_unselected);
imButton3.setBackgroundResource(R.drawable.icon3_unselected);
}
});
imButton2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_unselected);
imButton2.setBackgroundResource(R.drawable.icon2_selected);
imButton3.setBackgroundResource(R.drawable.icon3_unselected);
}
});
imButton3.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v)
{
imButton1.setBackgroundResource(R.drawable.icon1_unselected);
imButton2.setBackgroundResource(R.drawable.icon2_unselected);
imButton3.setBackgroundResource(R.drawable.icon3_selected);
}
});
}
}
And this is it's Layout:
<RelativeLayout 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:background="#bbb"
tools:context="${packageName}.${activityClass}" >
<ImageButton
android:id="#+id/imButton1"
android:layout_toLeftOf="#+id/imButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_alignTop="#+id/imButton2"
android:background="#drawable/icon1_unselected" />
<ImageButton
android:id="#id/imButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="23dp"
android:layout_alignParentTop="true"
android:background="#drawable/icon2_selected" />
<ImageButton
android:id="#+id/imButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imButton2"
android:layout_toRightOf="#id/imButton2"
android:background="#drawable/icon3_unselected" />
</RelativeLayout>
A screen-shot of the image buttons working.
Hope this helps.

I solved it by creating two seperate drawable xml files such that one has a top border and white color background and other one has same color border with a bit grey background. Then in the selector xml file all I had to do was assign each of these xml files to their respective states and problem solved. :)

try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="-6dp"
android:right="-6dp"
android:bottom="-6dp">
<shape>
<stroke
android:width="5dp"
android:color="#6c6c6c" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>

hey you may use view for border like that,you put this in your all side of your image view then you can see,
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000" />
whatever color you want to use. thanks

Crash when setting parameter to layout in Android

Expected Result
Clicking on the toggle button will show up the menu and slide out the content view rightward. After animation is finished, the layout parameters of the content view gets updated to the final position.
Problem
When updating the final position of the content view, the statement mViewContent.setLayoutParams(params); causes the crash. The error message is java.lang.ClassCastException: android.widget.LinearLayout$LayoutParams
Source Code
Main.java > public class MainActivity extends Activity {}
public void onToggleButtonMenuClicked(View view) {
// Is the toggle on?
boolean toggleTurnedOn = ((ToggleButton) view).isChecked();
if (toggleTurnedOn) { // If the toggle is turned on
// Show menu
LinearLayout mViewMenu = (LinearLayout) findViewById(R.id.linear_layout_menu);
Animation animMenuOn = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_menu_on);
mViewMenu.startAnimation(animMenuOn);
LinearLayout mViewContent = (LinearLayout) findViewById(R.id.linear_layout_content);
Animation animContentOff = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_content_off);
mViewContent.startAnimation(animContentOff);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(480, 800);
params.leftMargin = 384; // Shift 384 pixels from left screen border
params.rightMargin = -96; // Exceed 96 pixels from right screen border
mViewContent.setLayoutParams(params); // This statement causes crash!
} else {
// Hide menu...
} // End of toggle events handling
} // End of onToggleButtonMenuClicked()
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="329dp"
android:layout_height="wrap_content" >
<!-- The Menu View -->
<LinearLayout
android:id="#+id/linear_layout_menu"
android:layout_width="263dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/table_row_1_search_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:weightSum="10"
android:orientation="horizontal" >
<EditText
android:id="#+id/edit_text_search_id"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="7"
android:hint="#string/edit_text_search_id"
android:textSize="14sp" />
<Button
android:id="#+id/button_search_id"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="3"
android:text="#string/button_search_id" />
</LinearLayout>
<!-- Other rows in the menu are omitted -->
</LinearLayout> <!-- End of Menu -->
<!-- The Content View -->
<LinearLayout
android:id="#+id/linear_layout_content"
android:layout_width="329dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ToggleButton
android:id="#+id/toggle_button_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onToggleButtonMenuClicked" />
<TextView
android:id="#+id/text_content"
android:layout_width="480dp"
android:layout_height="wrap_content"
android:text="#string/text_content" />
</LinearLayout> <!-- End of Content -->
</FrameLayout> <!-- End of the root linear layout -->

mViewContent params should be added with resp to your Parent view, suppose you have parent view as LinearLayout then, LinearLayout.LayoutParams must be used.
Explanation (Adapted from here):-
Take for example, LinearLayout.LayoutParams and RelativeLayout.LayoutParams, they are different independent classes. They store different additional information about child views... say..
LinearLayout.LayoutParams can associate weight value with each
view, while RelativeLayout.LayoutParams can't.
RelativeLayout.LayoutParams can have values like alightWithParent,above, below
with each view while LinearLayout.LayoutParams can't.
Although the code will not give compile time error because all LayoutParams have same parent class i.e. ViewGroup.LayoutParams. So, it is always essential, to assign Layout params with respect to parent layout..

make sure you imported the correct layout params
import android.widget.LinearLayout.LayoutParams;