How to make ImageView fullscreen programmatically on click? - android

Here is what I'm trying to do. I have 4 images and they are in one LinearLayout and that LinearLayout is child of RelativeLayout. I have successfully implemented onClickListener. Maybe my question is a little different, but everything is relevant.
I don't know how to extend image to full screen because images are in one LinearLayout which is inside that one RelativeLayout and maybe everything will be clear when I show you guys xml code.
I would like to make ImageView full screen on click and to be able to go back when I click back button. For that I would probably need to use onBackPressed
Images are at the bottom.
So here is the xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:background="#drawable/url"
android:fillViewport="true"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:scrollbars="none" >
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Thumbnail Image -->
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/thumbnail"
android:layout_width="140dp"
android:layout_height="220dp"
android:layout_alignParentLeft="true"
android:layout_marginRight="8dp"
android:src="#drawable/ic_horor_filmovi_ikonica" />
<!-- Naslov Filma -->
<TextView
android:id="#+id/naslov"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#7F0000"
android:textSize="#dimen/title_movie"
android:layout_toRightOf="#id/thumbnail"
android:layout_toEndOf="#+id/thumbnail" >
</TextView>
<!-- Godina izdanja Filma -->
<TextView
android:id="#+id/releaseYear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/naslov"
android:layout_alignStart="#+id/naslov"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="#+id/naslov"
android:layout_marginTop="3dp"
android:textColor="#color/dark_red" />
<ImageView
android:id="#+id/rating_star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/thumbnail"
android:layout_marginBottom="42dp"
android:layout_toRightOf="#+id/thumbnail"
android:layout_toEndOf="#+id/thumbnail"
android:src="#drawable/ic_actions_rating_icon" />
<Button
android:id="#+id/url_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/thumbnail"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toRightOf="#+id/thumbnail"
android:layout_toEndOf="#+id/thumbnail"
style="#style/UrlDugme" />
<TextView
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/rating_star"
android:layout_alignTop="#+id/rating_star"
android:layout_toRightOf="#+id/rating_star"
android:layout_toEndOf="#+id/rating_star"
android:gravity="center"
android:textColor="#color/dark_red"
android:textSize="#dimen/rating" />
<!-- Opis Filma -->
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#+id/thumbnail"
android:layout_marginTop="14dp"
android:background="#drawable/layout_round_rect_shape" >
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="18dp"
android:layout_marginTop="16dp"
android:scrollbars="vertical"
android:textColor="#color/dark_red"
android:textSize="18sp" />
</RelativeLayout>
<!-- Opis Filma Zavrsetak -->
<!-- Glumci -->
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:layout_marginTop="12dp"
android:background="#drawable/layout_round_rect_shape"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayoutActors"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/Image1"
android:layout_width="40dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_horor_filmovi_ikonica" />
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/Image2"
android:layout_width="40dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_horor_filmovi_ikonica" />
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/Image3"
android:layout_width="40dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_horor_filmovi_ikonica" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayoutActors"
android:orientation="horizontal" >
<TextView
android:id="#+id/ime1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ime"
android:textColor="#7F0000"
android:textSize="16sp" />
<TextView
android:id="#+id/ime2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ime"
android:textColor="#7F0000"
android:textSize="16sp" />
<TextView
android:id="#+id/ime3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Ime"
android:textColor="#7F0000"
android:textSize="16sp" />
</LinearLayout>
</RelativeLayout>
<!-- Glumci -->
<!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->
<LinearLayout
android:layout_marginTop="12dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/layout_round_rect_shape"
android:id="#+id/linearLayoutImages"
android:layout_below="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image1"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image2"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image3"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
<com.dusandimitrijevic.modification.TouchImageView
android:id="#+id/image4"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_width="115dp"
android:layout_height="150dp"
android:src="#drawable/ic_horor_filmovi_ikonica" >
</com.dusandimitrijevic.modification.TouchImageView>
</LinearLayout>
<!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->
</RelativeLayout>
</ScrollView>
</RelativeLayout>
And here is onClickListener:
image1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 115, getResources().getDisplayMetrics());
int px1 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 150, getResources().getDisplayMetrics());
LinearLayout.LayoutParams p = new LinearLayout.
LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
p.weight = 1;
if(isImageFitToScreen) {
image1.setMinimumWidth(px);
image1.setMinimumHeight(px1);
image1.setAdjustViewBounds(true);
isImageFitToScreen=false;
}else{
image1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
image1.setScaleType(ImageView.ScaleType.FIT_XY);
isImageFitToScreen=true;
}
}
});

To offer an alternative to Ben's answer and flesh out my earlier comment, one possibility is to create an ImageView in your xml that occupies the entire screen, with its visibility set to gone. On your button press, load the image into this ImageView, and on a back press set the visibility to gone again.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ScrollView>
<!-- Everything else! -->
</ScrollView>
<ImageView
android:id="#+id/full_screen_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</RelativeLayout>
Inside your Activity's onCreate() method:
#Override
public void onCreate(Bundle mySavedInstances) {
ImageView fullScreenContainer = (ImageView) findViewById(R.id.full_screen_container);
image1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//However it is you load your images
fullScreenContainer.setImageDrawawble(R.drawable.example);
fullScreenContainer.setVisibility(View.VISIBLE);
}
});
}
#Override
public void onBackPressed() {
if (fullScreenContainer.getVisibility() == View.VISIBLE) {
fullScreenContainer.setImageDrawable(null);
fullScreenContainer.setVisibility(View.GONE);
} else {
super.onBackPressed();
}
}

Welcome to stack overflow Dusan,
I've something very similar, but all I do is just put the full screen image in a new activity & pass the image as bytes & display it in a full screened imageview. As soon as they press back, they're returned to where they were before. I think trying to change the layout parameters is a bit overkill here.

Create new Activity or Fragment and set image to ImageView in new Activity or Fragment. Using Fragment is better approach here as user can click on multiple images one after another. It is less expensive to create or destory Fragment.
Image can be passed to another activity by converting into byte array. It is better approach to save image on server or database such as firebase etc and use generated URL in app. Which make it easy to pass Url between Activities or Fragments than passing byte array

Related

Why layoutAnimtions in RecyclerView's ItemView cause UI stutters?

In my project, I have a list of playing videos, which is built using RecyclerView. When the user clicks to play, the sharing area below the video will have some share icons added (here with LayoutAnimation added), The entire share pannel will stretch; Now The problem is that when user play the video, and quickly or repeatedly slide the list back and forth, the video list will appear disorderly, the video below the screen will be staggered coverage, affecting the user experience, Does someone have encountered this issue, And what is the right way to add item animtion in recyclerView?
code in adpter:
private void animateExitBottomViews(final VideoClipsPlayViewHolder holder, boolean isFollow) {
if (null != holder) {
if (isFollow) {
holder.ll_share.setVisibility(View.GONE);
holder.ll_share_abord.setVisibility(View.GONE);
holder.imgMoreShare.setVisibility(View.GONE);
holder.imgAllShare.setVisibility(View.VISIBLE);
} else {
holder.imgHead.bringToFront();
holder.imgAllShare.setVisibility(View.VISIBLE);
holder.imgMoreShare.setVisibility(View.GONE);
holder.ll_share.setVisibility(View.GONE);
holder.ll_share_abord.setVisibility(View.GONE);
hideFocusButtonWhenFocused(holder);
}
}
}
xml file of item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mgtv="http://schemas.android.com/apk/res-auto"
android:id="#+id/rl_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="#color/skin_color_content_bg_primary">
<RelativeLayout
android:id="#+id/rl_player"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_202"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<RelativeLayout
android:id="#+id/rl_play"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/view_preview"
android:layout_width="match_parent"
android:layout_height="match_parent"
mgtv:fadeDuration="100"
mgtv:placeholderImage="#drawable/bg_common_image_holder" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/icon_common_video_play" />
<TextView
android:id="#+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/dp_5"
android:layout_marginRight="#dimen/dp_5"
android:background="#drawable/item_vod_landscape_image_text_item_desc_selector"
android:gravity="center"
android:minHeight="#dimen/dp_16"
android:paddingLeft="#dimen/dp_3"
android:paddingRight="#dimen/dp_3"
android:textColor="#color/color_FFFFFF"
android:textSize="#dimen/font_20" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/fl_player_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
<TextView
android:id="#+id/txt_video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/rl_player"
android:ellipsize="end"
android:maxLines="2"
android:paddingLeft="#dimen/dp_10"
android:paddingRight="#dimen/dp_10"
android:paddingTop="#dimen/dp_10"
android:textColor="#color/skin_color_text_primary"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/frame_video_info"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_50"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/txt_video_title">
<com.mgtv.widget.CircleImageView
android:id="#+id/img_head"
android:layout_width="#dimen/dp_35"
android:layout_height="#dimen/dp_35"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dp_10"
android:src="#drawable/ic_comment_avatar_default"
mgtv:civ_border_color="#color/color_000000_10"
mgtv:civ_border_width="1px" />
<com.hunantv.imgo.widget.RoundRectCheckButton
android:id="#+id/btn_focus"
style="#style/FollowCheckButtonStyle"
android:layout_width="#dimen/dp_60"
android:layout_height="#dimen/dp_26"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dp_5"
android:layout_toRightOf="#id/img_head"
android:visibility="gone" />
<TextView
android:id="#+id/txt_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dp_5"
android:layout_toRightOf="#id/img_head"
android:ellipsize="end"
android:maxEms="8"
android:maxLines="1"
android:textColor="#color/color_888888" />
<LinearLayout
android:id="#+id/ll_share_icon"
android:layout_width="wrap_content"
android:layout_height="#dimen/dp_40"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
**android:animateLayoutChanges="true"**
android:gravity="center_vertical">
<TextView
android:id="#+id/txt_comment_reply"
android:layout_width="wrap_content"
android:layout_height="#dimen/dp_32"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/dp_3"
android:layout_toLeftOf="#+id/txt_praise"
android:drawableLeft="#drawable/videoclips_comment_reply"
android:drawablePadding="#dimen/dp_3"
android:gravity="center_vertical"
android:text="128"
android:textColor="#color/base_middle_gray"
android:textSize="#dimen/font_20" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/dp_5"
android:layout_toLeftOf="#+id/ll_share_more">
<TextView
android:id="#+id/txt_praise"
android:layout_width="wrap_content"
android:layout_height="#dimen/dp_32"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dp_6"
android:drawableLeft="#drawable/ic_comment_up_default"
android:drawablePadding="#dimen/dp_3"
android:gravity="center_vertical"
android:text="235"
android:textColor="#color/base_middle_gray"
android:textSize="#dimen/font_20" />
<TextView
android:id="#+id/tvLikePlusOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/plus_one"
android:textColor="#color/color_F06000"
android:textSize="#dimen/font_24"
android:visibility="invisible" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
<ImageView
android:id="#+id/img_wechat_share"
android:layout_width="#dimen/dp_32"
android:layout_height="#dimen/dp_32"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:src="#drawable/videoclips_share_wechat" />
<ImageView
android:id="#+id/img_wechat_group_share"
android:layout_width="#dimen/dp_32"
android:layout_height="#dimen/dp_32"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:src="#drawable/videoclips_share_wechat_group" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_share_abord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
<ImageView
android:id="#+id/img_facebook_share"
android:layout_width="#dimen/dp_32"
android:layout_height="#dimen/dp_32"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:src="#drawable/videoclips_share_facebook" />
<ImageView
android:id="#+id/img_twitter_share"
android:layout_width="#dimen/dp_32"
android:layout_height="#dimen/dp_32"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:src="#drawable/videoclips_share_twitter" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_share_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal">
<ImageView
android:id="#+id/img_more_share"
android:layout_width="#dimen/dp_32"
android:layout_height="#dimen/dp_32"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/dp_10"
android:scaleType="centerInside"
android:src="#drawable/videoclips_share_more"
android:visibility="gone" />
<ImageView
android:id="#+id/img_all_share"
android:layout_width="#dimen/dp_32"
android:layout_height="#dimen/dp_32"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/dp_10"
android:scaleType="centerInside"
android:src="#drawable/videoclips_share_all"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<View
android:id="#+id/item_bottom_devider"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_8"
android:layout_alignParentBottom="true"
android:layout_below="#+id/frame_video_info"
android:background="#color/skin_color_divider" />
</RelativeLayout>
I just dynamically control the visiblity of the share icon, the animate behavior was call by LayoutAnimation, just wondering why the screen will be disorderly when the list is quickly swiped.
UI STUTTER WHEN FAST SCROLL LIST
NORMAL STATE OF SHARE PANEL
EXPAND STATE OF SHAE PANEL
finally,ValueAnimation save my day!
private ValueAnimator createShareAnimator(final View v, final int start, final int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animator) {
Integer currentValue = (Integer) animator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.width = currentValue;
v.setLayoutParams(layoutParams);
}
});
return animator;
}

How do I add a text background to a button in android?

I've designed buttons as shown in the image above. But I'm unable to add the text background (which is circled) to the button.
How to achieve that?
Here is what I have achieved so far:
<View
android:id="#+id/centerVertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:visibility="invisible" />
<View
android:id="#+id/centerHorizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<Button
android:id="#+id/today_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVertical"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/centerHorizontal"
android:layout_marginTop="20px"
android:layout_marginBottom="10px"
android:layout_marginLeft="20px"
android:layout_marginRight="10px"
android:background="#drawable/button1"
android:gravity="center"
android:text="Today"
android:textColor="#FFFFFF" >
</Button>
<Button
android:id="#+id/nextweek_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVertical"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/centerHorizontal"
android:layout_marginTop="20px"
android:layout_marginBottom="10px"
android:layout_marginLeft="10px"
android:layout_marginRight="20px"
android:background="#EF5350"
android:gravity="center"
android:text="Next Week"
android:textColor="#FFFFFF" >
</Button>
<Button
android:id="#+id/later_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/centerVertical"
android:layout_toLeftOf="#+id/centerHorizontal"
android:layout_marginTop="10px"
android:layout_marginBottom="20px"
android:layout_marginLeft="20px"
android:layout_marginRight="10px"
android:background="#66BB6A"
android:gravity="center"
android:text="Later"
android:textColor="#FFFFFF" >
</Button>
<Button
android:id="#+id/range_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/centerVertical"
android:layout_toRightOf="#+id/centerHorizontal"
android:layout_marginTop="10px"
android:layout_marginBottom="20px"
android:layout_marginLeft="10px"
android:layout_marginRight="20px"
android:background="#5C6BC0"
android:gravity="center"
android:text="Range"
android:textColor="#FFFFFF" >
</Button>
XML Layout
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/centerVertical"
android:layout_marginBottom="20px"
android:layout_marginLeft="10px"
android:layout_marginRight="20px"
android:layout_marginTop="10px"
android:layout_toRightOf="#+id/centerHorizontal">
<Button
android:id="#+id/range_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C6BC0"
android:gravity="center"
android:text="Range"
android:textColor="#FFFFFF" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#061FAF"
android:drawableRight="#drawable/mail_icon"
android:text="range text"
android:textColor="#FFFFFF" />
</RelativeLayout>
You can do this easily with adding RelativeLayout instead of Button.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"/>
<Button
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="20dp"/>
</RelativeLayout>
Just set text to TextView and add source to Button.
You need to do like this.
<?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="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:oreantation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
https://stackoverflow.com/a/8823469/5898862
This is best solution for creating customized button using layout. You can easily set background color using android:background property
As per my understanding, what you want is - You need a button background color which is similar/near to image on it.?
In Android Version 5.0, a class is added which help you to extract color from bitmap. Palette
Below is the sample code which you will get the respective background from the image and later you can set it to the button.
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {
// You will get color here
}
});
Possible combination of colors are:
Vibrant
Vibrant Dark
Vibrant Light
Muted
Muted Dark
Muted Light
To use above class add the following dependencies in your project:
dependencies {
...
compile 'com.android.support:palette-v7:21.0.+'
}
======================or=========================
Another way is you can get respective color by image bitmap:
public static int getRespectiveColor(Bitmap bitmap) {
Bitmap newBitmap = Bitmap.createScaledBitmap(bitmap, 1, 1, true);
final int color = newBitmap.getPixel(0, 0);
newBitmap.recycle();
return color;
}
Hope above both will solve your problem. :) cheers!!!

Android slider drawer custom icon position

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:content="#+id/content"
android:handle="#+id/handle"
android:orientation="horizontal"
android:rotation="180" >
<ImageView
android:id="#id/handle"
android:layout_width="50dip"
android:layout_height="50dip"
android:rotation="180"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#id/content"
android:layout_width="250dp"
android:layout_height="fill_parent"
android:background="#0000ff"
android:orientation="vertical"
android:rotation="180" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
</LinearLayout>
</SlidingDrawer>
I want to change the icon position and put it on the top position from left to right
Is anyone who can tell me how it to set this custom icon position on android slider drawer>
Thanks in advance
http://i.stack.imgur.com/q8dz2.png
Take a look at your button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
You can set for it an icon in at least four ways (like in this picture):
You need only to specify where the Drawable should stay.
on the left of text:
android:drawableLeft="#mipmap/ic_launcher"
on the right of text:
android:drawableRight="#mipmap/ic_launcher"
at the top, text below:
android:drawableTop="#mipmap/ic_launcher"
at the bottom, text above:
android:drawableBottom="#mipmap/ic_launcher"
All you need is to add to your button layout one of these possible lines.
Of course to one button, you can add more than one drawable.
NOTE: Read also:
http://developer.android.com/guide/topics/ui/controls/button.html
Hope it help
EDIT: I haven't used SlidingDrawer before, so I cannot recognize, where the problem is, but always you can do a trick like this
<Button
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:drawableTop="#mipmap/ic_launcher"
android:layout_alignParentLeft="true"
android:layout_below="#id/handle"
android:background="#0000ff"
/>
This is a button with your desired image and "transparent" background.
Try it now and I would look for another solution ;-)
SOLUTION: Please try this code:
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:content="#+id/content"
android:handle="#+id/handle"
android:orientation="horizontal"
android:rotation="180" >
<ImageView
android:id="#id/handle"
android:layout_width="50dip"
android:layout_height="50dip"
android:rotation="180"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:id="#id/content"
android:layout_width="250dp"
android:layout_height="fill_parent"
android:background="#0000ff"
android:orientation="vertical"
android:rotation="180" >
<ImageView
android:id="#id/handle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Big Button" />
</LinearLayout>
</SlidingDrawer>
</LinearLayout>
If you still have any question please free to ask
Sliding drawer is deprecated, and is hard to use but I made a replacement. The only problem about it is that it doesn't slide like the sliding drawer, but it does apear and disapear. Here is the XML part:
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:background="#acacac"
android:layout_height="100dp"
android:id="#+id/etc"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:id="#+id/bMenu"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:background="#drawable/button_shape_1"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/linearLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="#+id/etc"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:visibility="gone"
android:id="#+id/menuContent">
//content
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
This will by default(on copy/paste) not be shown(half the point)
It must be a framelayout as they allow item to be layed on top of eachother(the root element that is)
The code part:
RelativeLayout menuContent;
Button showMenu;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.game);
menuContent = (RelativeLayout) findViewById(R.id.menuContent);
showMenu = (Button) findViewById(R.id.bMenu);
showMenu.setOnClickListener(this);
}
boolean menuActive = false;
#Override
public void onClick(View v) {
switch (v.getId()){
case R.id.bMenu:
if(menuActive){
menuActive = false;
menuContent.setVisibility(View.GONE);
}else if(!menuActive){
menuActive = true;
menuContent.setVisibility(View.VISIBLE);
}
break;
}
}
This was copied out of a part of one of my newest games, so if it doesn't work as it sits, let me know and I will take a look at it

Why is my relative layout filling the screen rather than wrapping content when I add an image?

I have a RelativeLayout, we'll call this the 'slider', that I want to overlay on another RelativeLayout (by switching visibility="gone" and "visible") when "Add People" is clicked, but the overlay should only take up as much width of the screen as needed. This layout will then be removed when "Cancel" is clicked. Everything is working fine so far.
RelativeLayout slider;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_people);
RelativeLayout add = (RelativeLayout) findViewById(R.id.add_wrapper);
RelativeLayout cancel = (RelativeLayout) findViewById(R.id.cancel_wrapper);
slider = (RelativeLayout) findViewById(R.id.add_people_slider);
add.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
slider.setVisibility(View.VISIBLE);
}
});
cancel.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
slider.setVisibility(View.GONE);
}
});
}
The issue arises when I try to add another image to the slider. I am adding this just above the #id/cancel_wrapper RelativeLayout in the XML (full XML at bottom).
<ImageView
android:id="#+id/transparent_add"
android:src="#drawable/ic_add_active_256"
android:layout_height="30dp"
android:layout_width="30dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />
For some reason, this is making the width of the slider the full width of the screen.
What's even more bizarre is if I add android:layout_marginRight="50dp" to this ImageView to move it left a little it starts making the slider smaller from the left. I would like this "transparent_add" image to be lined up with the old "add" image.
My 2 issues, then, are that when I add the "transparent_add" image it changes the width of the slider for an unknown reason, and also when I add marginRight on the image it makes the width of the slider smaller from the left.
<?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"
android:background="#color/white" >
<TextView
android:id="#+id/btn_people"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:text="#string/label_people"
android:textColor="#color/blue"
android:textSize="16dp" />
<TextView
android:id="#+id/people_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btn_people"
android:paddingLeft="10dp"
android:text="#string/label_people_info"
android:textSize="11dp" />
<RelativeLayout
android:id="#+id/add_wrapper"
android:layout_width="65dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/blue" >
<ImageView
android:id="#+id/plus_sign"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="19dp"
android:layout_marginTop="6dp"
android:src="#drawable/ic_add_256" />
<TextView
android:id="#+id/add_people"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="2dp"
android:text="#string/label_add_people"
android:textColor="#color/white"
android:textSize="11dp" />
</RelativeLayout>
<ListView
android:id="#+id/contacts_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_below="#id/people_info" />
<!-- switch between visible/gone -->
<RelativeLayout
android:id="#+id/add_people_slider"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#color/blue"
android:visibility="gone" >
<TextView
android:id="#+id/label_add_new_contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="65dp"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:text="#string/label_add_new_contact"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/label_add_from_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/label_add_new_contact"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
android:text="#string/label_add_from_phone"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/label_add_from_facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/label_add_from_phone"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
android:text="#string/label_add_from_facebook"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/label_add_from_linkedin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/label_add_from_facebook"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
android:text="#string/label_add_from_linkedin"
android:textColor="#color/white"
android:textSize="16dp" />
<!-- insert image here -->
<RelativeLayout
android:id="#+id/cancel_wrapper"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="10dp" >
<ImageView
android:id="#+id/image_cancel"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="4dp"
android:src="#drawable/ic_close_256"/>
<TextView
android:id="#+id/label_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/label_cancel"
android:textColor="#color/white"
android:textSize="8dp" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
EDIT: This is happening both in Eclipse and on my Android device.
EDIT: I have tried placing the image above the "Add a new contact" text and then placing the text below that, but the same thing happens

setContentView makes my ImageView buttons unclickable?

Having some trouble figuring out why my ImageView buttons stop working after I change the displayed layout in my app. Please tell me if you see anything wrong with this code... The buttons are not clickable after changing setContentView is called even though it is setting the layout to the same one that is originally set in OnCreate. Basically I want to be able to reset the view to an known state whenever I want by calling this function.
Thanks for any ideas! Here is the code that breaks the buttons, really only the line that calls setContentView breaks the buttons, but here is the rest of the function as well:
public void defaultrailview(){
setContentView(R.layout.railtrick);
ImageView jumpsbutton = (ImageView) findViewById(R.id.jumpsbutton);
ImageView settingsbutton = (ImageView) findViewById(R.id.settingsbutton);
jumpsbutton.setClickable(true);
settingsbutton.setClickable(true);
ImageView ghost1 = (ImageView)findViewById(R.id.rt1);
ghost1.setAlpha(51);
ImageView ghost2 = (ImageView)findViewById(R.id.rt2);
ghost2.setAlpha(51);
ImageView ghost3 = (ImageView)findViewById(R.id.rt3);
ghost3.setAlpha(51);
ImageView ghost4 = (ImageView)findViewById(R.id.rt4);
ghost4.setAlpha(51);
ImageView railtext = (ImageView)findViewById(R.id.railstext);
railtext.setAlpha(127);
ImageView shaketoroll = (ImageView)findViewById(R.id.ShakeToRoll);
shaketoroll.setVisibility(4);
}
and the XML for the railtrick:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/railstext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingLeft="20dp"
android:src="#drawable/railstext" />
</LinearLayout>
<LinearLayout
android:id="#+id/alldice"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/dicerow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/rt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:adjustViewBounds="true"
android:paddingLeft="10dp"
android:src="#drawable/diceghost"/>
<ImageView
android:id="#+id/rt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:adjustViewBounds="true"
android:paddingRight="10dp"
android:src="#drawable/diceghost"/>
</LinearLayout>
<LinearLayout
android:id="#+id/dicerow2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/rt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:paddingLeft="10dp"
android:src="#drawable/diceghost"/>
<ImageView
android:id="#+id/rt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:paddingRight="10dp"
android:src="#drawable/diceghost"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/jumpsbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:adjustViewBounds="true"
android:clickable="true"
android:paddingLeft="20dp"
android:src="#drawable/jumpsbuttonpassive" />
<ImageView
android:id="#+id/railsbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:adjustViewBounds="true"
android:clickable="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/railsbuttonactive" />
<ImageView
android:id="#+id/settingsbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:adjustViewBounds="true"
android:clickable="true"
android:paddingRight="20dp"
android:src="#drawable/settingsbuttonpassive" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/ShakeToRoll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:padding="30dp"
android:src="#drawable/shaketoroll" />
Thanks again. Love you all!
When passing the same value into setContentView, you are still requesting for that resource to be inflated - meaning all new objects.
You need to reassign your onClickListeners because your old buttons are no longer on the screen.
you can try android:onclick="imageButton" in the xml and create a function in your class like
public void imageButton(View view){
// your code
}

Categories

Resources