I have a few button in cardview but i can't drag it to anywhere i want.
in fact i want set , "next" button of media player to right of "play" button .
this is my xml code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="90dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:cardCornerRadius="0dp"
app:cardElevation="12dp">
<Button
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#mipmap/play" />
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#mipmap/next"
android:layout_gravity="center_vertical|end"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#mipmap/previous"
android:layout_gravity="center_vertical|start"/>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar2"
android:max="100"/>
</android.support.v7.widget.CardView>
</RelativeLayout>
it's result :
pic result
and what i want is :
what i want image
use this one:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="90dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:cardCornerRadius="0dp"
app:cardElevation="12dp">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="140dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
android:background="#mipmap/next"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="30dp"
android:background="#mipmap/play" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="30dp"
android:background="#mipmap/previous"/>
</LinearLayout>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar2"
android:max="100"/>
</android.support.v7.widget.CardView>
I'm late to the party. Alternatively, you can try GridLayout. Here is an example of using GridLayout which I used in my example.
android:layout_row defines which row should it be. Row number starts from top to bottom.
android:layout_column defines which column the object should be. Left to right ordering.
android:layout_columnSpan defines how many columns should the object be.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin"
android:layout_marginBottom="#dimen/card_marginBottom">
<GridLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sample"
android:layout_row="0"
android:layout_column="0" />
<TextView
android:id="#+id/txtVw_RestName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_row="0"
android:layout_column="1"
android:layout_columnSpan="2"/>
<TextView
android:id="#+id/txtVw_RestLot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="-40dp"
android:layout_row="1"
android:layout_column="1"
android:layout_columnSpan="2"/>
<TextView
android:id="#+id/txtVw_DescProgBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vacancy"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_row="2"
android:layout_column="1" />
<ProgressBar
android:id="#+id/progBar"
android:layout_width="150dp"
android:minHeight="5dp"
android:max="100"
style="?android:attr/progressBarStyleHorizontal"
android:layout_marginTop="3dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_row="2"
android:layout_column="2"/>
</GridLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Add any type of layout in your cardview and then add your elements (Button, TextView...) in the layout.
Design appearance of following xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cardview_provider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp">
<!--
//Layout within the cardview in which you have to add your components
//(Button, TextView...)
//could be other type of layout (I usually use ConstraintLayout)
-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/provider_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"/>
<TextView
android:id="#+id/provider_name"
android:text="Google"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="#+id/provider_icon"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/provider_uri"
android:text="https://www.google.com"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintStart_toEndOf="#+id/provider_icon"
app:layout_constraintTop_toBottomOf="#+id/provider_name"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Related
I have a fragment containing a recyclerView.
When an item is clicked on in the recyclerView I set the recyclerview item background to green and change the "saveBtn" text to "Update".
I need to also be able to remove the "deletebtn" every time a user clicks on a recyclerView item, or hide it so that the UI looks somewhat like this:
How could this be done?
Method I am using to update UI on recyclerView click
public void onExerciseClicked(int position) {
saveBtn.setText("Update");
clearBtn.setText("Delete");
}
XML
<?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="#drawable/gradientfrozen"
android:id="#+id/constraint_layout21">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#292929"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView5"
android:layout_width="327dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:paddingLeft="20dp"
android:layout_marginTop="10dp"
android:text="WEIGHT (kgs)"
android:textColor="#android:color/background_light"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/dec_weight"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="0.5"
android:background="#drawable/down22"
android:textColor="#color/design_default_color_background" />
<EditText
android:id="#+id/editTextWeight"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:backgroundTint="#color/green"
android:ems="10"
android:gravity="center"
android:hint="0.0"
android:inputType="numberDecimal"
android:singleLine="false"
android:textColor="#color/design_default_color_background"
android:textColorHint="#color/light_grey"
android:textSize="30sp" />
<Button
android:id="#+id/inc_weight"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="0.5"
android:background="#drawable/up22" />
</LinearLayout>
<TextView
android:id="#+id/textView8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:text="REPS"
android:textColor="#android:color/background_light"
android:textSize="16dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/dec_reps"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="1.6"
android:background="#drawable/down22"
android:shadowColor="#color/design_default_color_background" />
<EditText
android:id="#+id/editTextReps"
android:layout_width="161dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:backgroundTint="#color/green"
android:ems="10"
android:gravity="center"
android:hint="0"
android:inputType="number"
android:textColor="#color/design_default_color_background"
android:textColorHint="#color/light_grey"
android:textSize="30sp" />
<Button
android:id="#+id/inc_reps"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_weight="1.6"
android:background="#drawable/up22" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/save_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_green_shape"
android:text="Save"
android:textColor="#ffffff"
android:textSize="20sp" />
<Button
android:id="#+id/clear_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_red_shape"
android:text="Clear"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Set"
android:textColor="#android:color/holo_green_light" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Kgs"
android:textColor="#android:color/holo_green_light" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Reps"
android:textColor="#android:color/holo_green_light" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/completed_exercise_ListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#292929"
tools:listitem="#layout/completed_exercise_item" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Using LinearLayout as a direct child of ConstraintLayout defeats the whole purpose of using ConstraintLayout. It is not a good practice to use nested layout from the performance point of view. Besides, if deleteBtn is direct child of ConstraintLayout, then setting the layout_width of saveBtn to match_constraint will enable it to take up the whole space if we change the visibility of deleteBtn to gone.
cgb_pandey's answer is great and it is the recommended approach since your root viewgroup is ConstraintLayout. However, I wanted to present you an alternative way to do this using your current LinearLayout approach.
All you need to do is to set the width of both bottoms to 0dp. This way, their weight would determine how much space they occupy. If both view are visible, each of them would have 50% of the total width of the screen. If only one of the buttons is visible, it would occupy the entire screen. Here's a code snippet to guide you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/save_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_green_shape"
android:text="Save"
android:textColor="#ffffff"
android:textSize="20sp" />
<Button
android:id="#+id/clear_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
android:background="#drawable/my_small_red_shape"
android:text="Clear"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
Not that this approach involves nesting layouts and this might affect performance in the long run and also complicate your layout code pretty fast.
I want to create a view like this.
The problem is, that when the TextView size is bigger, it looks like this.
So it overlaps "View all (35)" TextView. How to prevent the overlapping? The ImageView should be right of TextView, but it has not to overlap "View all (35)". I think you understand. Thank you.
Here's the xml file.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/montserrat_semi_bold"
android:maxLines="1"
android:layout_alignParentStart="true"
android:textColor="#color/colorTextDark"
android:textSize="#dimen/text_extra_large"
tools:text="Birthday" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#+id/textView"
android:src="#drawable/wishlist_public" />
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/montserrat_semi_bold"
android:text="View all (35)"
android:layout_alignParentEnd="true"
android:textColor="#color/colorTextPrimary"
android:textSize="#dimen/text_small" />
</RelativeLayout>
Try to put your imageView to textView's drawableEnd property, after put it in nested linear layout and give to it a weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/imageView"
android:layout_marginStart="16dp"
android:maxLines="1"
android:gravity="start|center"
android:textSize="#dimen/text_extra_large"
android:ellipsize="end"
android:text="Your text here" />
<Space
android:layout_width="match_parent"
android:layout_height="match_parent">
</Space>
</LinearLayout>
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="end"
android:layout_gravity="center_vertical"
android:text="View All"
android:textSize="#dimen/text_small" />
</LinearLayout>
Try this(Please add some of your dimens property that i remove because i didn't had them) :
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="horizontal"
android:paddingTop="10dp"
android:weightSum="3">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:maxLines="1"
android:textSize="20dp"
tools:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toRightOf="#id/textView"
android:src="#drawable/wishlist_public"
/>
</LinearLayout>
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_weight="2"
android:text="View all (35)"
android:textSize="20dp" />
</LinearLayout>
I think you can use Linearlayout to achieve something like that I use to write this code and I think it can help you achieve this layout design
<?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="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
android:layout_weight="1"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#111"
android:layout_marginStart="10dp" />
</LinearLayout>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View All(35)"
android:textSize="20sp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"/>
</LinearLayout>
After that, you will get something like that
Click here to view image
Try to use ContraintLayout and use Barrier constraint or Guidline constraint to achiever you desired layout
I have fixed using guideline contraint
<?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:paddingTop="16dp">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="24sp"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.095"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.005"
tools:text="Birthday" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_adb_black_24dp"
app:layout_constraintBottom_toBottomOf="#+id/textViewAll"
app:layout_constraintEnd_toStartOf="#+id/textViewAll"
app:layout_constraintHorizontal_bias="0.13"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="View all (35)"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="333dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.62" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to create something like this :
But what I got is this :
I'm trying to create a cardView in this case is the dark purple stuff, and inside of it create TextView EditText and Button can you guide how to create almost the same layout? with the drawable on the EditText that has a border?
This is my code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".feature.exam.ExamActivity">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="0dp"
card_view:cardBackgroundColor="#color/colorPrimary"
android:background="#a9a9a9"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="33dp"
android:id="#+id/view"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
>
<LinearLayout android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:id="#+id/dialog_txt_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="Name"
android:singleLine="true">
<requestFocus/>
</EditText>
<Button
android:id="#+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:padding="5dp"
android:textColor="#ffffff"
android:text="Submit"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Looks like you need something like this, but don't forget to migrate to androidX, or rewrite this code for other support library:
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="1dp"
android:elevation="0dp"
card_view:cardBackgroundColor="#color/transparent_background"
card_view:cardCornerRadius="10dp"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="Enter your name"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:text="Abby M"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:text="Join game"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintHorizontal_bias="0.508"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/button2"
card_view:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
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
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