So i am creating this app which will display products in a grid, so for example on a nexus 7 portrait view, it will be 2 in each row, while in landscape mode, there will be 4 in a row.
Each product has a imagine, and then a few textviews below it displaying a few information.
However the last two textviews, which display free delivery and number of special offers, seems to be overlapped by the next image below. Could anyone please help me pin point where im going wrong. The layout is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center"/>
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="2"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
You're missing a namespace declaration as well as a root layout. You need a root layout to anchor everything else in. Depending on your needs, perhaps a LinearLayout would do the trick. Below I've wrapped everything in a vertically oriented linear layout. Let me know if that solves anything for you.
<?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" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center" />
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:includeFontPadding="false"
android:lines="2"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:paddingTop="6dp" />
</RelativeLayout>
</LinearLayout>
Related
I am trying to create a setting screen, below is the code and preview in Android Studio.
It has a couple of issues. The CardView with the scrollView layout is not working as it should
What I want is, my CardView to be adjusted in the middle of userDetailsLayout and logoutBtn with the spacing of #dimen/_20sdp. But it can be seen that its stretching all the way to logoutBtn,
If I use a small screen mobile, the CardView, also starts overlapping userDetailsLayout
It's like, its making CardView fixed size instead of variable-sized based on space. What should I do?
android:layout_margin="#dimen/_20sdp"
app:layout_constraintTop_toBottomOf="#+id/userDetailsLayout"
app:layout_constraintBottom_toTopOf="#+id/logoutBtn"
app:layout_constraintRight_toRightOf="parent"
<?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"
android:background="#color/forgot_bg_color"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/topBar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
app:contentInsetStart="0dp"
android:elevation="5dp"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_100sdp"
android:background="#android:color/white"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_marginBottom="#dimen/_5sdp"
android:layout_marginRight="#dimen/_10sdp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="#dimen/_35sdp"
android:layout_height="#dimen/_35sdp"
android:src="#drawable/down_arrow"
android:scaleType="centerInside"
android:rotation="90"
android:layout_marginBottom="-10dp"
android:layout_above="#+id/inboxBtn"
android:id="#+id/backBtn"
/>
<TextView
android:layout_toRightOf="#+id/backBtn"
android:fontFamily="#font/montserrat_bold"
android:layout_above="#+id/inboxBtn"
android:gravity="bottom"
android:textSize="#dimen/_16sdp"
android:drawablePadding="#dimen/_8sdp"
android:text="#string/action_settings"
android:textColor="#color/text_gray"
android:id="#+id/homeTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/inboxBtn"
android:fontFamily="#font/montserrat_medium"
android:layout_alignParentBottom="true"
android:textSize="#dimen/_14sdp"
android:gravity="center"
android:drawablePadding="#dimen/_8sdp"
android:textColor="#color/text_gray"
android:layout_width="wrap_content"
android:layout_height="#dimen/_35sdp"
/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:id="#+id/userDetailsLayout"
android:paddingLeft="#dimen/_20sdp"
android:paddingRight="#dimen/_20sdp"
app:layout_constraintTop_toBottomOf="#+id/topBar"
android:layout_width="match_parent"
android:layout_height="#dimen/_100sdp"
>
<androidx.cardview.widget.CardView
android:id="#+id/userLayout"
android:layout_centerVertical="true"
app:cardElevation="5dp"
app:cardCornerRadius="#dimen/_35sdp"
android:layout_width="#dimen/_70sdp"
android:layout_height="#dimen/_70sdp"
>
<ImageView
android:id="#+id/userDp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.cardview.widget.CardView>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_toRightOf="#+id/userLayout"
android:layout_marginLeft="#dimen/_10sdp"
>
<TextView
android:fontFamily="#font/montserrat_bold"
android:textSize="#dimen/_16sdp"
android:text="#string/action_settings"
android:textColor="#color/text_gray"
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/action_settings"
android:textColor="#color/text_gray"
android:id="#+id/details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_margin="#dimen/_20sdp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/userDetailsLayout"
app:layout_constraintBottom_toTopOf="#+id/logoutBtn"
android:layout_width="match_parent"
app:cardCornerRadius="#dimen/_10sdp"
app:cardElevation="0dp"
android:layout_height="wrap_content"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/_10sdp"
android:paddingRight="#dimen/_10sdp"
>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/notifications"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Switch android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/manage_address"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/about"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/support"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/terms"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/privacy"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
</LinearLayout>
</ScrollView>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/logoutBtn"
android:fontFamily="#font/montserrat_bold"
android:gravity="center"
android:layout_marginRight="#dimen/_20sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginBottom="#dimen/_20sdp"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:textColor="#android:color/white"
android:text="#string/logout"
android:textSize="#dimen/_14sdp"
android:background="#drawable/logout_bg"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Not 100% sure what you mean, but from the code I would suggest you to change:
android:layout_width="0dp"
android:layout_height="0dp"
when you specify height and width constraints on the view. Otherwise the constraints won't work. And btw. dont use so many nested layouts inside your constraintlayout. Every single layout will need a complete new measure and render process which slow down your app a lot. Please also look at Guidelines and ConstraintAspectRatio.
The issue is that the logoutBtn is within the same parent as your CardView. They both have
android:layout_margin="#dimen/_20sdp"
That's why they have the same width, they both align right and left to the parent and have the same about of margin. So if you want it to be 20dp from the CardView you either want to nest the logoutBtn in the cardview or simply make the logoutBtn have 40dp
<TextView
android:id="#+id/logoutBtn"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginBottom="20dp"
android:background="#color/error_red"
android:gravity="center"
android:text="string/logout"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
I'm using Relativelayout within cardview layout to show the user details. But I want to show the two button at the end with equal width on and everything in the left side of Image which will stretch from Top to bottom.
But I'm not able to do so.
here is my xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
android:padding="5dp"
android:layout_marginBottom="2dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
>
<ImageView
android:id="#+id/contact_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#fff"
android:src="#drawable/binil"
android:padding="1dp" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/top"
android:padding="5dp">
<TextView
android:id="#+id/contact_name"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Sagar Rawal"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_mobile"
android:text="9868336847"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_address"
android:layout_below="#+id/contact_name"
android:layout_width="wrap_content"
android:text="Jumla"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textStyle="bold"
android:layout_toRightOf="#+id/contact_mobile" />
<TextView
android:id="#+id/contact_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="searchbbc1881#gmail.com"
android:layout_below="#+id/contact_mobile"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<ImageButton
android:layout_below="#+id/contact_email"
android:id="#+id/call"
android:background="#drawable/shape_button"
android:layout_width="wrap_content"
android:src="#drawable/ic_call_black_24dp"
android:layout_height="wrap_content" />
<ImageButton
android:layout_toRightOf="#id/call"
android:layout_below="#+id/contact_email"
android:background="#drawable/shape_button"
android:layout_width="wrap_content"
android:src="#drawable/ic_email_black_24dp"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>
My output is
But I want something similar to this
Where two buttons will equally stretch to left side of Image.
Please help
Try using LinearLayout weightSum like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="50"
android:layout_height="wrap_content"
android:text="text1!" />
<TextView
android:layout_width="0dp"
android:layout_weight="50"
android:layout_height="wrap_content"
android:text="text2!" />
</LinearLayout>
Update:
Replace your code with this, it will solve your issue
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
android:layout_marginBottom="2dp"
android:padding="5dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="1">
<RelativeLayout
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".7"
android:padding="5dp">
<TextView
android:id="#+id/contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Sagar Rawal"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_mobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/contact_name"
android:text="9868336847"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/contact_mobile"
android:text="Jumla"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/contact_mobile"
android:text="searchbbc1881#gmail.com"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:weightSum="1">
<ImageButton
android:id="#+id/call"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:layout_weight=".5"
android:background="#drawable/shape_button"
android:src="#drawable/ic_email_black_24dp"
/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:layout_toRightOf="#id/call"
android:layout_weight=".5"
android:background="#drawable/shape_button"
android:src="#drawable/ic_email_black_24dp"
/>
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/contact_profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:background="#fff"
android:padding="1dp"
android:src="#drawable/ic_launcher_background" />
</LinearLayout>
</android.support.v7.widget.CardView>
Try to reorganize it this way:
I want to change a design of me item in GridView.
Now is:
I want this item in square shape not like it is now in rectangle.
Also, the IMG (from the screenshot) i want to have above 'Name' and every textview at the center. Is it possible? Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/md_brown_100"
android:orientation="vertical"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp" >
<TextView
android:id="#+id/credit_wallet"
android:text="#string/hi"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<com.justfashion.Logo
android:text="Fashion Wallet"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="25dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout android:id="#+id/list_offer_item_container"
android:layout_marginTop="15dp"
android:layout_below="#id/text"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shape"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="1dp"
android:textColor="#48899f"
android:textSize="#dimen/textsizeearncredit_title"
android:text="Name"
android:textAllCaps="false"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:maxLines="1"
android:textColor="#80869c"
android:textSize="#dimen/textsizeearncredit_desc"
android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center_vertical">
<TextView android:id="#+id/list_offer_badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/list_offer_item_container"
android:textColor="#color/md_amber_700"
android:textSize="12sp"
android:visibility="gone"
android:text=""/>
</LinearLayout>
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
<ImageView
android:id="#+id/nextArrow"
android:layout_alignParentRight="true"
android:tint="#color/md_grey_300"
android:rotation="180"
android:layout_width="32dp"
android:visibility="gone"
android:layout_marginRight="16dp"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:padding="#dimen/two" />
</LinearLayout>
</RelativeLayout>
I tried a lot of combination and don't works. Please help me guys! Thanks!
EDIT
The IMG from the screenshot is
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
In the code above
I'm building my own application game for Android, it's a Tic Tac Toe game.
my activities contains mostly ImageViews , all the images placed in the dir res\drawable-mdpi ONLY.
the rest of the drawable folders are empty.
my problem is that when i run the app on a 5.4 inch MDPI screen it works fine and it looks like this:
but when i run the app on another screen of different size for example this 4.65 inch XHDPI screen, it looks like this:
in the above activity i used LinearLayout and RelativeLayout, what should i do to fit my layout to any screen ?
thanks
thanks for editting the pictures
this is the code of the xml file of activity_board.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/board"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:text="#string/playersName"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:text="#string/playersPoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:text="#string/machinePoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp" >
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="55dp" >
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="315dp"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="6dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="105dp"
android:text="#string/gameNumber"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="390dp"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
Are you using RelativeLayout?
You should
1. use RelativeLayout as the base container
2. put the "Player" and "System" score inside the same horizontal LinearLayout so that they won't overlap
3. Put the "End game" button as an element which align parent bottom
The screenshots you attached shows that it's a problem caused by the soft status bar. RelativeLayout would help and you should try to prevent hard-coding the dimensions in numbers but making the auto-adjust in RelativeLayout using margins, "layout_toLeftOf", "layout_toRightOf" and etc.
Create a drawable folder, just the word "drawable", in res and put your game images in there. That will make the game images the same across every device density.
Without looking at your XML, I would agree that you're probably using hardcoded dp values instead of sizing the layout with math, ie, weights, match_parent, alignParentRight, etc.
I have adjusted your XML to be easier. I did not plug it into a previewer or anything.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="ADJUST ME"
android:layout_marginRight="ADJUST ME"
android:background="#drawable/board"
android:orientation="vertical" >
<!-- Scoreboard -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:layout_alignParentLeft="true"
android:text="#string/playersName"
android:textSize="30sp" />
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/players_name"
android:text="#string/playersPoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/machines_name"
android:text="#string/machinePoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:layout_alignParentRight="true"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="ADJUST ME" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/gameNumber"
android:textSize="25sp" />
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
My layout contains three buttons, one EditText field and one button. I want to place the three buttons in one row, but in the center (horizontal) of the screen. The EditText field should be below the buttons and below the EditText field, there should be one button.
Here is my layout:
<LinearLayout 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:background="#color/blueAct"
android:orientation="vertical"
android:paddingBottom="100.0dip"
android:paddingLeft="10.0dip"
android:paddingRight="10.0dip"
android:paddingTop="100.0dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="4.0dip"
android:paddingLeft="100.0dip"
android:paddingRight="100.0dip"
android:paddingTop="5.0dip" >
<ImageButton
android:id="#+id/buttonGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/green_button"
android:contentDescription="#string/green" />
<ImageButton
android:id="#+id/buttonRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/red_button"
android:contentDescription="#string/red" />
<ImageButton
android:id="#+id/buttonBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/blue_button"
android:contentDescription="#string/blue" />
</LinearLayout>
<EditText
android:id="#+id/phone_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/phone_code"
android:paddingTop="100.0dip"
android:textColor="#color/white"
android:textColorHint="#color/white" >
<requestFocus />
</EditText>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#color/orangeAct"
android:onClick="searchUsers"
android:paddingTop="100.0dip"
android:text="#string/button_go"
android:textColor="#color/white" />
</LinearLayout>
Now the problem is, that the three buttons are not in the center if the user changes from portrait to landscape mode.
How is it possible to make this 'responsive', without creating a separate layout file for landscape mode?
Any help would be greatly appreciated.
Don't use padding on your horizontal LinearLayout to center the views. Instead you can add views before and after that expand to fill the remaining space.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageButton
android:id="#+id/buttonGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<ImageButton
android:id="#+id/buttonRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<ImageButton
android:id="#+id/buttonBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<?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:background="#mipmap/background"
android:orientation="vertical"
android:id="#+id/homemain124"
android:weightSum="3">
<RelativeLayout
android:id="#+id/paneltamrin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="something"
android:textColor="#fff"
android:id="#+id/top1"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:layout_marginLeft="40dp"
android:padding="8dp"
android:background="#drawable/textcorner"
android:layout_below="#+id/top1"
android:text="something"
android:textSize="20sp"
android:textColor="#fff"
android:id="#+id/top2"
android:fontFamily="monospace"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top2"
android:text="APPLIED BY"
android:textSize="15sp"
android:id="#+id/top3"
android:textColor="#fff"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top3"
android:text="COURT OF JUSTICE IN INDIA"
android:id="#+id/top4"
android:textSize="15sp"
android:textColor="#fff"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/paneltamrin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="220dp"
android:layout_height="160dp"
android:src="#mipmap/book1"
android:id="#+id/image1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/paneltamrin3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="READ NOW"
android:textColor="#fff"
android:lineSpacingExtra="10dp"
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:id="#+id/buttonorder"
android:padding="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/orderbutton"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="13sp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:layout_below="#+id/buttonorder"
android:text="something"/>
</RelativeLayout>
</LinearLayout>
Linear layout added for 3 relative layouts