Android ,overlapping imageview android - imageview

I tried to display a small imageview above the big imageview .It worked fine.
But when I made the small imageview to appear in rounded shape, It is not showing up.. Your reply will be helpful
there is no error or warning or any crashing of avd .simply the small imageview is not showing
.xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:maxHeight="1000dp"
android:maxWidth="1000dp"
android:scaleType="fitXY"
android:src="#drawable/ciaz"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginBottom="14dp"
android:adjustViewBounds="true"
android:maxHeight="300dp"
android:maxWidth="300dp"
android:scaleType="fitXY"
android:src="#drawable/ac"
android:visibility="visible"
tools:ignore="ContentDescription,RtlHardcoded" />
</RelativeLayout>
mainactivity.java
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
im1 = (ImageView) findViewById(R.id.imageView1);
im2 = (ImageView) findViewById(R.id.imageView2);
im1.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View arg0, MotionEvent arg1) {
try
{
int action=arg1.getAction();
float x=(float)arg1.getX();
float y=(float)arg1.getY();
if(action==MotionEvent.ACTION_DOWN)
{
context = getApplicationContext();
duration = Toast.LENGTH_SHORT;
String g= x+" "+y;
Toast toast = Toast.makeText(context, g, duration);
toast.show();
if((x>0.0) && (x<100)&&(y>0.0) && (y<100))
{
im2.setVisibility(View.VISIBLE);
Bitmap bm = BitmapFactory.decodeResource(getResources(),R.drawable.ac);
roundedImage = new RoundedImageView(bm);
im2.setImageDrawable(roundedImage);
}
}
}
catch(Exception e)
{
Toast toast = Toast.makeText(context, "exception", duration);
toast.show();
}
return false;
}
});
}
enter code here

Make sure that if you are using relative layout, place big image view first and then after small age view. Otherwise big image view overlaps small image view. If that is not the case can u please give code snippet to help more and find out the issue ?
You are giving 1000 h and 1000 w for first image view, and using android:layout_alignBottom="#+id/imageView1" in second imageview. So it goes out of ur device screen. Use match parent for first image view and remove alignbottom.

Related

Overlapping of fragments when transiting on clicking on an item in RecyclerView of one fragment to another new fragment

I am new to android development. The problem is the RecyclerView populated using a firebase database is not replaced by a new fragment, rather the new fragment is on top, but clicking on another item of the recycler view still works, which I checked using a toast in the new fragment. I know that the next fragment is there because I have TextView at the bottom, which is visible on clicking on the recycler view Item.
Here is my code
adapter = new FirebaseRecyclerAdapter<Categories, CategoryViewHolder>(options) {
#Override
protected void onBindViewHolder(#NonNull final CategoryViewHolder holder, int position, #NonNull Categories model)
{
Picasso.get().load(model.getImage()).placeholder(R.drawable.camera).into(holder.categoryImage, new Callback() {
#Override
public void onSuccess()
{
}
#Override
public void onError(Exception e) {
Toast.makeText(getContext(), e.getMessage(), Toast.LENGTH_SHORT).show();
}
});
holder.categoryName.setText(model.getName());
holder.categoryImage.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(getContext(), holder.categoryName.getText().toString(), Toast.LENGTH_SHORT).show();
// Intent intent = new Intent(getActivity(), ProductListActivity.class);
// startActivity(intent);
AppCompatActivity activity = (AppCompatActivity) view.getContext();
SearchFragment fragment = SearchFragment.newInstance(holder.categoryName.getText().toString());
FragmentManager fragmentManager = activity.getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.nav_host_fragment, fragment, SearchFragment.class.getSimpleName());
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
}
});
The fragment I am using is also used for the navigation drawer using navController.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</RelativeLayout>
Edit: I have another recyclerView inside SearchFragment, which didn't show after I clicked an image in the RecyclerView(One which calls SearchFragment). But it showed after I minimized and opened the app again. I don't understand why that is happening.
I just found an easy way to move from one fragment to another without using FragmentManager. I hope this helps others, it worked for me. Initialize the NavController in the first fragment inside onCreateView
navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);
And adding the following for transition
Bundle bundle = new Bundle();
bundle.putString("Category", holder.categoryName.getText().toString());
navController.navigate(R.id.nav_category_product_list, bundle);
to get the argument in the moving fragment type this
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true); //To get menu items at the top
if (getArguments() != null) {
Category = getArguments().getString("Category");
}
}
Also, add this transition in Navigation graph XML
.
.
.
<fragment
android:id="#+id/nav_category"
android:name="com.grocery.admin.ui.category.CategoryFragment"
android:label="#string/menu_category"
tools:layout="#layout/fragment_category" >
<action
android:id="#+id/action_nav_category_to_nav_category_product_list"
app:destination="#id/nav_category_product_list" />
</fragment>
<fragment
android:id="#+id/nav_category_product_list"
android:name="com.grocery.admin.ui.category.CategoryProductFragment"
android:label="Product List"
tools:layout="#layout/fragment_category_product">
</fragment>
.
.
.

Animate Toolbar Logo / Title changes when using with ViewPager Fragments

I am using ViewPager to host two fragments in my main activity. One fragment is intended to show app logo and other one just title on the Toolbar. I am able to do that without any issue.
However, I want to animate these changes when I swipe from one fragment to another using swipe on ViewPager, like Fade out the logo and fade in the title.
Any clue or idea how can I do it.
Ok, as per Amir's suggestion I tried it using the below layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/toolbar_logo_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:alpha="1"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:id="#+id/toolbar_logo_image"
android:alpha="1"
/>
</RelativeLayout>
<RelativeLayout
android:layout_toRightOf="#id/toolbar_log_container"
android:layout_alignWithParentIfMissing="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/toolbar_info_container"
>
<ImageView
android:id="#+id/toolbar_profile_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/one"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginRight="#dimen/value_12"
/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextInfoName"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/toolbar_profile_pic"
android:layout_toEndOf="#+id/toolbar_profile_pic"
android:layout_marginTop="#dimen/value_8"
/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_user_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextInfoWork"
android:layout_below="#+id/toolbar_user_name"
android:layout_toRightOf="#+id/toolbar_profile_pic"
android:layout_toEndOf="#+id/toolbar_profile_pic"
android:layout_alignBottom="#id/toolbar_profile_pic"
/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
And it works ! But what if I would have to do it as per scroll position of the ViewPager. I tried placing the animation in
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
part of the code, but the animation runs uncontrollably, since this callback is called everytime once the scroll is started, irrespective of it is actually scrolled or not.
For Animating Toolbar you should define your own Toolbar something like this and for Animating elements of Toolbar in your MainActivity you can use something like following code:
getLeftIcon().animate()
.translationY(0)
.setDuration(300)
.setStartDelay(300);
getAppLogo().animate()
.translationY(0)
.setDuration(300)
.setStartDelay(400);
and for changing title due to ViewPager position just define listener for your ViewPager :
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageScrollStateChanged(int state) {}
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
public void onPageSelected(int position) {
// Change your title here
}
});
Animation part of code available here.
Finally, here's what I did to achieve the desired effect:
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
private float prevPosition = 0.0f;
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
///hold current position
if(prevPosition == 0) {
prevPosition = positionOffset;
return;
}
///check if prev position is equal to current one, avoid multiple calls
if(prevPosition == positionOffset) {
return;
}
/// zero position check
if(prevPosition >= 0.9) {
if(positionOffset == 0.0f) {
Logger.log_error("Do not hide infoHolder");
return;
}
}
//update previous position
prevPosition = positionOffset;
///animate title text and logoholder accordingly
logoHolder.animate().translationX(logoHolder.getWidth() -positionOffset * logoHolder.getWidth()) .alpha(positionOffset).setDuration(0).start();
mTitleText.animate().translationX(- positionOffset * mTitleText.getWidth()).alpha(1.0f - logoHolder.getAlpha()).setDuration(0).start();
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
The above code resulted in a smooth transition b/w Logo and title text when fragments are scrolled inside viewpager.
Posting the answer hoping this may help someone else.
Thanks Amir for the guidance.

Navigation Drawer opens to different fragments

I am a beginner when it comes to Android. I have spent hours reading tutorials, watching videos, and combing through stackoverflow trying to figure this out. Even with all the online resources available , I still can't figure this out.
I want my list view always on the main screen, but when I swipe I want the navigation drawer to slide in and display a different fragment depending on which item in the list view has been selected. For example if the user selected 'account', when they slide from the right the account fragment would display.
I've left in 'navList' and 'nav2List' for testing, but I would like these to be fragments.
XML
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bankMenu"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</ListView>
</RelativeLayout>
<!-- Side navigation drawer UI -->
<ListView
android:id="#+id/navList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#ffeeeeee"/>
<ListView
android:id="#+id/nav2List"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#ffeeeeee"/>
</android.support.v4.widget.DrawerLayout>
JAVA
public class MainActivity extends AppCompatActivity {
private ListView menu;
private ListView mDrawerList;
private ListView secondDrawerList;
private ArrayAdapter<String> mAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
menu = (ListView) findViewById(R.id.bankMenu);
mDrawerList = (ListView)findViewById(R.id.navList);
secondDrawerList = (ListView)findViewById(R.id.nav2List);
addBankingListItems(); // populate the banking items list
menu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
final int position, long id) {
// ListView Clicked item index
int itemPosition = position;
// ListView Clicked item value
String itemValue = (String) menu.getItemAtPosition(position);
// Show Alert
Toast.makeText(getApplicationContext(),
"Position :" + itemPosition + " ListItem : " + itemValue, Toast.LENGTH_LONG)
.show();
if (itemPosition < 4) { // TESTING FUNCTIONALITY
addDrawerItems();
} else {
addSecondDrawerItems();
}
}
});
}
---EDIT---
This issue has been resolved.
In the xml file, i changed the two ListViews to a RelativeView.
<RelativeLayout
android:id="#+id/frame_to_be_replaced"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_below="#+id/topRL"
android:background="#ffeeeeee">
</RelativeLayout>
In the MainActivity, I created a fragment manager, then after my switch statement, i replaced the frame with the required one. Hope this can help someone, send me a pm for more info.
FragmentManager fragmentManager = getFragmentManager();
switch (itemPosition) {
case 0:
fragment = MyFrag1.newInstance("", ""); // fragment declared above
break;
case 1:
fragment = MyFrag2.newInstance("", "");
break;
case 2: etc....
fragmentManager.beginTransaction()
.replace(R.id.frame_to_be_replaced, fragment)
.commit();

android buttons to switch between two screens

I am a beginner of android application. I am using Android Studio to make an application for a shopping cart list. For the start, right now, I am working on the creating two buttons on each screens that called, "edit" and "save." So if I click the edit button, it will go to screen2, and if I click the save, it will go to screen1. However, Whenever I tried to lunch it, it's getting an error like this:
02-14 15:14:57.830 AndroidRuntime﹕ FATAL EXCEPTION: main
Process: com.example.jieun.hw1, PID: 1782
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.jieun.hw1/com.example.jieun.hw1.MainActivityOne}: java.lang.NullPointerException
My codes for two screens and the layouts are something like this:
Screen1:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list);
Button editButton = (Button) findViewById(R.id.e_button);
editButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
//Starting a new Intent
Intent editScreen = new Intent(..MainActivityTwo.class);
startActivity(editScreen);
}
});
}
Screen2:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list);
Button saveButton = (Button) findViewById(R.id.s_button);
saveButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
//Starting a new Intent
Intent saveScreen;
saveScreen = new Intent(getApplicationContext(), MainActivityOne.class);
startActivity(saveScreen);
}
});
}
Layout1:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivityOne">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit"
android:id="#+id/e_button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
Layout2:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivityOne">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save"
android:id="#+id/s_button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Have you tried looking through your code for screen 1?
Here:
//Starting a new Intent
Intent editScreen = new Intent(..MainActivityTwo.class);
startActivity(editScreen);
}
There are two periods before MainActivityTwo.class

Click on a specific part of an ImageView

I would like to be able to touch a specific part of an ImageView and display a toast.
Here is my xml file "dessintest.xml" :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/relative1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageView
android:id="#+id/imageview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/dessin1"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
>
</ImageView>
<ImageButton
android:id="#+id/imageButton1"
android:background="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/image" />
</RelativeLayout>
Then here is my main file "DessinTest.java" :
public class DessinTest extends Activity {
ImageButton imageButton;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.dessintest);
addListenerOnButton();
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.dessin1);
TouchImageView touch = new TouchImageView(this);
touch.setImageBitmap(bm);
touch.setMaxZoom(4f); //change the max level of zoom, default is 3f
setContentView(touch);
}
public void addListenerOnButton() {
imageButton = (ImageButton) findViewById(R.id.imageButton1);
imageButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
Toast.makeText(DessinTest.this,"Click !", Toast.LENGTH_SHORT).show();
}
});
}
}
When I try that, I can zoom the ImageView but I cannot see the ImageButton.
When I delete this bit of code (the one for the zooming of my ImageView) :
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.dessin1);
TouchImageView touch = new TouchImageView(this);
touch.setImageBitmap(bm);
touch.setMaxZoom(4f); //change the max level of zoom, default is 3f
setContentView(touch);
it is working, I can see the ImageButton and click on it.
What I would like is to have both functionnalities, click and zoom.
Thanks !
OK I resolved my problem by using this sample :
https://github.com/chrisbanes/PhotoView/blob/master/sample/src/uk/co/senab/photoview/sample/SimpleSampleActivity.java
I can now zoom and touch/detect specific parts of the screen. It works very well !

Resources