Android news app UI showing empty space on the top of gridview?
Question
I hope all of you are doing great I am developing news app but there white space on the top card view I have used card view as parent constrain layout as a child.
This screenshot
below my news_items.xml where I have implemented article list
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="30dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="6dp"
app:cardElevation="6dp"
android:layout_marginBottom="10dp"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/article_Image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="30dp"
android:scaleType="fitXY"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/article_Author"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/article_Author"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:lineSpacingExtra="8dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/article_Image" />
<TextView
android:id="@+id/article_Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:lineSpacingExtra="8dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/article_Author"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/article_Date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:lineSpacingExtra="8dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/article_Title"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/article_Description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="45dp"
android:lineSpacingExtra="8dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="14sp"
android:textStyle="bold"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/article_Date" />
<ImageButton
android:id="@+id/copy_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_marginEnd="48dp"
android:layout_marginRight="48dp"
android:background="#00FFFFFF"
android:padding="10dp"
android:layout_below="@id/article_Description"
app:layout_constraintBottom_toBottomOf="@+id/share_button"
app:srcCompat="@drawable/ic_copy" />
<ImageButton
android:id="@+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#00FFFFFF"
android:padding="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="@drawable/ic_share" />
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="center"-->
<!--android:orientation="horizontal">-->
<!--<ImageButton-->
<!--android:id="@+id/copy_Button"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_below="@id/article_Description"-->
<!--android:layout_weight="1"-->
<!--android:background="@drawable/ic_copy"-->
<!--android:maxLines="1"-->
<!--android:text="textview1" />-->
<!--<ImageButton-->
<!--android:id="@+id/share_button"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="0"-->
<!--android:background="@drawable/ic_share"-->
<!--android:text="textview2" />-->
<!--</LinearLayout>-->
-->
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
**below my MainActivity where I am using bottom NavigationBar and hosting four news.**
public class MainActivity extends BottomBarHolderActivity implements AllJazeeraFragment.OnFragmentInteractionListener, BBCFragment.OnFragmentInteractionListener, CNNFragment.OnFragmentInteractionListener, CBCNewsFragment.OnFragmentInteractionListener {
// private ApiService apiService;
public static final String url_key = "urlKey";
final int Bottom_CAPACITY = 7;
public ArrayList<Article> articleList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
Article article = new Article(Parcel.obtain());
article.setUrl(article.getUrl());
Intent i = new Intent(this, DetailActivity.class);
i.putExtra("urlKey", article);
// // using the (String name, Parcelable value) overload!
// startActivity(i);
NavigationPage page1 = new NavigationPage("All Jazeera", ContextCompat.getDrawable(this, R.drawable.alljazeera), AllJazeeraFragment.newInstance());
NavigationPage page2 = new NavigationPage("BBC", ContextCompat.getDrawable(this, R.drawable.bbc_icon), CNNFragment.newInstance());
NavigationPage page3 = new NavigationPage("CNN", ContextCompat.getDrawable(this, R.drawable.cnn_icon), AllJazeeraFragment.newInstance());
NavigationPage page4 = new NavigationPage("CBC", ContextCompat.getDrawable(this, R.drawable.cbc_icon), CBCNewsFragment.newInstance());
//NavigationPage page5 = new NavigationPage("Menu", ContextCompat.getDrawable(this, R.drawable.icon_menu), Menu.newInstance());
List<NavigationPage> navigationPages = new ArrayList<>(Bottom_CAPACITY);
Boolean navigation = navigationPages.size() > 6;
navigationPages.add(page1);
navigationPages.add(page2);
navigationPages.add(page3);
navigationPages.add(page4);
super.setupBottomBarHolderActivity(navigationPages);
}
public void onClicked() {
Toast.makeText(this, "Clicked!", Toast.LENGTH_SHORT).show();
}
}
below my AllJazeraFragment other fragment news classes the same
public class AllJazeeraFragment extends Fragment {
public NewsAdapter adapter;
public ArrayList<Article> articleList = new ArrayList();
RecyclerView recyclerView;
private AllJazeeraFragment.OnFragmentInteractionListener listener;
public static AllJazeeraFragment newInstance() {
return new AllJazeeraFragment();
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) {
final View rootView = inflater.inflate(R.layout.alljazeera_fragment, container, false);
NewsInterface apiService = NewsClient.getApiService();
Call<ArticleResponse> call = apiService.getAllJazeera();
call.enqueue(new Callback<ArticleResponse>() {
@Override
public void onResponse(Call<ArticleResponse> call, Response<ArticleResponse> response) {
articleList = new ArrayList(response.body().getArticles());
recyclerView = rootView.findViewById(R.id.recycler_view);
adapter = new NewsAdapter(articleList);
RecyclerView.LayoutManager eLayoutManager = new LinearLayoutManager(getActivity());
recyclerView.setLayoutManager(eLayoutManager);
recyclerView.setAdapter(adapter);
}
@Override
public void onFailure(Call<ArticleResponse> call, Throwable t) {
}
});
return rootView;
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
if (context instanceof AllJazeeraFragment.OnFragmentInteractionListener) {
listener = (AllJazeeraFragment.OnFragmentInteractionListener) context;
} else {
throw new RuntimeException(context.toString() + " must implement OnFragmentInteractionListener");
}
}
@Override
public void onDetach() {
super.onDetach();
listener = null;
}
public interface OnFragmentInteractionListener {
}
}
alljazera_fragment.xml
<?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="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</LinearLayout>
My Adapter class where I have implemented news adapter
public class NewsAdapter extends RecyclerView.Adapter {
public static final String urlKey = "urlKey";
public static final String ImageKey = "imageKey";
private final List<Article> articleList;
Context context;
private ClipboardManager myClipboard;
private ClipData myClip;
public NewsAdapter(List<Article> articleList) {
this.articleList = articleList;
}
@NonNull
@Override
public NewsViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View itemView = LayoutInflater.
from(viewGroup.getContext()).
inflate(R.layout.news_item, viewGroup, false);
return new NewsViewHolder(itemView);
}
@Override
public void onBindViewHolder(@NonNull final NewsViewHolder newsViewHolder, final int i) {
final Article article = articleList.get(i);
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();
} catch (java.text.ParseException e) {
e.printStackTrace();
}
String formatted = output.format(d);
newsViewHolder.articleAuthor.setText(article.getAuthor());
newsViewHolder.articleTitle.setText(article.getTitle());
newsViewHolder.articleDescription.setText(article.getDescription());
newsViewHolder.articleDate.setText(formatted);
//newsViewHolder.articleDate.setText(article.getPublishedAt());
Picasso.get().load(article.getUrlToImage()).into(newsViewHolder.articleImage);
newsViewHolder.copy_Button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
myClipboard = (ClipboardManager) v.getContext().getSystemService(Context.CLIPBOARD_SERVICE);
myClip = ClipData.newPlainText("label", newsViewHolder.articleTitle.getText().toString());
myClipboard.setPrimaryClip(myClip);
Toast.makeText(v.getContext(), "Copied to clipboard", Toast.LENGTH_SHORT).show();
}
});
newsViewHolder.shareButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View 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")));
}
});
newsViewHolder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(view.getContext(), DetailActivity.class);
//start the activity from the view/context
intent.putExtra("urlKey", article.getUrl());
//intent.putExtra("imageKey", article.getUrlToImage());
view.getContext().startActivity(intent);
}
});
}
@Override
public int getItemCount() {
return articleList.size();
}
public final class NewsViewHolder extends RecyclerView.ViewHolder {
// TextView articleAuthor, articleTitle, articleDescription, articleUrl;
// ImageView articleImage;
@BindView(R.id.article_Image)
ImageView articleImage;
@BindView(R.id.article_Author)
TextView articleAuthor;
@BindView(R.id.article_Title)
TextView articleTitle;
@BindView(R.id.article_Description)
TextView articleDescription;
@BindView(R.id.article_Date)
TextView articleDate;
@BindView(R.id.share_button)
ImageButton shareButton;
@BindView(R.id.copy_Button)
ImageButton copy_Button;
public NewsViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
if (context != null) {
Typeface typeface = ResourcesCompat.getFont(context, R.font.roboto_black);
articleTitle.setTypeface(typeface);
}
}
}
}
Please help me to solve the issue,
regards, Yodgorbek
1 answers
solution1
0 2018-10-14 18:35:16
Perhaps this layout will give you the result you wish to achieve. This is just the CardView you will probably want to embed it in a FrameLayout .
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/article_Image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
app:srcCompat="@drawable/automobile"
/>
<TextView
android:id="@+id/article_Author"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="TextView"
android:maxLines="2"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="16sp"
android:textStyle="bold"
android:layout_below="@id/article_Image"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
/>
<TextView
android:id="@+id/article_Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:lineSpacingExtra="8dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="20sp"
android:textStyle="bold"
android:layout_below="@id/article_Author"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
/>
<TextView
android:id="@+id/article_Date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:lineSpacingExtra="8dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#DE000000"
android:textSize="14sp"
android:textStyle="bold"
android:layout_below="@id/article_Title"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
/>
<TextView
android:id="@+id/article_Description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/really_long_text_250"
android:lineSpacingExtra="8dp"
android:maxLines="3"
android:textColor="#DE000000"
android:textSize="14sp"
android:textStyle="bold"
android:layout_marginTop="20dp"
android:layout_marginStart="50dp"
android:layout_marginEnd="50dp"
android:layout_below="@id/article_Date"
android:layout_above="@id/buttonContainer"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
/>
<RelativeLayout
android:id="@+id/buttonContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
>
<ImageButton
android:id="@+id/copy_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00FFFFFF"
android:layout_alignParentStart="true"
android:padding="20dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:srcCompat="@drawable/ic_event_black_24dp" />
<ImageButton
android:id="@+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00FFFFFF"
android:layout_alignParentEnd="true"
android:padding="20dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:srcCompat="@drawable/ic_contacts_black_24dp" />
</RelativeLayout>
</RelativeLayout>
Note:
I choose RelativeLayout because I am more familiar with it.
Please let me know if you have any issues or the layout does not fulfill the need design specs.
Don't for get to correct the spelling of "Al Jazeera".
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
android gridview not showing top row
Android Fragment: empty space on top
Android : PublisherAdView showing empty space
Remove Android alert dialog empty space at the top
Empty space on top of toolbar. Android, Java
Android- empty space at top of list view
Removed AdMob from source code, but it's still showing an empty space at bottom in app Android Studio
Android : detect click event at empty space of gridview inside linearlayout
Add space to top and bottom of GridView
Empty space in Android app when using Mobclix
Related Tags