Currently im working on a fine ui. Now i came to this:
Im stucking on the "profile_layout" on the left side with the muffin inside. For the two bars on the right side im using wrap_content.
But now im stucking to let the profile_layout use the full height of the "wrap_content" from the two bars.
Any ideas how to solve this?
Here's my code:
<RelativeLayout
android:id="@+id/top_bar"
android:layout_width="match_parent"
android:background="@color/colorPrimaryDark"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:padding="8dp"
xmlns:app="http://schemas.android.com/tools">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
>
<android.support.v7.widget.CardView
android:id="@+id/profile_layout"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="4dp"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="2dp"
card_view:cardBackgroundColor="#ffffff"
>
<com.pkmmte.view.CircularImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/muffin"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:background="@null"
app:border="true"
app:border_color="#EEEEEE"
app:border_width="4dp"
app:shadow="true"
/>
<TextView
android:textColor="#212121"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="10dp"
android:text="Muffin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
/>
</android.support.v7.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
>
<android.support.v7.widget.CardView
android:id="@+id/hp_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="2dp"
card_view:cardBackgroundColor="#ffffff"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@null"
android:padding="3dp"
>
<TextView
android:id="@+id/hp_text"
android:textColor="#212121"
android:textSize="11sp"
android:text="HP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:background="@null"
/>
<ProgressBar
android:id="@+id/hp_bar"
android:layout_width="match_parent"
style="?android:attr/progressBarStyleHorizontal"
android:layout_height="20dp"
android:progress="43"
android:progressDrawable="@drawable/hp_bar"
android:background="@null"
/>
<TextView
android:id="@+id/hp_currently"
android:textColor="#212121"
android:textSize="13sp"
android:text="43/100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginLeft="2dp"
android:background="@null"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/mp_bar_layout"
android:layout_below="@id/hp_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="2dp"
card_view:cardBackgroundColor="#ffffff"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@null"
android:padding="3dp"
>
<TextView
android:id="@+id/mp_text"
android:textColor="#212121"
android:textSize="11sp"
android:text="MP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:background="@null"
/>
<ProgressBar
android:id="@+id/mp_bar"
android:layout_width="match_parent"
style="?android:attr/progressBarStyleHorizontal"
android:layout_height="20dp"
android:progress="17"
android:progressDrawable="@drawable/mp_bar"
android:background="@null"
/>
<TextView
android:id="@+id/mp_currently"
android:textColor="#212121"
android:textSize="13sp"
android:text="17/100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginLeft="2dp"
android:background="@null"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</LinearLayout>
Change your cardview enclosing the muffin- layout_height to match_parent. Comment if that doesnt fix it
EDIT: Ok so after some more thinking i figured out that Relative Layout is causing the problem here. Here you can completely delete the relative layout or replace it with a linear layout. At the end to fix your problem the cardview must have height as match_parent and its immediate parent(enclosing tag) must be anything but a Relative Layout with height as wrap_content