I am developing news android app I have followed popular news app ui but it is showing very vague following picture current screenshot of app enter image description here

followingscreenshot I want to achieve screenshot which I want to achieve enter image description here

below my article_list.xml

<ImageView
    android:id="@+id/articleImage"
    android:layout_width="408dp"
    android:layout_height="208dp"
    android:layout_gravity="center"
    app:layout_constraintRight_toRightOf="parent"
    tools:ignore="MissingConstraints" />

<TextView
    android:id="@+id/articleAuthor"
    android:layout_width="136dp"
    android:layout_height="75dp"
    android:gravity="start"
    android:text="@string/article_author"
    android:textSize="12sp"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteY="219dp" />

<TextView
    android:id="@+id/articleTitle"
    android:layout_width="160dp"
    android:layout_height="78dp"
    android:text="@string/article_title"
    android:textColor="@color/colorBlack"
    android:textSize="28sp"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="3dp"
    tools:layout_editor_absoluteY="325dp" />


<TextView
    android:id="@+id/articleTime"
    android:layout_width="160dp"
    android:layout_height="78dp"
    android:text="Article Time"
    android:textSize="28sp"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="3dp"
    tools:layout_editor_absoluteY="459dp" />

<ImageButton
    android:id="@+id/articleShare"
    android:layout_width="139dp"
    android:layout_height="60dp"
    android:src="@drawable/ic_share"
    android:background="@color/colorWhite"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="115dp"
    tools:layout_editor_absoluteY="558dp" />


<ImageButton
    android:id="@+id/articleFavorite"
    android:layout_width="139dp"
    android:layout_height="60dp"
    android:background="@color/colorWhite"
    android:src="@drawable/ic_bookmark"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="272dp"
    tools:layout_editor_absoluteY="558dp" />

below my adapter class

public class ArticleAdapter extends RecyclerView.Adapter {

public static final String urlKey = "urlKey";
public static final String imageKey = "imageKey";
public ArticleAdapter.ClickListener listener;
private ClipboardManager myClipboard;
private ClipData myClip;
Context context;
private List<Article> articles = new ArrayList<>();


public ArticleAdapter(List<Article> articles, SportNews sportNews) {
    this.articles = articles;
    this.listener = listener;

}

public ArticleAdapter(ArticleAdapter.ClickListener clickListener) {
}

@NonNull
@Override
public CustomViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
    View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.article_list, null);
    return new CustomViewHolder(itemView);
}

@Override
public void onBindViewHolder(@NonNull CustomViewHolder customViewHolder, int position) {
    Article article = articles.get(position);
    SimpleDateFormat input = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
    SimpleDateFormat output = new SimpleDateFormat("dd/MM/yyyy");

    Date d = new Date();
    try {
        d = input.parse(article.getPublishedAt());
    } catch (ParseException e) {
        e.printStackTrace();
    }


    String formatted = output.format(d);
    if (article != null) {
        customViewHolder.articleAuthor.setText(article.getAuthor());
        customViewHolder.articleTitle.setText(article.getTitle());
        customViewHolder.articleTime.setText(formatted);
        Picasso.get().load(article.getUrlToImage()).into(customViewHolder.articleImage);
    }
    customViewHolder.itemView.setOnClickListener(v -> {
        Intent intent = new Intent(v.getContext(), DetailActivity.class);

        intent.putExtra("urlKey", article.getUrl());

        v.getContext().startActivity(intent);
    });
    customViewHolder.articleShare.setOnClickListener(v -> {
        Intent sharingIntent = new Intent(android.content.Intent.ACTION_SEND);
        sharingIntent.setType("text/plain");
        String articleDescription = article.getDescription();
        String articleTitle = article.getTitle();
        sharingIntent.putExtra(android.content.Intent.EXTRA_SUBJECT, articleDescription);
        sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT, articleTitle);
        v.getContext().startActivity((Intent.createChooser(sharingIntent, "Share using")));


    });

    customViewHolder.articleFavorite.setOnClickListener(v -> {
        myClipboard = (ClipboardManager) v.getContext().getSystemService(Context.CLIPBOARD_SERVICE);


        myClip = ClipData.newPlainText("label", customViewHolder.articleTitle.getText().toString());
        myClipboard.setPrimaryClip(myClip);
        Toast.makeText(v.getContext(), "Copied to clipboard", Toast.LENGTH_SHORT).show();

    });

}


@Override
public int getItemCount() {
    if (articles == null) return 0;
    return articles.size();
}

public interface ClickListener {
}

public class CustomViewHolder extends RecyclerView.ViewHolder {
    @BindView(R.id.articleAuthor)
    TextView articleAuthor;
    @BindView(R.id.articleTitle)
    TextView articleTitle;
    @BindView(R.id.articleTime)
    TextView articleTime;
    @BindView(R.id.articleShare)
    ImageButton articleShare;
    @BindView(R.id.articleFavorite)
    ImageButton articleFavorite;
    @BindView(R.id.articleImage)
    ImageView articleImage;


    public CustomViewHolder(View view) {
        super(view);
        ButterKnife.bind(this, view);
      }
  }
}

2 Answers

0
Moh Kh On

Your problem is that you're not setting the right constraints on the views.

  1. The tools attribute only affect the preview and NOT the actual implementation. So every time you have something like this tools:layout_editor_absoluteX="3dp", you're only moving the view in the preview and not the actual implementation.
  2. You need to set the right the constraints on the views. For example if your image needs to be on the top right of the parent view app:layout_constraintRight_toRightOf="parent" and app:layout_constraintTop_toTopOf="parent"
  3. You need to constraint views to each other, for example if articleTitle needs to sit on the left of the parent and underneath articleAuthor then inside articleTitle you need to set: app:layout_constraintLeft_toLeftOf="parent" and app:layout_constraintTop_toBottomOf="@id/articleAuthor"

I highly recommend you to delete all the tools:ignore="MissingConstraints", the IDE will will actually tell you what constraints each view is missing.

Finally, you should have a look at the example at bottom of this page: https://developer.android.com/training/constraint-layout

0
Tamir Abutbul On

You were missing a lot of constraints, in addition, you have used fixed size on your views. Because different phones got different screen size using a fixed size will make your screen not responsive to all screen sizes.

If you want to avoid this you can use Guildelines in order to determine your view width and height, by doing that your layout will fit all screen sizes.


Here is an example using ConstraintLayout:

<?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="match_parent">

<ImageView
    android:id="@+id/articleImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline4"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/articleAuthor"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:gravity="start"
    android:text="article_author"
    android:textSize="12sp"
    app:layout_constraintEnd_toStartOf="@+id/guideline4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/articleTitle"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="article_title"
    android:textSize="28sp"
    app:layout_constraintBottom_toBottomOf="@+id/articleImage"
    app:layout_constraintEnd_toStartOf="@+id/guideline4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/articleAuthor" />


<TextView
    android:id="@+id/articleTime"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="Article Time"
    android:textSize="18sp"
    app:layout_constraintBottom_toTopOf="@+id/guideline5"
    app:layout_constraintEnd_toStartOf="@+id/articleFavorite"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/articleTitle"
    app:layout_constraintTop_toTopOf="@+id/guideline6" />

<ImageButton
    android:id="@+id/articleShare"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/articleTime"
    app:layout_constraintEnd_toStartOf="@+id/guideline4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/articleFavorite"
    app:layout_constraintTop_toTopOf="@+id/articleTime" />


<ImageButton
    android:id="@+id/articleFavorite"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/articleTime"
    app:layout_constraintEnd_toStartOf="@+id/articleShare"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/articleTime"
    app:layout_constraintTop_toTopOf="@+id/articleTime" />

<android.support.constraint.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<android.support.constraint.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.3" />

<android.support.constraint.Guideline
    android:id="@+id/guideline5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.4"/>
</android.support.constraint.ConstraintLayout>

It will look like this:

enter image description here

And if you want to change your views dimensions just move the guidelines and all the layout will fit accordingly.


Some tip that I can give you - don't use tools:ignore="MissingConstraints" because this attribute will only affect the preview and what you will see in the preview and on the run time will not be the same.