I found a couple of questions regarding rangebars (seekbars with two thumbs) on Android, like Android Seekbar with two thumbs or working with SeekBar with two thumbs. All the answers point to components that look quite outdated since Material Design and thus AppCompat was released.
What I'm looking for is a Rangebar that looks like the AppCompatSeekBar with two thumbs. Are there any available libraries or ways to hack into the platform SeekBar so that the available resources can be reused?
This is my first time answering something here.
I created my own custom rangebar as follows.
Create the following files.
RangeBar.java
public class RangeBar extends FrameLayout{
int minVal = 0;
int maxVal = 100;
Context context;
ImageView leftThumb;
ImageView rightThumb;
View view;
int leftThumbPos = 0;
int rightThumbPos = 100;
public RangeBar(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
this.view = inflate(getContext(), R.layout.range_seekbar, null);
addView(this.view);
}
public RangeBar(Context context){
super(context);
this.context = context;
this.view = inflate(getContext(), R.layout.range_seekbar, null);
addView(this.view);
}
public void create() {
leftThumb = (ImageView)findViewById(R.id.left_thumb);
rightThumb = (ImageView)findViewById(R.id.right_thumb);
final View leftBar = findViewById(R.id.left_bar);
final View rightBar = findViewById(R.id.right_bar);
final View middleBar = findViewById(R.id.middle_bar);
final LinearLayout.LayoutParams leftBarLayoutParams = (LinearLayout.LayoutParams) leftBar.getLayoutParams();
final LinearLayout.LayoutParams rightBarLayoutParams = (LinearLayout.LayoutParams) rightBar.getLayoutParams();
final LinearLayout.LayoutParams middleBarLayoutParams = (LinearLayout.LayoutParams) middleBar.getLayoutParams();
final LinearLayout llRangeSeekbar = (LinearLayout)findViewById(R.id.ll_range_seekbar);
((TextView)findViewById(R.id.tv_range_max)).setText(maxVal+"");
((TextView)findViewById(R.id.tv_range_min)).setText(minVal+"");
leftThumbPos = Integer.parseInt(((TextView)findViewById(R.id.tv_range_min)).getText()+"");
rightThumbPos = Integer.parseInt(((TextView)findViewById(R.id.tv_range_max)).getText()+"");
leftThumb.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
int diff = maxVal - minVal;
if(diff < 0){
diff = 100;
minVal = 0;
maxVal = 100;
}
float width = llRangeSeekbar.getWidth();
float gap = leftThumb.getWidth();
if (event.getAction() == MotionEvent.ACTION_DOWN) {
leftThumb.bringToFront();
return true;
}else if (event.getAction() == MotionEvent.ACTION_MOVE ) {
float temp1 = leftBarLayoutParams.weight;
float temp2 = middleBarLayoutParams.weight;
leftBarLayoutParams.weight += event.getX()/width;
middleBarLayoutParams.weight = 1 - (leftBarLayoutParams.weight + rightBarLayoutParams.weight);
int tempMaxVal = Integer.parseInt(((TextView)findViewById(R.id.tv_range_max)).getText()+"");
int tempMinVal = (int)(diff*leftBarLayoutParams.weight + minVal);
if(tempMinVal > tempMaxVal){
tempMinVal = tempMaxVal;
}
if(tempMinVal < minVal){
tempMinVal = minVal;
}
((TextView)findViewById(R.id.tv_range_min)).setText(tempMinVal + "");
if(middleBarLayoutParams.weight > gap/width && leftBarLayoutParams.weight >= 0){
leftBar.setLayoutParams(leftBarLayoutParams);
middleBar.setLayoutParams(middleBarLayoutParams);
}else {
if(leftBarLayoutParams.weight < 0){
leftBarLayoutParams.weight = 0;
middleBarLayoutParams.weight = 1 - (rightBarLayoutParams.weight + leftBarLayoutParams.weight);
}else{
middleBarLayoutParams.weight = gap/width + (tempMaxVal - tempMinVal)/(1.0f*diff);
leftBarLayoutParams.weight = 1 - (middleBarLayoutParams.weight + rightBarLayoutParams.weight);
}
leftBar.setLayoutParams(leftBarLayoutParams);
middleBar.setLayoutParams(middleBarLayoutParams);
}
return true;
}else if (event.getAction() == MotionEvent.ACTION_UP) {
leftThumbPos = Integer.parseInt(((TextView)findViewById(R.id.tv_range_min)).getText()+"");
return true;
}else
{
return false;
}
}
});
rightThumb.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
int diff = maxVal - minVal;
if(diff < 0){
diff = 100;
minVal = 0;
maxVal = 100;
}
float width = llRangeSeekbar.getWidth();
float gap = leftThumb.getWidth();
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rightThumb.bringToFront();
return true;
}else if (event.getAction() == MotionEvent.ACTION_MOVE) {
float temp1 = middleBarLayoutParams.weight;
float temp2 = rightBarLayoutParams.weight;
rightBarLayoutParams.weight -= (event.getX()/width);
middleBarLayoutParams.weight = 1 - (rightBarLayoutParams.weight + leftBarLayoutParams.weight);
int tempMinVal = Integer.parseInt(((TextView)findViewById(R.id.tv_range_min)).getText()+"");
int tempMaxVal = (int)(diff*(1 - rightBarLayoutParams.weight) + minVal);
if(tempMaxVal < tempMinVal){
tempMaxVal = tempMinVal;
}
if(tempMaxVal > maxVal){
tempMaxVal = maxVal;
}
((TextView)findViewById(R.id.tv_range_max)).setText(tempMaxVal+"");
if(middleBarLayoutParams.weight > gap/width && rightBarLayoutParams.weight >= 0){
rightBar.setLayoutParams(rightBarLayoutParams);
middleBar.setLayoutParams(middleBarLayoutParams);
}else{
if(rightBarLayoutParams.weight < 0){
rightBarLayoutParams.weight = 0;
middleBarLayoutParams.weight = 1 - (rightBarLayoutParams.weight + leftBarLayoutParams.weight);
}else {
middleBarLayoutParams.weight = gap/width + (tempMaxVal - tempMinVal)/(1.0f*diff);
rightBarLayoutParams.weight = 1 - (leftBarLayoutParams.weight + middleBarLayoutParams.weight);
}
rightBar.setLayoutParams(rightBarLayoutParams);
middleBar.setLayoutParams(middleBarLayoutParams);
}
return true;
}else if (event.getAction() == MotionEvent.ACTION_UP) {
rightThumbPos = Integer.parseInt(((TextView)findViewById(R.id.tv_range_max)).getText()+"");
return true;
}
else
{
return false;
}
}
});
}
public int getMinVal() {
return minVal;
}
public void setMinVal(int minVal) {
this.minVal = minVal;
}
public int getMaxVal() {
return maxVal;
}
public void setMaxVal(int maxVal) {
this.maxVal = maxVal;
}
public int getLeftThumbPos() {
return leftThumbPos;
}
public void setLeftThumbPos(int leftThumbPos) {
this.leftThumbPos = leftThumbPos;
}
public int getRightThumbPos() {
return rightThumbPos;
}
public void setRightThumbPos(int rightThumbPos) {
this.rightThumbPos = rightThumbPos;
}
}
and range_seekbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:id="#+id/ll_range_seekbar"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_weight="0"
android:id="#+id/left_bar"
android:background="#color/light_grey"
android:layout_height="1dp"/>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/middle_bar"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_centerVertical="true"
android:id="#+id/middle_view"
android:layout_toRightOf="#+id/left_thumb"
android:layout_toLeftOf="#+id/right_thumb"
android:background="#color/color_select_sky_blue"
android:layout_height="1dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/left_thumb"
android:layout_alignParentLeft="true"
android:src="#drawable/seek_thumb_normal"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_thumb"
android:layout_alignParentRight="true"
android:src="#drawable/seek_thumb_normal"/>
</RelativeLayout>
<View
android:layout_width="0dp"
android:layout_weight="0"
android:id="#+id/right_bar"
android:background="#color/light_grey"
android:layout_height="1dp"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:id="#+id/tv_range_min"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:id="#+id/tv_range_max"/>
</RelativeLayout>
</LinearLayout>
Use them in the activity as follows.
Test.java
public class Test extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
RangeBar rangeBar = (RangeBar) findViewById(R.id.rangebar);
rangeBar.setMinVal(25);
rangeBar.setMaxVal(50);
rangeBar.create();
}
}.
This is the layout file for the activity.
test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_margin="50dp"
android:layout_height="match_parent">
<com.example.pankajkumar.Utils.RangeBar
android:id="#+id/rangebar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Related
I tried that:
if (pic_runner.getX() + pic_runner.getY() == pic_a.getX() + pic_a.getY()){
Toast.makeText(getApplicationContext(), "KOLLIDIERT!", Toast.LENGTH_SHORT).show();
}
But that didn't work.
And I tried the same with && operators, but then I get the error "Operator '&&' cannot be applied to 'float', 'boolean'"
To check the collision of two ImageViews, you could do something like this:
{
ImageView pic1 = (ImageView) findViewById(R.id.pic1);
ImageView pic2 = (ImageView) findViewById(R.id.pic2);
Rect pic1Rect = new Rect();
Rect pic2Rect = new Rect();
pic1.getDrawingRect(pic1Rect);
pic2.getDrawingRect(pic2Rect);
Log.e("TEST", "hasCollision: " + hasCollision(pic1Rect, pic2Rect));
}
public static boolean hasCollision(Rect one, Rect two) {
return (one.left < two.right &&
one.right > two.left &&
one.top < two.bottom &&
one.bottom > two.top);
}
EDIT
public class MainActivity extends AppCompatActivity {
private ImageView pic1;
private ImageView pic2;
private Rect pic1Rect = new Rect();
private Rect pic2Rect = new Rect();
private boolean collisionEventHandled = false;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pic1 = (ImageView) findViewById(R.id.pic1);
pic2 = (ImageView) findViewById(R.id.pic2);
RelativeLayout main = (RelativeLayout) findViewById(R.id.main);
Button btn = (Button) findViewById(R.id.button);
main.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
pic2.setX(event.getX());
pic2.setY(event.getY());
return true;
}
});
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
pic1Rect.left = (int) pic1.getX();
pic1Rect.top = (int) pic1.getY();
pic1Rect.right = (int) pic1.getX() + pic1.getWidth();
pic1Rect.bottom = (int) pic1.getY() + pic1.getHeight();
pic2Rect.left = (int) pic2.getX();
pic2Rect.top = (int) pic2.getY();
pic2Rect.right = (int) pic2.getX() + pic2.getWidth();
pic2Rect.bottom = (int) pic2.getY() + pic2.getHeight();
Log.e("TEST", "handleCollision: " + handleCollision(pic1Rect, pic2Rect));
}
});
}
private boolean handleCollision(Rect one, Rect two) {
boolean hasCollision = hasCollision(one, two);
if (collisionEventHandled != hasCollision) {
collisionEventHandled = hasCollision;
return hasCollision;
}
return false;
}
private static boolean hasCollision(Rect one, Rect two) {
return (one.left < two.right &&
one.right > two.left &&
one.top < two.bottom &&
one.bottom > two.top);
}
}
and the xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true">
<ImageView
android:id="#+id/pic1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:background="#android:color/holo_red_dark"/>
<ImageView
android:id="#+id/pic2"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
I am working on a project where I need to design two vertical sliders as shown in the image below
I had developed code which working fine in a range of 0 to 100.
But I am not sure of how to convert it to 18 to 80
Here I am adding my class and view XML
any help is appreciated.
Following is my Layout
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.os.Build;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.RelativeLayout;
import android.widget.TextView;
import wedviser.com.wedviser.R;
/**
* Created by Focaloid on 29-12-2016.
*/
public class RangeBarVerticalAge extends RelativeLayout {
private static final int TOTAL_DIVISION_COUNT = 100;
private static final int MAX_CLICK_DURATION = 200;
public OnRangeBarChangeListener onRangeBarChangeListener;
private int inactiveColor;
private int activeColor;
private double heightParent;
private View viewFilterMain, viewThumbMin, viewThumbMax;
private RelativeLayout relFilterMin, relFilterMax;
private float startYMin, startYMax;
private float movedYMin, movedYMax;
private int initialHeightMin;
private float dTopMin, dTopMax;
private int currentHeightMin, currentHeightMax;
private double resultMin = 0.0;
private double resultMax = 100.0;
private View viewParent;
// private TextView tvFilterMin, tvFilterMax;
private Context context;
private long startClickTime;
private RelativeLayout relativeLayout;
private int minRange = 0, maxRange = 100;
private View viewInActiveTop, viewInActiveBottom;
public RangeBarVerticalAge(Context context) {
super(context);
this.context = context;
initialize(context);
}
public RangeBarVerticalAge(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RangeBarVerticalAge, 0, 0);
System.out.println(a.getIndexCount());
activeColor = a.getColor(R.styleable.RangeBarVerticalAge_activeColor, Color.parseColor("#007FFF"));
inactiveColor = a.getColor(R.styleable.RangeBarVerticalAge_inactiveColor, Color.parseColor("#808080"));
a.recycle();
initialize(context);
}
public RangeBarVerticalAge(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
initialize(context);
}
public static float convertDpToPixel(float dp, Context context) {
Resources resources = context.getResources();
DisplayMetrics metrics = resources.getDisplayMetrics();
return dp * ((float) metrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT);
}
private void initialize(Context context) {
inflate(context, R.layout.rangebar_age, this);
onRangeBarChangeListener = (OnRangeBarChangeListener) context;
onRangeBarChangeListener.onRangeBarChangeAge((int) resultMin, (int) resultMax);
relativeLayout = (RelativeLayout) findViewById(R.id.rel_main);
// tvFilterMin = (TextView) findViewById(R.id.tv_filter_min);
//tvFilterMax = (TextView) findViewById(R.id.tv_filter_max);
relFilterMin = (RelativeLayout) findViewById(R.id.rel_filter_min);
relFilterMax = (RelativeLayout) findViewById(R.id.rel_filter_max);
viewThumbMax = findViewById(R.id.oval_thumb_max);
viewThumbMin = findViewById(R.id.oval_thumb_min);
viewFilterMain = findViewById(R.id.filter_main_view);
viewParent = findViewById(R.id.view_filter_parent);
viewInActiveTop = findViewById(R.id.view_inactive_line_top);
viewInActiveBottom = findViewById(R.id.view_inactive_line_bottom);
init();
relFilterMin.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startYMin = event.getRawY();
// startClickTime = Calendar.getInstance().getTimeInMillis();
break;
case MotionEvent.ACTION_UP: {
// long clickDuration = Calendar.getInstance().getTimeInMillis() - startClickTime;
// if (clickDuration < MAX_CLICK_DURATION) {
// //Click event triggered
//
// }
break;
}
case MotionEvent.ACTION_MOVE:
movedYMin = event.getRawY() - startYMin;
startYMin = event.getRawY();
if (v.getHeight() + movedYMin <= initialHeightMin || dTopMin + v.getHeight() + movedYMin >= dTopMax) {
currentHeightMin = v.getHeight();
getResultMin();
break;
}
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height += movedYMin;
v.setLayoutParams(layoutParams);
dTopMin = v.getY();
currentHeightMin = v.getHeight();
getResultMin();
break;
default:
return false;
}
return true;
}
});
relFilterMax.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startYMax = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
movedYMax = event.getRawY() - startYMax;
startYMax = event.getRawY();
if (v.getHeight() - movedYMax <= initialHeightMin || v.getY() + movedYMax <= currentHeightMin + dTopMin) {
currentHeightMax = v.getHeight();
getResultMax();
break;
}
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height -= movedYMax;
v.setLayoutParams(layoutParams);
dTopMax = v.getY();
currentHeightMax = v.getHeight();
getResultMax();
break;
default:
return false;
}
return true;
}
});
}
private void init() {
// ViewCompat.setElevation(tvFilterMin, 100f);
viewFilterMain.setBackgroundColor(activeColor);
viewInActiveBottom.setBackgroundColor(inactiveColor);
viewInActiveTop.setBackgroundColor(inactiveColor);
initialHeightMin = (int) convertDpToPixel(30, context);
final ViewTreeObserver viewTreeObserver = relativeLayout.getViewTreeObserver();
// if (viewTreeObserver.isAlive())
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
viewParent.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
viewParent.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
dTopMin = relFilterMin.getY();
dTopMax = relFilterMax.getY();
currentHeightMin = relFilterMin.getHeight();
System.out.println("viewParentGetHeight:" + viewParent.getHeight());
heightParent = viewParent.getHeight() - 2 * initialHeightMin;
}
});
}
public void getResultMin() {
//Max
resultMin = Math.floor(100 * (Math.abs(currentHeightMin - initialHeightMin)) / heightParent);
//tvFilterMin.setText((int) resultMin + "");
onRangeBarChangeListener.onRangeBarChangeAge((int) resultMin, (int) resultMax);
}
public void getResultMax() {
resultMax = Math.floor(100 * (Math.abs(currentHeightMax - initialHeightMin)) / heightParent);
resultMax = Math.abs(resultMax - 100);
//tvFilterMax.setText(((int) resultMax + ""));
onRangeBarChangeListener.onRangeBarChangeAge((int) resultMin, (int) resultMax);
}
public int getMinimumProgress() {
return (int) resultMin;
}
public void setMinimumProgress(final int minProgress) {
if (minProgress >= 0 && minProgress < 100 && minProgress < resultMax) {
resultMin = minProgress;
viewParent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
viewParent.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
viewParent.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
currentHeightMin = ((minProgress * (viewParent.getHeight() - 2 * initialHeightMin) / 100) + initialHeightMin);
ViewGroup.LayoutParams layoutParams = relFilterMin.getLayoutParams();
layoutParams.height = currentHeightMin;
relFilterMin.setLayoutParams(layoutParams);
}
});
//tvFilterMin.setText((int) resultMin + "");
onRangeBarChangeListener.onRangeBarChangeAge((int) resultMin, (int) resultMax);
}
}
public int getMaximumProgress() {
return (int) resultMax;
}
public void setMaximumProgress(final int maxProgress) {
if (maxProgress >= 0 && maxProgress <= 100 && maxProgress > resultMin) {
resultMax = maxProgress;
viewParent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
viewParent.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
viewParent.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
currentHeightMax = ((Math.abs(maxProgress - 100) * (viewParent.getHeight() - 2 * initialHeightMin) / 100) + initialHeightMin);
ViewGroup.LayoutParams layoutParams = relFilterMax.getLayoutParams();
layoutParams.height = currentHeightMax;
relFilterMax.setLayoutParams(layoutParams);
}
});
// tvFilterMax.setText((int) resultMax + "");
onRangeBarChangeListener.onRangeBarChangeAge((int) resultMin, (int) resultMax);
}
}
public interface OnRangeBarChangeListener {
void onRangeBarChangeAge(int min, int max);
}
}
Folowing is my XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rel_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical"
android:animateLayoutChanges="true"
>
<View
android:id="#+id/view_filter_parent"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:clickable="false" />
<View
android:id="#+id/filter_main_view"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginBottom="20dp"
android:layout_alignRight="#+id/rel_filter_min"
android:layout_alignEnd="#+id/rel_filter_min"
android:layout_marginRight="11dp"
android:layout_marginEnd="11dp"
android:background="#2196f3" />
<RelativeLayout
android:id="#+id/rel_filter_min"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
>
<RelativeLayout
android:id="#+id/rel_filter_min_text"
android:layout_alignParentBottom="true"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="#android:color/transparent"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></RelativeLayout>
<View
android:id="#+id/view_inactive_line_top"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_alignLeft="#+id/oval_thumb_min"
android:layout_alignStart="#+id/oval_thumb_min"
android:layout_marginLeft="8.5dp"
android:layout_marginStart="8.5dp"
android:layout_marginBottom="10dp"
android:background="#808080" />
<View
android:id="#+id/oval_thumb_min"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_toRightOf="#+id/rel_filter_min_text"
android:layout_toEndOf="#+id/rel_filter_min_text"
android:layout_centerInParent="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
android:background="#drawable/oval_shape"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rel_filter_max"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/filter_main_view"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/filter_main_view"
android:layout_gravity="bottom"
android:layout_marginLeft="-11dp"
android:layout_marginStart="-11dp">
<View
android:id="#+id/view_inactive_line_bottom"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10.5dp"
android:layout_marginStart="10.5dp"
android:layout_marginTop="15dp"
android:background="#808080" />
<View
android:id="#+id/oval_thumb_max"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/oval_shape"
/>
</RelativeLayout>
</RelativeLayout>
Can anyone please suggest how to implement the following in my droid app?
I've created a custom gallery, and when an image is selected, I show a preview of the image exactly like instagram. Now when I scoll up, I need some 20% of the image view to stick to the top like this:
I'm right now using, Observablegrid view, which is of not that much use!
Please suggest any ideas. Thanks!
Here is my answer using the same Observablegridview, which got to work after some analysis and modifications while scrolling the grid.
For the grid of image to be displayed, use this ObservableGridView.java
Here is the xml layout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/mainFrame">
<com.sampleapp.Observablescroll.ObservableGridView
android:id="#+id/camera_gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:numColumns="4" />
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/gallery_lay"
android:layout_width="wrap_content"
android:layout_height="365dp"
android:background="#color/black"
android:orientation="vertical">
<com.fenchtose.nocropper.CropperImageView
android:id="#+id/gallery_click_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
app:grid_color="#color/action_bar_color" />
</RelativeLayout>
<View
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="300dp" />
</RelativeLayout>
</FrameLayout>
In your java class, implement ObservableScrollViewCallbacks
mHeaderView = (RelativeLayout) rootview.findViewById(R.id.header);
mToolbarView = rootview.findViewById(R.id.toolbar);
camera_gridView = (ObservableGridView) rootview.findViewById(R.id.camera_gridView);
LayoutInflater inflaters = LayoutInflater.from(getActivity());
camera_gridView.addHeaderView(inflaters.inflate(R.layout.image_holder_view, camera_gridView, false));
// view that leaves 300dp space to display the selected image from the grid
camera_gridView.addHeaderView(inflaters.inflate(R.layout.sticky_tool_bar_view, camera_gridView, false));
// a sticky view with action bar's height, so that the grid doesn't scroll above this
camera_gridView.setScrollViewCallbacks(this);
//overridden methods
#Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
if (dragging) {
int toolbarHeight = mToolbarView.getHeight();
// int toolbarHeight = 300;
if (camera_gridView.getCurrentScrollY() == 0) {
showToolbar();
}
if (firstScroll) {
float currentHeaderTranslationY = ViewHelper.getTranslationY(mHeaderView);
if (-toolbarHeight < currentHeaderTranslationY) {
mBaseTranslationY = scrollY;
}
}
float headerTranslationY = ScrollUtils.getFloat(-(scrollY - mBaseTranslationY), -toolbarHeight, 0);
ViewPropertyAnimator.animate(mHeaderView).cancel();
ViewHelper.setTranslationY(mHeaderView, headerTranslationY);
}
}
#Override
public void onDownMotionEvent() {
}
#Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
mBaseTranslationY = 0;
if (scrollState == ScrollState.DOWN) {
int toolbarHeight = mToolbarView.getHeight();
if (camera_gridView.getCurrentScrollY() == 0) {
showToolbar();
}
int scrollY = camera_gridView.getCurrentScrollY();
if (toolbarHeight <= scrollY) {
hideToolbar();
} else {
showToolbar();
}
} else if (scrollState == ScrollState.UP) {
int toolbarHeight = mToolbarView.getHeight();
int scrollY = camera_gridView.getCurrentScrollY();
if (toolbarHeight <= scrollY) {
System.out.println("++++upif" + scrollY);
hideToolbar();
} else {
System.out.println("++++upelse" + scrollY);
showToolbar();
}
if (camera_gridView.getCurrentScrollY() == 0) {
showToolbar();
}
} else {
if (!toolbarIsShown() && !toolbarIsHidden()) {
showToolbar();
}
}
}
//method to show the toolbar
private void showToolbar() {
float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
if (headerTranslationY != 0) {
ViewPropertyAnimator.animate(mHeaderView).cancel();
ViewPropertyAnimator.animate(mHeaderView).translationY(0).setDuration(200).start();
}
}
//method to hide the toolbar
private void hideToolbar() {
float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
int toolbarHeight = mToolbarView.getHeight();
if (headerTranslationY != -toolbarHeight) {
ViewPropertyAnimator.animate(mHeaderView).cancel();
ViewPropertyAnimator.animate(mHeaderView).translationY(-toolbarHeight).setDuration(200).start();
}
}
private boolean toolbarIsShown() {
return ViewHelper.getTranslationY(mHeaderView) == 0;
}
private boolean toolbarIsHidden() {
return ViewHelper.getTranslationY(mHeaderView) == -mToolbarView.getHeight();
}
<?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="wrap_content"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_below="#+id/mainFrame">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/gallery_lay"
android:layout_width="wrap_content"
android:layout_height="365dp"
android:background="#color/black"
android:orientation="vertical">
<com.fenchtose.nocropper.CropperView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff282828"
app:nocropper__grid_color="#color/colorAccent"
app:nocropper__grid_opacity="0.8"
app:nocropper__grid_thickness="0.8dp"
app:nocropper__padding_color="#color/colorAccent" />
</RelativeLayout>
</RelativeLayout>
<com.myapp.Util.ObservableGridView
android:id="#+id/camera_gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:numColumns="4" />
</FrameLayout>
And below is java implementation
public class GalleryFragmentTest2 extends Fragment implements View.OnClickListener, ImageGridItemListner, ObservableScrollViewCallbacks {
private static final String TAG = "GalleryFragment";
CropperView mImageView;
RecyclerView recImgHolder;
CoordinatorLayout container;
AppBarLayout app_bar_main;
private Bitmap originalBitmap;
private Bitmap mBitmap;
private boolean isSnappedToCenter = false;
private int rotationCount = 0;
//constants
private static final int NUM_GRID_COLUMNS = 4;
//widgets
private GridView gridView;
private ImageView galleryImage;
private Spinner directorySpinner;
//vars
private ArrayList<Model_images> directories;
private String mAppend = "file://";
private String mSelectedImage;
RelativeLayout mHeaderView, relCropperView;
ObservableGridView camera_gridView;
private int mBaseTranslationY;
private void initImageLoader() {
UniversalImageLoader universalImageLoader = new UniversalImageLoader(getContext());
ImageLoader.getInstance().init(universalImageLoader.getConfig());
}
#SuppressLint("ClickableViewAccessibility")
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.gallery_test2, container, false);
mHeaderView = (RelativeLayout) view.findViewById(R.id.header);
View mToolbarView = view.findViewById(R.id.toolbar);
camera_gridView = (ObservableGridView) view.findViewById(R.id.camera_gridView);
LayoutInflater inflaters = LayoutInflater.from(getActivity());
View view1 = inflaters.inflate(R.layout.snippet_top_gallerytoolbar,camera_gridView,false);
View view2 = inflaters.inflate(R.layout.rec_img_test,camera_gridView,false);
camera_gridView.addHeaderView(inflaters.inflate(R.layout.snippet_top_gallerytoolbar,camera_gridView,false));
// view that leaves 300dp space to display the selected image from the grid
camera_gridView.addHeaderView(inflaters.inflate(R.layout.rec_img_test,camera_gridView,false));
// a sticky view with action bar's height, so that the grid doesn't scroll above this
camera_gridView.setScrollViewCallbacks(this);
mImageView = (CropperView) view.findViewById(R.id.imageview);
recImgHolder = view2.findViewById(R.id.recImgHolder);
LinearLayoutManager manager = new GridLayoutManager(getActivity(), 4);
recImgHolder.setLayoutManager(manager);
recImgHolder.setHasFixedSize(true);
recImgHolder.setItemViewCacheSize(20);
recImgHolder.setDrawingCacheEnabled(true);
recImgHolder.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
TextView nextScreen = (TextView) view.findViewById(R.id.tvNext);
directorySpinner = (Spinner) view1.findViewById(R.id.spinnerDirectory);
directories = new ArrayList<>();
Log.d(TAG, "onCreateView: started.");
initImageLoader();
init();
mImageView.setDebug(true);
mImageView.setGestureEnabled(true);
mImageView.setGridCallback(new CropperView.GridCallback() {
#Override
public boolean onGestureStarted() {
return true;
}
#Override
public boolean onGestureCompleted() {
return false;
}
});
return view;
}
private void init() {
try {
FilePaths filePaths = new FilePaths();
directories = new ArrayList<>();
//check for other folders indide "/storage/emulated/0/pictures"
directories = FileSearch.fn_imagespath(Objects.requireNonNull(getContext()), filePaths.PICTURES);
ArrayList<String> directoryNames = new ArrayList<>();
for (int i = 0; i < directories.size(); i++) {
int index = directories.get(i).getStr_folder().lastIndexOf("/");
String string = directories.get(i).getStr_folder().substring(index + 1);
directoryNames.add(string);
}
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_spinner_item, directoryNames);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
directorySpinner.setAdapter(adapter);
directorySpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
Log.d(TAG, "onItemClick: selected: " + directories.get(position));
//setup our image grid for the directory chosen
setupGridView(directories.get(position));
}
#Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
}catch (Exception e){
e.printStackTrace();
}
}
private void setupGridView(Model_images selectedDirectory) {
try {
final ArrayList<String> imgURLs = selectedDirectory.getAl_imagepath();
//use the grid adapter to adapter the images to gridview
GridImageAdapter adapter = new GridImageAdapter(getActivity(), R.layout.layout_grid_imageview, mAppend, imgURLs, (ImageGridItemListner) this);
adapter.setGridItemListner(this);
recImgHolder.setAdapter(adapter);
//set the first image to be displayed when the activity fragment view is inflated
try {
setImage(imgURLs.get(0), mAppend);
} catch (ArrayIndexOutOfBoundsException e) {
Log.e(TAG, "setupGridView: ArrayIndexOutOfBoundsException: " + e.getMessage());
}
}catch (Exception e){
e.printStackTrace();
Toast.makeText(getActivity(), ""+e.getMessage(), Toast.LENGTH_SHORT).show();
}
}
private void setImage(String imgURL, String append) {
Log.d(TAG, "setImage: setting image");
ImageLoader imageLoader = ImageLoader.getInstance();
Bitmap bmp = imageLoader.loadImageSync(append + imgURL);
mImageView.setImageBitmap(bmp);
mBitmap = bmp;
originalBitmap = bmp;
}
private void rotateImage() {
if (mBitmap == null) {
Log.e(TAG, "bitmap is not loaded yet");
return;
}
mBitmap = BitmapUtils.rotateBitmap(mBitmap, 90);
mImageView.setImageBitmap(mBitmap);
rotationCount++;
}
private void snapImage() {
if (isSnappedToCenter) {
mImageView.cropToCenter();
} else {
mImageView.fitToCenter();
}
isSnappedToCenter = !isSnappedToCenter;
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.rotate_button:
rotateImage();
break;
case R.id.snap_button:
snapImage();
break;
}
}
#Override
public void onImageGridItemClick(String imgURL) {
try {
setImage(imgURL, mAppend);
} catch (ArrayIndexOutOfBoundsException e) {
Log.e(TAG, "setupGridView: ArrayIndexOutOfBoundsException: " + e.getMessage());
}
}
//overridden methods
#Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
if (dragging) {
int toolbarHeight = mHeaderView.getHeight();
// int toolbarHeight = 300;
if (camera_gridView.getCurrentScrollY() == 0) {
showToolbar();
}
if (firstScroll) {
float currentHeaderTranslationY = ViewHelper.getTranslationY(mHeaderView);
if (-toolbarHeight < currentHeaderTranslationY) {
mBaseTranslationY = scrollY;
}
}
float headerTranslationY = ScrollUtils.getFloat(-(scrollY - mBaseTranslationY), -toolbarHeight, 0);
ViewPropertyAnimator.animate(mHeaderView).cancel();
ViewHelper.setTranslationY(mHeaderView, headerTranslationY);
}
}
#Override
public void onDownMotionEvent() {
}
#Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
mBaseTranslationY = 0;
if (scrollState == ScrollState.DOWN) {
int toolbarHeight = mHeaderView.getHeight();
if (camera_gridView.getCurrentScrollY() == 0) {
showToolbar();
}
int scrollY = camera_gridView.getCurrentScrollY();
if (toolbarHeight <= scrollY) {
hideToolbar();
} else {
showToolbar();
}
} else if (scrollState == ScrollState.UP) {
int toolbarHeight = mHeaderView.getHeight();
int scrollY = camera_gridView.getCurrentScrollY();
if (toolbarHeight <= scrollY) {
System.out.println("++++upif" + scrollY);
hideToolbar();
} else {
System.out.println("++++upelse" + scrollY);
showToolbar();
}
if (camera_gridView.getCurrentScrollY() == 0) {
showToolbar();
}
} else {
if (!toolbarIsShown() && !toolbarIsHidden()) {
showToolbar();
}
}
}
//method to show the toolbar
private void showToolbar() {
float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
if (headerTranslationY != 0) {
ViewPropertyAnimator.animate(mHeaderView).cancel();
ViewPropertyAnimator.animate(mHeaderView).translationY(0).setDuration(200).start();
}
}
//method to hide the toolbar
private void hideToolbar() {
float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
int toolbarHeight = mHeaderView.getHeight();
if (headerTranslationY != -toolbarHeight) {
ViewPropertyAnimator.animate(mHeaderView).cancel();
ViewPropertyAnimator.animate(mHeaderView).translationY(-toolbarHeight).setDuration(200).start();
}
}
private boolean toolbarIsShown() {
return ViewHelper.getTranslationY(mHeaderView) == 0;
}
private boolean toolbarIsHidden() {
return ViewHelper.getTranslationY(mHeaderView) == -mHeaderView.getHeight();
}
}
inflated headerview in observable is
layout :- snippet_top_gallerytoolbar
<android.support.design.widget.AppBarLayout android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimary"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:id="#+id/profileToolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCloseShare"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:src="#drawable/ic_back" />
<Spinner
android:id="#+id/spinnerDirectory"
android:layout_width="#dimen/_120sdp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ivCloseShare"
android:gravity="center_vertical"
android:text="Gallery"
android:textColor="#color/black"
android:textSize="20sp">
</Spinner>
<TextView
android:id="#+id/tvNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:text="#string/string_next"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
second added headerview to observablegrid
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recImgHolder"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
i am getting view like below
when move the image from bottom to up with animation,not getting the full image,i am declaring imageview width wrap content.when i was moving the down its working perfectly,but when i image dragging up,the showing part comes with animation not getting the full image.
public class MainActivity extends Activity {
// mainLayout is the child of the HorizontalScrollView ...
private LinearLayout mainLayout;
// this is an array that holds the IDs of the drawables ...
private int[] images = { R.drawable.gg, R.drawable.gg, R.drawable.gg,
R.drawable.gg, R.drawable.gg, R.drawable.gg };
int status = 0;
int Measuredwidth = 0, MeasuredHeight = 0;
float x = 0;
boolean first = true;
ImageButton btn;
View cell = null;
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
PointF startPoint = new PointF();
static final int NONE = 0;
static final int DRAG = 1;
Bitmap icon;
int mode = NONE;
AnimationListener animx;
/** Called when the activity is first created. */
#TargetApi(Build.VERSION_CODES.HONEYCOMB_MR2)
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_main);
mainLayout = (LinearLayout) findViewById(R.id.linearLayout);
for (int i = 0; i < images.length; i++) {
cell = getLayoutInflater().inflate(R.layout.image, null);
final ImageView img = (ImageView) cell.findViewById(R.id.imageView);
img.setImageResource(images[i]);
// mainLayout.addView(cell);
// }
final LinearLayout ll = (LinearLayout) cell
.findViewById(R.id.lllayout);
Point size = new Point();
WindowManager w = getWindowManager();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
w.getDefaultDisplay().getSize(size);
MeasuredHeight = size.y;
Measuredwidth = size.x;
} else {
Display d = w.getDefaultDisplay();
Measuredwidth = d.getWidth();
MeasuredHeight = d.getHeight();
}
// final AbsoluteLayout aalayout = (AbsoluteLayout) cell
// .findViewById(R.id.absLayout);
btn = (ImageButton) cell.findViewById(R.id.button1);
btn.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "button 1 pressed",
2000).show();
}
});
img.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(final View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
status = 0;
System.out.println("sdhsjdkklkl");
} else if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (first) {
x = event.getX();
first = false;
System.out.println("matrix: " + matrix);
savedMatrix.set(matrix);
mode = DRAG;
startPoint.set(img.getLeft(), event.getY());
} else {
startPoint.set(img.getLeft(), event.getY());
}
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
float dx = event.getX() - startPoint.x;
final float dy = event.getY() - startPoint.y;
float setheight = btn.getBottom() + 6;
if (dy > 0) {
System.out.println("saved matrix:" + savedMatrix);
matrix.set(savedMatrix);
System.out.println("y value: " + dy);
matrix.postTranslate(img.getLeft(), 80);
ll.setVisibility(View.VISIBLE);
img.setImageMatrix(matrix);
}
else if (dy < 0) {
int fromLoc[] = new int[2];
img.getLocationOnScreen(fromLoc);
final float startX = fromLoc[0];
final float startY = fromLoc[1];
int toLoc[] = new int[2];
img.getLocationOnScreen(toLoc);
final float destX = 0;
final float destY = img.getTop();
ll.setVisibility(View.GONE);
TranslateAnimation mAnimation = new TranslateAnimation(
0, 0, 0, -80);
mAnimation.setDuration(10000);
mAnimation.setRepeatCount(0);
mAnimation
.setInterpolator(new LinearInterpolator());
mAnimation.setFillAfter(true);
img.setAnimation(mAnimation);
}
}
return true;
}
});
System.out.println("bmgbgklb");
mainLayout.addView(cell);
}
}
}
my main xml is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dip" >
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
my sub xml is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:scaleType="matrix"
android:src="#drawable/dd" >
</ImageView>
<LinearLayout
android:id="#+id/lllayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="invisible" >
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dip"
android:background="#drawable/orangearrow_over"
android:focusable="true" />
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:background="#drawable/orangearrow_over" />
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:background="#drawable/orangearrow_over" />
</LinearLayout>
</FrameLayout>
I created glow effect imageview application. its working fine, my problem is glow effect left,right,bottom,top was little bit hiding so i am trying to set padding but still i have same problem. how to solve this problem?
code:
ImageView mImageBk = (ImageView)itemTemplate.findViewById(R.id.imgBk);
RelativeLayout.LayoutParams ImgBKLayoutParams = new RelativeLayout.LayoutParams(scrWidth/8 + scrWidth/20, scrWidth/8 + scrWidth/20 );
ImgBKLayoutParams.leftMargin =0;
ImgBKLayoutParams.topMargin = 0;
mImageBk.setLayoutParams(ImgBKLayoutParams);
mImageBk.setImageResource(R.drawable.glow_effect);
mImageBk.setPadding(10, 10, 10, 10);
mImageBk.setVisibility(View.GONE);
full code :
public class tttAdapter extends BaseAdapter{
private Context mContext;
private int scrWidth=0;
private int scrHeight=0;
private int scrDpi = 0;
private boolean setInvisible = false;
private boolean visibleConf[];
private boolean selected[];
private boolean innerListView = false;
private int[] IMAGE_IDS = {
R.drawable.s_record, R.drawable.s_record
};
private String[] title = {
"Tv", "My Favorites List1"
};
private String[] detail = {
"Tv", "My Favorites List1"
};
public favoritesAdapter(Context context) {
mContext = context;
visibleConf = new boolean[IMAGE_IDS.length];
selected = new boolean[IMAGE_IDS.length];
}
public void updateImageSize(int width, int height, int dpi) {
scrWidth= width;
scrHeight = height;
scrDpi = dpi;
}
public void setTextVisible(int position){
if(IMAGE_IDS.length <= position)
return;
for(int i=0; i < IMAGE_IDS.length; i++) {
visibleConf[i] = false;
}
visibleConf[position] = true;
}
public int getCount() {
return IMAGE_IDS.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public void setTextInvisible(int position) {
visibleConf[position] = false;
}
public void setInnerViewVisible(boolean enable) {
innerListView = enable;
}
public void unsetSelectedItem(int position) {
for(int i=0; i < IMAGE_IDS.length; i++) {
selected[i] = false;
}
}
public void setSelectedItem(int position) {
for(int i=0; i < IMAGE_IDS.length; i++) {
selected[i] = false;
}
selected[position] = true;
}
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(mContext);
View itemTemplate = inflater.inflate(R.layout.list_item, null);
ImageView mImageBk = (ImageView)itemTemplate.findViewById(R.id.imgBk);
RelativeLayout.LayoutParams ImgBKLayoutParams = new RelativeLayout.LayoutParams(scrWidth/8 + scrWidth/20, scrWidth/8 + scrWidth/20 );
ImgBKLayoutParams.leftMargin =0;
ImgBKLayoutParams.topMargin = 0;
mImageBk.setLayoutParams(ImgBKLayoutParams);
mImageBk.setImageResource(R.drawable.glow_effect);
mImageBk.setPadding(10, 10, 10, 10);
mImageBk.setVisibility(View.GONE);
ImageView mImage = (ImageView)itemTemplate.findViewById(R.id.img);
RelativeLayout.LayoutParams ImgLayoutParams = new RelativeLayout.LayoutParams(scrWidth/8 , scrWidth/8 );
ImgLayoutParams.leftMargin = scrWidth/38;
ImgLayoutParams.topMargin = scrWidth/38;
mImage.setLayoutParams(ImgLayoutParams);
mImage.setImageResource(IMAGE_IDS[position]);
mImage.bringToFront();
TextView mTextTitle = (TextView)itemTemplate.findViewById(R.id.title);
mTextTitle.setClickable(false);
mTextTitle.setEnabled(true);
mTextTitle.setText(title[position]);
TextView mTextDetail = (TextView)itemTemplate.findViewById(R.id.detail);
mTextDetail.setClickable(false);
mTextDetail.setEnabled(true);
mTextDetail.setText(detail[position]);
if(selected[position] == true) {
ImageView mArrowImg = (ImageView)itemTemplate.findViewById(R.id.imgArrow);
//mArrowImg.setLayoutParams(new RelativeLayout.LayoutParams(scrWidth/32, scrHeight/32));
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(scrWidth/32, scrHeight/32);
layoutParams.leftMargin = scrWidth / 8;
layoutParams.topMargin = scrWidth / 16;
mArrowImg.setLayoutParams(layoutParams);
mArrowImg.setImageResource(R.drawable.arrow);
mImage.setBackgroundResource(R.drawable.test_glowb);
mTextTitle.setVisibility(View.GONE);
mTextDetail.setVisibility(View.GONE);
mImageBk.setVisibility(View.VISIBLE);
} else {
if(innerListView == true) {
mImage.setVisibility(View.GONE);
}
}
if(visibleConf[position] == true) {
mTextTitle.setTextSize((scrWidth*160) / (30 * scrDpi));
mTextDetail.setTextSize((scrWidth*160) / (50 * scrDpi));
mTextTitle.setTypeface(null,Typeface.BOLD);
mTextDetail.setTypeface(null,Typeface.BOLD);
mImageBk.setVisibility(View.VISIBLE);
} else {
mTextTitle.setTextSize((scrWidth*160) / (40 * scrDpi));
mTextDetail.setTextSize((scrWidth*160) / (70 * scrDpi));
//mTextTitle.setVisibility(View.GONE);
//mTextDetail.setVisibility(View.GONE);
mImage.setAlpha(150);
}
if(innerListView == true) {
mTextTitle.setVisibility(View.GONE);
mTextDetail.setVisibility(View.GONE);
}
return itemTemplate;
}
}
xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/imgBk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="14dip"
android:layout_marginTop="30dp"
android:layout_centerInParent="true"
android:layout_toRightOf="#+id/thumb"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumb"
android:layout_toRightOf="#+id/thumb"
android:layout_centerVertical="true"
android:textColor="#ffffff" />
<TextView
android:id="#+id/detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/thumb"
android:layout_alignParentBottom="true"
android:textColor="#ffffff" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imgArrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</LinearLayout>
</RelativeLayout>
Be sure that you are setting margins/padding for the imageview widget as opposed to the layout container.
i think you want margins and not padding (for the imageView) , since padding puts spaces in the content of the view , meaning less space to show anything.
margins are outside of the view.