I want to align two pictures and text. When the first picture is commented out, the text and the second picture are aligned in the middle of a card. But the first picture is always aligned to bottom of the card. I tried all layout properties so far without luck.
See the screenshot for example. I do not understand why the circle is bigger than OK button because when I open these files they have the same dimensions. Where is the issue? I want to use LinearLayout as the simplest layout manager available.
<android.support.v7.widget.CardView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/badge_type"
android:src="#drawable/ic_gold_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/badge_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:text="#string/badge_title_KNIGHT"
style="#style/PlayRecordHeader"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView
android:id="#+id/badge_status"
android:src="#drawable/ic_correct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Update with layout_gravity="center_vertical"
I think you have to keep
android:layout_gravity="center_vertical"
and remove
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
in the LinearLayout
Related
I want to remove extra space inside the CardView so the buttons does not have a white border as shown in the picture . This image was captured from my tablet but the Layout looks well in 5 Inch Mobile devices
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/twitter_button"
android:drawableStart="#drawable/ic_twitter"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Twitter"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/facebook_button"
android:drawableStart="#drawable/ic_facebook"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Facebook"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the code for the CardViews and the buttons. I didn't paste the whole layout code because I don't think it has effect on my problem and by the way I tried changing margins of the buttons but it didn't solve my problem
From library documentation it is nowhere mentioned that you need to use can completely remove the cardview as it seems unnecessary. You can remove your cardview and enclose your button directly in MaterialRippleLayout to achieve your ripple effect. Check library description here https://github.com/balysv/material-ripple.
I tried adding some text and an icon on buttons by using "android:text" and "android:drawableTop" but the result I get isn't really correct. The text and icon aren't centered and if I try the app in landscape or change the screen size the text disappears and the icon goes out of the button a bit.
This is the layout without both "android:text" and "android:drawableTop":
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/redButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#FF0000"
app:layout_constraintBottom_toTopOf="#+id/blueButton"
app:layout_constraintEnd_toStartOf="#+id/yellowButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/greenButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#00FF00"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/blueButton"
app:layout_constraintTop_toBottomOf="#+id/yellowButton" />
<Button
android:id="#+id/blueButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#0000FF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/greenButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/redButton" />
<Button
android:id="#+id/yellowButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#FFFF00"
app:layout_constraintBottom_toTopOf="#+id/greenButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/redButton"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I wonder if there is a way to make texts and icons responsive because I also tried to use svg icons but they weren't showing.
The result I get:
Portrait & Landscape
Any help would be appreciated, thanks.
Customizing buttons can be very frustrating in Android. I suggest you take a look to this popular library for Android called FancyButton. It offers you a wide variety of options to create the button you want by just using simple XML properties in your layout.
For example, with this bit of code:
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/btn_spotify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp"
fancy:fb_borderColor="#FFFFFF"
fancy:fb_borderWidth="1dp"
fancy:fb_defaultColor="#7ab800"
fancy:fb_focusColor="#9bd823"
fancy:fb_fontIconResource=""
fancy:fb_iconPosition="left"
fancy:fb_radius="30dp"
fancy:fb_text="SHUFFLE PLAY"
fancy:fb_textColor="#FFFFFF" />
You can get this button with text and icon centered:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4"
android:orientation="vertical">
<Button
android:id="#+id/btnRed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Red Button"/>
<Button
android:id="#+id/btnGreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Green Button"/>
<Button
android:id="#+id/btnBlue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Blue Button"/>
<Button
android:id="#+id/btnYellow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Yellow Button"/>
</LinearLayout>
Drawables and text in the images are centered horizontally correctly.
Obviously the drawable you chose is very large, so in landscape there is no space for the text and in landscape the text is pushed at the bottom.
Try with another smaller drawable and you will see both text and drawable.
You can set:
android:padding="8dp"
so the drawable is not exactly at the top edge of the button.
I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>
Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.
<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.
I have created a grid view in Android. Now I want to use this custom layout to put text in the view. I can work on all views, but how can I create the view shown in picture and add text in the white space of image and inside blue rectangle too?
Try framelayout. I have tried one for you. Feel free to ask if you are not getting something.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageViewCircle"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="3dp"
android:layout_marginTop="2dp"
android:src="#drawable/mypng" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:gravity="center|center_horizontal"
android:text="50"
android:textSize="40sp" />
<TextView
android:id="#+id/textViewNumeric"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:gravity="bottom|center_horizontal"
android:text="Text"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" />
</FrameLayout>
I want go design chip layout like below.
When Text is short enough to fit withing the layout I want to view like this.
When Text is too long to fit in I want it display like this and animate text horizontally.
Is it possible to design a layout that fulfill both about needs.
I have tried solution and i have filed because those layout designs only fulfill one condition.
Solution one
<RelativeLayout
android:id="#+id/relative_store_name_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_weight="9"
android:visibility="visible">
<FrameLayout
android:id="#+id/relative_shop_name_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/relative_shop_name_text"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_text_background"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingStart="10dp"
android:ellipsize="marquee"
android:text="" />
</FrameLayout>
<FrameLayout
android:id="#+id/relative_layout_delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_toEndOf="#id/relative_shop_name_container">
<ImageView
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_delete_background"
android:paddingEnd="5dp"
android:paddingStart="10dp"
android:src="#drawable/store_name_chip_delete" />
</FrameLayout>
</RelativeLayout>
Problem with this is when text is too long delete button disappears. this layout on work for short text.
Solution two
<LinearLayout
android:id="#+id/store_name_liner_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_weight="9"
android:orientation="horizontal"
android:visibility="visible"
>
<LinearLayout
android:id="#+id/liner_shop_name_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="9">
<TextView
android:id="#+id/liner_shop_name_text"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_text_background"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingStart="10dp"
android:text="short Text" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="21dp"
android:background="#drawable/selected_store_name_delete_background"
android:paddingEnd="5dp"
android:paddingStart="10dp"
android:src="#drawable/store_name_chip_delete"
/>
</FrameLayout>
</LinearLayout>
Problem with this is when text is short delete button is not going to fit just after text. I can't make that happen by removing weight from both text view container and delete image view container but then I get the same problem in my solution one.
Please give solution to handle this.
You need to make a custom view. That way you can measure the text and resize to fit.
Just add ellipsize="end" to your chip
Just add **ellipsize="end"** to your chip
<com.google.android.material.chip.Chip
<-- android:ellipsize="end" -->
/>