I have coded an app to learn about Custom List View. While the app has no errors, I have one issue. I have shown it in the images as follows.
IMAGE 1
IMAGE 2
The problem is I have to scroll a long way before i can find the next list item.The list items do not appear one below the other.How to resolve this issue?
Here is my code:
package com.example.hp.customlistview;
import android.support.constraint.ConstraintLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
int IMAGES[]={R.drawable.adsense, R.drawable.allo, R.drawable.chrome, R.drawable.firebase, R.drawable.youtube};
String[] NAMES={"AdSense","Allo","Chrome","Firebase","YouTube"};
String [] DESCRIPTIONS={"Money through ads","Video calling","Web Browser","Cloud Database","Video Streaming"};
private ListView listView;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView=(ListView)findViewById(R.id.listView);
CustomAdapter customAdapter=new CustomAdapter();
listView.setAdapter(customAdapter);
}
class CustomAdapter extends BaseAdapter{
#Override
public int getCount() {
Log.d("Length of Array ","The length is "+IMAGES.length);
return IMAGES.length;
}
#Override
public Object getItem(int i) {
return null;
}
#Override
public long getItemId(int i) {
return i;
}
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
LayoutInflater layoutInflater=(LayoutInflater)getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE);
view=layoutInflater.inflate(R.layout.customlayout, null);
Log.d("Image ID","The id is "+R.id.imageView);
ImageView imageView=(ImageView)view.findViewById(R.id.imageView);
TextView textView_name=(TextView)view.findViewById(R.id.textView);
TextView textView_desc=(TextView)view.findViewById(R.id.textView2);
if(imageView==null)
Log.d("NULL?","YES IT IS NULL");
else
Log.d("NULL?","NO IT IS NOT NULL");
imageView.setImageResource(IMAGES[i]);
textView_name.setText(NAMES[i]);
textView_desc.setText(DESCRIPTIONS[i]);
Log.d("Hello","Hello there "+textView_name.getText().toString());
return view;
}
}
}
customlayout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="120dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="86dp"
android:layout_height="91dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView"
android:layout_width="161dp"
android:layout_height="39dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="28dp"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView2"
android:layout_width="237dp"
android:layout_height="57dp"
android:layout_marginBottom="380dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="16dp"
android:layout_marginStart="44dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="39dp"
android:layout_height="39dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="com.example.hp.customlistview.MainActivity">
<ListView
android:id="#+id/listView"
android:layout_width="386dp"
android:layout_height="409dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Ok"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/listView" />
</android.support.constraint.ConstraintLayout>
To resolve this, i tried the following
1)android:layout_height="match_parent" to a specific height of 120 dp.
(It is in customlayout.xml)
But it did not work
2)Used some other layout, such as Absolute and Relative Layout, but image fills up the list content much beyond expected size
EDIT:
I have the list items displayed in a compact manner, as follows,
after suggestions by Ben P. in the comments below.
IMAGE 3
But the description is not appearing,although clearly i have set it programatically in MainActivity.java
I observed that setting android:layout_height to some custom value makes the description text view disappear in the preview.
If someone is downvoting,please give the reason for doing so. This will help me improve the quality of my questions.
Ok, I figured it out. Posting it for anyone who may have similar doubts in future.
Set layout height as 120dp or some finite value even before dragging and dropping items.
Now start drag and drop operation on this reduced layout.
Pretty simple i guess. This helped me resolve it.
Here it is:)
Image 5
Related
I have this xml file where there are 4 image views, with one logo at the centre and the other three are just circles with radius greater than the previous one surrounding the logo. I want to display this as an animation until my page gets loaded. In want that the three circles appear one after the other in loop in a sequence. How can I do that ?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/center" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anim1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anim2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anim3" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have also attached a picture for a better visualization if needed :
enter image description here
#Srijan,
There are more ways to achieve this.
Please refer to objectAnimator or animation-list drawable for more details.
As a quick answer to your problem, please see the below sample code.
package com.jrh.testanim;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
int count= 0;
int imgArr[] = new int[]{
R.drawable.circle1,
R.drawable.circle2,
R.drawable.circle3,
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageView imageView = (ImageView) findViewById(R.id.animation_imageview);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
imageView.setImageResource(imgArr[count]);
handler.postDelayed(this, 500);
count++;
if (count > 2) {
count = 0;
}
}
}, 500);
}
}
Please check this and mark accepted, if it solves your problem.
Thanks
JRH
I have a fragment layout that is a part of a PageViewer.
The fragment has 2 RecyclerViews - one on the top of the layout which is horizontal, the other one at the bottom which is vertical.
Here is my XML :
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/fragment_marketplace_marketplace_title"
android:textSize="30sp"
android:textStyle="bold" />
<SearchView
android:id="#+id/fragment_marketplace_searchview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="Search..."
app:iconifiedByDefault="false"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginLeft="14dp"
android:layout_marginTop="15dp"
android:text="#string/fragment_marketplace_discover_products_from_myverte"
android:textSize="17sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_marketplace_brands_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
tools:listitem="#layout/fragment_marketplace_vendor_row_item" />
<android.support.v4.widget.NestedScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginLeft="14dp"
android:background="#color/very_light_grey"
android:paddingTop="15dp"
android:text="#string/fragment_marketplace_featured_products"
android:textSize="17sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_marketplace_products_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/very_light_grey"
tools:listitem="#layout/fragment_marketplace_products_row_item" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
1) When scrolling left/right the scrolling sometimes gets stuck and not responsive. Why does this happen?
2) How do I make the view shows some part of the next views in the list, so it will make the filling of an actual scrollable list and not just a stale image?
edit -
here is my row item xml -
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="200dp"
android:padding="10dp">
<ImageView
android:id="#+id/vendorImageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
edit -
my recyclerview initing -
private void initViews(View view) {
gson = new Gson();
miniVendorModelList = new ArrayList<>();
miniProductModelList = new ArrayList<>();
searchView = view.findViewById(R.id.fragment_marketplace_searchview);
Drawable drawable = getResources().getDrawable(R.drawable.search_widget_very_light_grey_background);
searchView.setBackground(drawable);
//adapters
vendorsAdapter = new VendorAdapter(miniVendorModelList);
productsAdapter = new ProductsAdapter(miniProductModelList, getContext());
//lists
vendorsList = view.findViewById(R.id.fragment_marketplace_brands_recycler_view);
productsList = view.findViewById(R.id.fragment_marketplace_products_recycler_view);
vendorsList.setNestedScrollingEnabled(false);
productsList.setNestedScrollingEnabled(false);
//brands recycler
vendorsList.setHasFixedSize(true);
vendorsList.setLayoutManager(new LinearLayoutManager(getContext(),LinearLayoutManager.HORIZONTAL, false));
vendorsList.setAdapter(vendorsAdapter);
//products recycler
productsList.setLayoutManager(new GridLayoutManager(getContext(), 2));
productsList.setHasFixedSize(true);
productsList.setAdapter(productsAdapter);
}
my adapter -
package com.twoverte.adapters;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.twoverte.R;
import com.twoverte.adapters.holder.VendorsHolder;
import com.twoverte.models.Vendor.MiniVendorModel;
import java.util.ArrayList;
public class VendorAdapter extends RecyclerView.Adapter<VendorsHolder> {
private ArrayList<MiniVendorModel> miniVendorModels;
public VendorAdapter(ArrayList<MiniVendorModel> miniVendorModels) {
this.miniVendorModels = miniVendorModels;
}
#NonNull
#Override
public VendorsHolder onCreateViewHolder(#NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.fragment_marketplace_vendor_row_item, viewGroup, false);
return new VendorsHolder(view);
}
#Override
public void onBindViewHolder(#NonNull VendorsHolder vendorsHolder, int i) {
MiniVendorModel model = miniVendorModels.get(i);
Picasso.get().load(model.getImageURL()).memoryPolicy(MemoryPolicy.NO_CACHE).into(vendorsHolder.vendorImageView);
}
#Override
public int getItemCount() {
return miniVendorModels.size();
}
}
How do I make the view shows some part of the next views in the list, so it will make the filling of an actual scrollable list and not just a stale image?
What you can do here is make your layout/fragment_marketplace_vendor_row_item occupy say 80% width also add some padding
update width to 80%
android:layout_width="0dp"
android:layout_weight="0.8"
When scrolling left/right the scrolling sometimes gets stuck and not responsive. Why does this happen?
this might have been answered here
Found a solution for bad scrolling - wrapped the horizontal RV with a NestedScrollView. Works perfectly, I have no idea why. Just trial and error.
If someone knows why this works it would be awesome.
Hi this is my first question here.
MainActivity.java
package com.example.kerry.chellenge04;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
EditText name;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
name=(EditText)findViewById(R.id.text);
}
public void button(View view){
String string=name.getText().toString();
Toast.makeText(getApplicationContext(), string, Toast.LENGTH_LONG).show();
}
}
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<EditText
android:layout_width="288dp"
android:layout_height="346dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="8dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="button"
android:text="Button"
tools:layout_editor_absoluteX="58dp"
tools:layout_editor_absoluteY="401dp" />
</LinearLayout>
It's very simple code. When I press the button, the app is supposed to show you what you typed in edittext, but it stops. Can you guys please tell me what the problem is?
Try this one
You need to assign an id to your EditText:
<EditText
android:id="#+id/text"
android:layout_width="288dp"
android:layout_height="346dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="8dp" />
You need to assign an id to your EditText:
android:id="#+id/text"
otherwise this line:
name=(EditText)findViewById(R.id.text);
will assign null to name.
So when you try to access any property or method of the object name
a Null Pointer Exception will be thrown and your app will crash.
you should you the activity context rather than the application context.
try to replace
Toast.makeText(getApplicationContext(), string, Toast.LENGTH_LONG).show();
with
Toast.makeText(view.getContext(), string, Toast.LENGTH_LONG).show();
then, as already said, you should add the id, but I believe you did, as you can access the generated R.id.text
package com.example.android.popularmovies;
import android.content.ActivityNotFoundException;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class MovieAdapter extends RecyclerView.Adapter<MovieAdapter.ViewHolder> {
private ArrayList<String> mTrailers;
private Context mContext;
// Provide a suitable constructor (depends on the kind of dataset)
public MovieAdapter(Context context, ArrayList<String> trailers) {
mTrailers = trailers;
mContext = context;
}
// Create new views (invoked by the layout manager)
#Override
public MovieAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
// create a new view
LinearLayout v = (LinearLayout)LayoutInflater.from(parent.getContext())
.inflate(R.layout.trailer_view, parent, false);
ViewHolder vh = new ViewHolder(v);
return vh;
}
public void watchYoutubeVideo(String id) {
Intent appIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube:" + id));
Intent webIntent = new Intent(Intent.ACTION_VIEW,
Uri.parse("http://www.youtube.com/watch?v=" + id));
try {
mContext.startActivity(appIntent);
} catch (ActivityNotFoundException ex) {
mContext.startActivity(webIntent);
}
}
// Replace the contents of a view (invoked by the layout manager)
#Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
holder.mImageView.setImageResource(R.drawable.ic_play_arrow_black_24dp);
holder.mTextView.setText("Trailer " + (position + 1));
holder.mTextView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
watchYoutubeVideo(mTrailers.get(holder.getAdapterPosition()));
}
});
}
// Return the size of your dataset (invoked by the layout manager)
#Override
public int getItemCount() {
return mTrailers.size();
}
// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public static class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public TextView mTextView;
public ImageView mImageView;
public ViewHolder(View v) {
super(v);
mImageView = v.findViewById(R.id.play_button_image_view);
mTextView = v.findViewById(R.id.movie_text_view);
}
}
}
I want my UI to be like this
With my code however the app looks like this:
Here is my xml resource:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/play_button_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:maxHeight="10dp"
android:maxWidth="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_play_arrow_black_24dp"
/>
<TextView
android:id="#+id/movie_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center_horizontal"
android:padding="10dp"
android:textSize="16sp" />
</LinearLayout>
Is there a way to implement this without using different viewholders? Can it be done with a single ViewHolder?
I have seen ways to implement different View types with a RecyclerView, but I would prefer to keep my code as simple as possible.
change the height of LinearLayot to "wrap_content". and add gravity as "center_vertical"
change you item's layout like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/play_button_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:maxHeight="10dp"
android:maxWidth="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_play_arrow_black_24dp"
/>
<TextView
android:id="#+id/movie_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center_horizontal"
android:padding="10dp"
android:textSize="16sp"/>
</LinearLayout>
Try android:layout_height="wrap_content", instead of match_parent in LinearLayout.
1) You need to change the height of the layout: android:layout_height="wrap_content"
2) For the ImageView set:
android:layout_width="10dp"
android:layout_height="10dp"
(very small)
You can also use ConstraintLayout like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/ic_play_arrow_black_24dp" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Trailer 1"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
That being said the easiest solution would be simply using "wrap_content" on your parent layout.
try this
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/play_button_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/ic_play_arrow_black_24dp" />
<TextView
android:id="#+id/movie_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Trailer 1"
android:layout_margin="5dp"
android:padding="10dp"
android:textSize="16sp" />
</LinearLayout>
Output
I am trying to implement a step-by-step tutorial at the start of my app. I created 3 fragment instances that the user can scroll through. They are combined using a FragmentPagerAdapter, that is set up and added to a TabLayout so that the fragments are treated as tabs. The tab indicators are given a custom style so that they appear as dots.
The issue I am encountering is that everything looks fine in design view, but when the app is deployed in the emulator, the constraint layouts are not respected and the positioning and sizing of the view controls within the fragment end up in a wonky configuration. The activity is set to portrait only, so display orientation is not an issue.
This is how the fragment appears in design view:
3 separate GIFs are loaded in the WebView instances (they are random for the purposes of this question).
This is how everything actually appears in the emulator:
As you can see, the WebView is the size of the entire fragment, and the TextView and Button are nowhere to be found, even if the WebView is removed.
Here is the entire code and Android Studio project associated with the question: https://github.com/mathusummut/StackOverflowQuestionCode1
Here is the most relevant code:
TutorialActivity.java:
package mathusummut.dabtest;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
public class TutorialActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tutorial);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
Fragment currentPage = new TutorialFragment();
Bundle currentBundle = new Bundle();
currentBundle.putString("tutorialText", "1. Turn the volume up ↑");
currentBundle.putString("tutorialGif", "file:///android_asset/volume.gif");
currentPage.setArguments(currentBundle);
adapter.addFragment(currentPage, "");
currentPage = new TutorialFragment();
currentBundle = new Bundle();
currentBundle.putString("tutorialText", "2. Grab the phone in one hand...");
currentBundle.putString("tutorialGif", "file:///android_asset/step2.gif");
currentPage.setArguments(currentBundle);
adapter.addFragment(currentPage, "");
currentPage = new TutorialFragment();
currentBundle = new Bundle();
currentBundle.putString("tutorialText", "Dab...");
currentBundle.putString("tutorialGif", "file:///android_asset/step3.gif");
currentPage.setArguments(currentBundle);
adapter.addFragment(currentPage, "");
ViewPager viewPager = findViewById(R.id.viewpager);
viewPager.setOffscreenPageLimit(3);
viewPager.setAdapter(adapter);
((TabLayout) findViewById(R.id.tabs)).setupWithViewPager(viewPager);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId()== android.R.id.home) {
finish();
return true;
} else
return super.onOptionsItemSelected(item);
}
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
private final List<String> fragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
#Override
public int getCount() {
return fragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
}
}
fragment_tutorial.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
tools:context="mathusummut.dabtest.TutorialFragment">
<WebView
android:id="#+id/tutorialGifView"
android:layout_width="330dp"
android:layout_height="346dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</WebView>
<TextView
android:id="#+id/tutorialTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:text="Instructions"
android:textAlignment="center"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/nextButton"
android:layout_width="124dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="456dp"
android:layout_x="69dp"
android:layout_y="386dp"
android:background="#android:color/holo_red_dark"
android:text="Next"
android:textAlignment="center"
android:textAllCaps="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
activity_tutorial.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinatorLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/appBarLayout2"
app:layout_constraintTop_toTopOf="#+id/appBarLayout2">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabMode="fixed"
app:tabIndicatorHeight="0dp"/>
</android.support.constraint.ConstraintLayout>
I have tried using RelativeLayout instead of ConstraintLayout, but the change seems to have no effect on the result. What can I do to resolve this issue, please?
This is you code done my change you required.
enter image description here
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View currentFragment = inflater.inflate(R.layout.fragment_tutorial, container, false);
WebView view = currentFragment.findViewById(R.id.tutorialGifView);
Bundle passedArguments = getArguments();
((TextView) currentFragment.findViewById(R.id.tutorialTextView)).setText(passedArguments.getString("tutorialText"));
view.loadDataWithBaseURL(null, TEMPLATE_HTML.replace("gif", passedArguments.getString("tutorialGif")), "text/html", "utf-8", null);
view.setBackgroundColor(Color.TRANSPARENT);
view.setInitialScale(1);
view.getSettings().setJavaScriptEnabled(true);
view.getSettings().setLoadWithOverviewMode(true);
view.getSettings().setUseWideViewPort(true);
view.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
view.setScrollbarFadingEnabled(false);
return currentFragment;
}
}˚
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:orientation="vertical"
tools:context="mathusummut.dabtest.TutorialFragment">
<TextView
android:id="#+id/tutorialTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp"
android:text="Instructions"
android:textAlignment="center"
android:textSize="36sp" />
<WebView
android:id="#+id/tutorialGifView"
android:layout_width="330dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp" />
<Button
android:id="#+id/nextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:background="#android:color/holo_red_dark"
android:text="Next"
android:textAlignment="center"
android:textAllCaps="false"
android:textSize="24sp" />
I pull you code from GitHub .I think it is ok and working fine for you.
I make a separated branch push for you GitHub.